SlideShare a Scribd company logo
1 of 21
RGB Color
& Hexadecimal
Explained!
CSC 103, 115 & 230
RGB color is composed of
3 channels on computer screens…
Red Green Blue
0-255 0-255 0-255
0 - Black White - 255
They are called:
Additive colors
because the colors combine to form white
They do not mix together like inks or paint
which are… subtractive colors
where you subtract colors to get to white
The full strength of each color is displayed
when its channel is 255 and others are 0.
Red Green Blue
R G B
The full strength of each color is displayed
when its channel is 255 and others are 0.
Red
255, 0, 0
R G B
The full strength of each color is displayed
when its channel is 255 and others are 0.
Green
0, 255, 0
R G B
The full strength of each color is displayed
when its channel is 255 and others are 0.
Blue
0, 0, 255
R G B
When all sliders are 0, the result is black.
Black
0, 0, 0
R G B
When all sliders are 255,
the result is white.
White
255, 255, 255
R G B
When all sliders are the same
between 0-255, the result is a gray.
Gray
151, 151, 151
R G B
So, millions of colors can be created
from the combinations of channel values.
209, 96, 171
So, millions of colors can be created
from the combinations of channel values.
232, 125, 35
But web uses a hexadecimal system to
display numbers from 0-255.
232, 125, 35
Instead of…
It translates to…
e8, 7d, 23
Instead of…
0 1 2 3 4 5 6 7 8 9
a base 10 system – that we normally use.
It uses…
0 1 2 3 4 5 6 7 8 9 A B C D E F
a base 16 system – A-F equals 10-15
10 11 12 13 14 15
So instead of…
255
Hundreds Tens Ones
Hex uses…
FF
Sixteens Ones
So, in the case of…
255
15 x 16’s = 240
15 x 1’s = 15
15 = F
15 = F
or FF240 + 15 = 255
So, in the case of…
255, 255, 255
#FFFFFFWould be the hex equivalent
Let’s try one…
23
17
Only 1 - 16 will fit: 1
7 - ones: 7
Would be the hex equivalent
Let’s try another one…
153
999 – 16’s will fit: 144
9 - ones: 9
Would be the hex equivalent
S0…
153, 153, 153
#999999Would be…
Or it can be abbreviated to: #999
Let’s try going from Hex to RGB…
AD
173A = is 10,
10 * 16’s = 160
D = 13
160 + 13 = 173 Would be the RGB

More Related Content

More from Richard Homa

More from Richard Homa (20)

CSC103 Vector vs Raster Graphics
CSC103 Vector vs Raster GraphicsCSC103 Vector vs Raster Graphics
CSC103 Vector vs Raster Graphics
 
CSC103 Bits, Bytes & Binary
CSC103 Bits, Bytes & BinaryCSC103 Bits, Bytes & Binary
CSC103 Bits, Bytes & Binary
 
CSC103 Web Technologies: HTML, CSS, JS
CSC103 Web Technologies: HTML, CSS, JSCSC103 Web Technologies: HTML, CSS, JS
CSC103 Web Technologies: HTML, CSS, JS
 
CSC103 Processing, Memory & Storage
CSC103 Processing, Memory & StorageCSC103 Processing, Memory & Storage
CSC103 Processing, Memory & Storage
 
CSC103 Digital Devices: Device Basics
CSC103 Digital Devices: Device BasicsCSC103 Digital Devices: Device Basics
CSC103 Digital Devices: Device Basics
 
CSC103 Internet
CSC103 InternetCSC103 Internet
CSC103 Internet
 
CCS103 Bits, Bytes, Binary
CCS103 Bits, Bytes, BinaryCCS103 Bits, Bytes, Binary
CCS103 Bits, Bytes, Binary
 
CSC103 Digital Images, Pixels, RGB Colors
CSC103 Digital Images, Pixels, RGB ColorsCSC103 Digital Images, Pixels, RGB Colors
CSC103 Digital Images, Pixels, RGB Colors
 
Excel Review Quiz
Excel Review QuizExcel Review Quiz
Excel Review Quiz
 
CSC102 Excel Basics
CSC102 Excel BasicsCSC102 Excel Basics
CSC102 Excel Basics
 
CSC102 Word Paragraph Formatting
CSC102 Word Paragraph FormattingCSC102 Word Paragraph Formatting
CSC102 Word Paragraph Formatting
 
