If you have ever played around in the generator, or really anything that requires picking a color, you have probably seen a string of numbers and letters like this
C2FFFB
This is a hex code. But what does it mean? Well, as it turns out, you don't need to be a computer to read them.
First, we gotta talk about colors. The primary colors are the colors that can be mixed in different amounts to create every other color. The primary colors that you were taught in school are probably red, yellow, and blue. When you mix them all, you get black. But this system only works with pigments, the physical substances that make things like paints and dyes. But things are different when we talk about light.
The primary colors of light are red, blue, and green. When you mix them, instead of getting black, you get white. Hex color codes are based on light, not pigment.
So, how do you show different amounts of color? The most obvious way is to assign a numerical value based on how much of each color there is. That is exactly how hex codes work!
The sections of a hex code are as follows:
RRGGBB
Just using the 0-9 numbers we have available isn't specific enough, so instead, hex codes use 0-F. After we hit nine, it switches to the alphabet, so A=10, B=11, C=12, and so on. This means that hex codes are written in base 16. All that means is that 16 is the first number that needs two digits. We humans usually use base 10, and computers often use base 2 (or binary) as core instructions. Using this, we can combine all sorts of combinations of values to get different colors. Here are a few examples.
6A2
234
F37
The second digits are for fine-tuning, basically decimals. Just as 0.9 is much closer to 1 than 0, 0F looks very nearly identical to 10 (not ten, it's one, zero).
800000 farther 8F0000 closer 900000
Now that you know how to read them, let's look at how to make different colors.
Darkness/lightness
Remember that combining all colors of light makes white, so the Hex code for white is FFFFFF, maximum in all colors. If you want to have a light blue, you can't just use full blue; you have to increase the other colors.
0000FF -------------> 7070FF
To make a color darker, decrease the values.
0000FF -------------> 000060
Saturation
When using paints, to dull a color, you add its opposite. Because the opposite of a primary color is the combination of the other two, you can dull a hex code by increasing the other colors and reducing the amount of the base.
00A000 ------> 308030 ------> 506050
Making a grey is as easy as making all the color values the same.
Now you can read and make hex codes!
Notes:
Yellow is equal parts red and green
8 is the middle of base 16, just like 5 is the middle of base 10
To get the opposite color, you can just flip all the values over the middle. Ex: 19A2E6 ---> E65D19 |
