Dear Ms. FEWD,
I want to become better with hexadecimal colors. I can color pick with a tool like Photoshop, but I would love to be able to look at the hex and know what color it is. Any advice?
Pigment of Your Imagination
Let’s start by explaining exactly what hexadecimal is. From Merriam-Webster, the definition of hexadecimal is “of, relating to, or being a number system with a base of 16”.
“But there’s only 6 places within a hexadecimal color” you say. Yes, hexadecimal has six places, and each place has an option of 16 numbers/letters: 0-9 and a-f. For those six places, it’s divided up into three colors. The first two hex values are for red, the middle two for green, and the last two for blue.
The order in which we count with hexadecimal is as follows: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1a, 1b, 1c, 1d, 1e, 1f, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2a, 2b, etc., until we get to the end with ff. This allows us 256 values (16×16) for each of the three colors.
Let’s look at a few simple hexadecimals, using the highest/brightest value (ff) and lowest/darkest value (00) only:
- #000000 – true black. All three values are at their darkest value
- #ffffff – true white. All three values are set at their brightest value
- #ff0000 – true red. Red is set at the highest value, and green and blue are at their lowest
- #00ff00 – true green. Green is set at the highest value, and red and blue are at their lowest
- #0000ff – true blue. Blue is set at the highest value, and red and green are at their lowest
Let’s move on to some more difficult ones. When all three colors repeat their values, for example #cccccc, #2a2a2a, and #f3f3f3, you know each color is getting added equally, so will be on the gray spectrum, from white to black. At that point, it becomes easier – we only really need to figure out where the one value falls to know if it’s a light gray or dark gray. Let’s take the above three examples, add #444444, #4f4f4f and order them from darkest to brightest gray.
Check your answers:
Now for pro difficulty level. What if they’re all different? This is where it gets fun, and takes some practice. First, we figure out which are the dominate color or colors, and then we need to figure out how the three mix.
Let’s look at the following hexadecimal color, and break it down to figure out what color it is:
Red = 20
Green = 42
Blue = 14
We can put the following together from the information provided:
- All three colors are on the darker end
- Green is the brightest, then red, then blue
- But red and blue are close, being 12 values apart
- Green is the dominate color
We know this is going to be a dark, slightly muddied, green.
Let’s try another one: #919cf3
Red = 91
Green = 9c
Blue = f3
Here’s what we know based on this information:
- All three colors are on the brighter end
- Blue is the brightest, then green, then red
- Green and red are close, being 11 values apart
- Blue is the dominate color
We can then put together that this is going to be a fairly bright grayish-blue color.
Last example: #874f00
Red = 87
Green = 4f
Blue = 00
- Blue is the darkest value, followed by green, and then red.
- Red is the dominate color and fairly bright, showing up in the middle of the values. But green has an input in this too, being set at 4f.
- We only really have two values here to combine. Blue adds a darkness factor to it. But after that, it’s a brighter red mixed with a darker green.
Sounds gross? A muddy mid-orangey brown? Let’s see how close you were:
It’s worth briefly talking about RGB and RGBA colors, while we’re here. From above, we know each of the three colors has 256 possible values. Figuring these out for RGB values are the same, albeit perhaps a little easier for some. Instead of trying to count in hex and figure out where each of the three colors lays as far as brightness or darkness, RGB and RGBA do it for you, with values 0-255. Writing #0000ff is the same as rgba(0, 0, 255, 1) or #0000ff. Red and green are both set at 00 (or the 0 most value), while blue is set at ff (or value number 255, the brightest value). RGBA adds an extra value for the “alpha-channel” which defines opacity.
Do you have a front end development question? Ms. FEWD has answers. Email her at MsFEWD@tahzoo.com.