CSC102 Computer Software
CSC102 Computer SoftwareCSC102 Computer Software
CSC102 Computer Software
 
CSC102 Computer Connectivity
CSC102 Computer ConnectivityCSC102 Computer Connectivity
CSC102 Computer Connectivity
 
CSC 102 Computer Intro
CSC 102 Computer IntroCSC 102 Computer Intro
CSC 102 Computer Intro
 
Creating Immersive Technology Experiences with Web-based Software & Resources
Creating Immersive Technology Experiences with Web-based Software & ResourcesCreating Immersive Technology Experiences with Web-based Software & Resources
Creating Immersive Technology Experiences with Web-based Software & Resources
 
Creating Immersive Technology Experiences with Web-based Software & Resources
Creating Immersive Technology Experiences with Web-based Software & ResourcesCreating Immersive Technology Experiences with Web-based Software & Resources
Creating Immersive Technology Experiences with Web-based Software & Resources
 
CSC 103 Networking pt2
CSC 103 Networking pt2CSC 103 Networking pt2
CSC 103 Networking pt2
 
CSC103 Networking pt1
CSC103 Networking pt1CSC103 Networking pt1
CSC103 Networking pt1
 
CSC103 Mobile Networks
CSC103 Mobile NetworksCSC103 Mobile Networks
CSC103 Mobile Networks
 
CSC103 Operating Systems, System Software, Powershell
CSC103 Operating Systems, System Software, PowershellCSC103 Operating Systems, System Software, Powershell
CSC103 Operating Systems, System Software, Powershell
 

Recently uploaded

“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
Muhammad Subhan
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
Overkill Security
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
Wonjun Hwang
 

Recently uploaded (20)

الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهله
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 

CSC 103, 115, 230 Hexadecimal Number System & Colors

  • 2. RGB color is composed of 3 channels on computer screens… Red Green Blue 0-255 0-255 0-255 0 - Black White - 255
  • 3. They are called: Additive colors because the colors combine to form white They do not mix together like inks or paint which are… subtractive colors where you subtract colors to get to white
  • 4. The full strength of each color is displayed when its channel is 255 and others are 0. Red Green Blue R G B
  • 5. The full strength of each color is displayed when its channel is 255 and others are 0. Red 255, 0, 0 R G B
  • 6. The full strength of each color is displayed when its channel is 255 and others are 0. Green 0, 255, 0 R G B
  • 7. The full strength of each color is displayed when its channel is 255 and others are 0. Blue 0, 0, 255 R G B
  • 8. When all sliders are 0, the result is black. Black 0, 0, 0 R G B
  • 9. When all sliders are 255, the result is white. White 255, 255, 255 R G B
  • 10. When all sliders are the same between 0-255, the result is a gray. Gray 151, 151, 151 R G B
  • 11. So, millions of colors can be created from the combinations of channel values. 209, 96, 171
  • 12. So, millions of colors can be created from the combinations of channel values. 232, 125, 35
  • 13. But web uses a hexadecimal system to display numbers from 0-255. 232, 125, 35 Instead of… It translates to… e8, 7d, 23
  • 14. Instead of… 0 1 2 3 4 5 6 7 8 9 a base 10 system – that we normally use. It uses… 0 1 2 3 4 5 6 7 8 9 A B C D E F a base 16 system – A-F equals 10-15 10 11 12 13 14 15
  • 15. So instead of… 255 Hundreds Tens Ones Hex uses… FF Sixteens Ones
  • 16. So, in the case of… 255 15 x 16’s = 240 15 x 1’s = 15 15 = F 15 = F or FF240 + 15 = 255
  • 17. So, in the case of… 255, 255, 255 #FFFFFFWould be the hex equivalent
  • 18. Let’s try one… 23 17 Only 1 - 16 will fit: 1 7 - ones: 7 Would be the hex equivalent
  • 19. Let’s try another one… 153 999 – 16’s will fit: 144 9 - ones: 9 Would be the hex equivalent
  • 20. S0… 153, 153, 153 #999999Would be… Or it can be abbreviated to: #999
  • 21. Let’s try going from Hex to RGB… AD 173A = is 10, 10 * 16’s = 160 D = 13 160 + 13 = 173 Would be the RGB