What is a hex color code
If you've ever picked a color for a website, you've seen codes like this. With letters mixed in, it looks like a cipher, but it's really the 0s and 1s from the last lesson in a different outfit. Let's peel it back one layer at a time.
Four 0s and 1s become one character
In the last lesson we saw that everything is written in 0s and 1s.
But a long string of 0s and 1s is hard for people to read and easy to get wrong.
So we group them in fours and shrink each group to a single character.
Four bits can make exactly sixteen patterns, from 0 to 15.
Four switches give sixteen values, 0 to 15, each shown as one character.
There's one problem.
Once you reach two digits, like 10, 11, or 12, it's hard to tell whether that's one character or two.
So one more clever rule was needed.
After 9 comes A
Our digits only go up to 9.
But hexadecimal (base 16) has to show values up to fifteen with a single character, so it's six characters short.
Those gaps were filled with letters.
After 9 comes A, then B, and so on up to F.
Ten digits plus six letters: sixteen values, one character each.
So A means ten and F means fifteen.
It was never a scary code, just letters borrowed because we ran out of digits.
Screen colors are three kinds of light mixed together
Now let's turn to colors on a screen.
Every color on a screen is made by mixing three kinds of light: red, green, and blue.
How brightly each one shines decides the color.
Move the three sliders below and the color changes right away.
Turn all three off for black; turn them all the way up for white.
Set each light anywhere from 0 to 255 and you get more than sixteen million colors.
But doesn't the code that appears with the color look familiar?
Cut #FAA832 into three pieces
A color code is just the red, green, and blue values written in hexadecimal and placed side by side.
Cut the six characters into pairs and you get three pieces.
The first pair is red, the middle pair is green, and the last pair is blue.
Read it two characters at a time.
F is 15 and A is 10.
So FA is 16 times 15 plus 10, which is 250.
Read the same way, #FAA832 means red 250, green 168, blue 50, and that gives this warm yellow.
Now you can read the code
Once it clicks, you can get a rough idea of a color just from its code.
The colors below show how.
A big red value looks reddish, and when all three values are big, the color is bright.
It's not a secret code anymore.
When all three values are big the color is bright; when only one is big, that color stands out.