What does a color code like #FAA832 mean?
You've probably seen a code like this when picking a color for a website. The mixed-in letters look like a secret code, but it's really just the 0s and 1s from last time, wearing a different outfit. Want to peel it back together?
Four 0s and 1s shrink into one character
Last time we learned 0s and 1s.
But a long line of just 0s and 1s
is too long and confusing for human eyes.
So we group them four at a time
and shrink that into a single character.
Four bits can make
anything from 0 to 15,
exactly sixteen values.
Sixteen values, from 0 to 15, fit into one character.
But there's a catch.
When it hits two digits, like 10, 11, 12,
you can't tell if that's one character or two.
So we made a clever little deal.
After 9 comes A
Our everyday numbers
only go up to 9.
But a single hex character
has to reach all the way to fifteen.
What about the missing six?
We just borrowed letters.
After 9 comes A,
then B,
all the way to F.
Ten digits plus six letters make sixteen values in one character.
So A is ten,
and F is fifteen.
Not a scary secret code,
just letters we borrowed
because the numbers ran out.
A color is three lights mixed together
Now let's get to color on a screen.
Every color you see on a screen
is made by mixing three lights:
red, green, and blue.
How brightly you turn on each one
decides the color.
Drag the three sliders yourself
and watch the color change.
All off is black, all the way up is white.
Tune each light from 0 to 255
and you get over sixteen million colors.
But that code up top,
doesn't it look familiar?
Slice #FAA832 into three pieces
A color code is really
just the three values, red, green, and blue,
written in hex
and stuck side by side.
Cut the six characters into pairs
and you get three pieces.
The first two are red,
the middle is green,
the last is blue.
Read it two characters at a time.
F is 15 and A is 10, remember?
So FA is
16 times 15 plus 10,
which is 250.
Read this way, #FAA832 means
red 250, green 168, blue 50.
This very warm yellow.
Now the code reads itself
Once it clicks,
you can glance at a code
and roughly know the color.
Look at the colors below.
A big red value means reddish,
all three big means bright.
It's not a secret code anymore.
All three high means bright, one high means that color deepens.