Read Hexadecimal Color At A Glance

You've seen colors similar to these in code:
#d7a367
#a3621f
#ffe7c2
#387f41
#505f69

You know they are colors, but wouldn't it be helpful/occasionally useful/a neat party trick to be able to ballpark visualize the color by thinking about it for a few seconds? [Yes!] Especially if learning how is quick and easy, but can create the appearance of GENIUS?!! [Yes!]

This post will briefly explain hexadecimal, RGB color, and translating RGB to Hue, Saturation, and Brightness in your head.

Reading Hexadecimal Numbers

  • These color codes are hexadecimal numbers.
  • Normal counting is called "Decimal" because it goes to 10. Binary counting only has two digits, 0 and 1. Hexadecimal has 16 digits: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
  • With leading zeroes, here's an abbreviated count to 255 in Hexadecimal: 00, 01, 02, 03, 04 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11, 12, 13...19, 1A, 1B, 1C, 1D, 1E, 1F, 20...98, 99, 9A, 9B, 9C, 9D, 9E, 9F, A1, A2... AE, AF, B0...BF, C0...F9, FA, FB, FC, FD, FE, FF.
  • So, with two hexadecimal digits, the lowest is 00 and the highest is FF.
  • 00-FF in hexadecimal is the same as 0-255 in decimal.

Hexadecimal Colors

  • In a hexadecimal color, like "#d7a367" for example, the first two digits are Red, the middle two are Green, and the last two are Blue. RGB.
    • Red "d7"
    • Green "a3"
    • Blue "67"
  • Notice which digits are more significant. The first, third, and fifth places are 16 times more significant than the second, fourth, and sixth places.
    • So, in this example, "d", "a", and "6" matter 16 times more than the "7", "3", and "7".
    • Just like the difference between 33 and 53 is a lot bigger than the difference between 33 and 35.
    • (Remember, #d7a367 acts like three numbers, not one.)
  • 2 digits, 16 values each, means 16 x 16 choices, or 256 choices. From 0 to 255. FF is 255. (0-255 in decimal is 00-FF in hexadecimal.)
  • 256 reds x 256 greens x 256 blues make 16.7 million colors.
  • Notice also that the letter "o" is not a hexadecimal digit, so any circles you see are zeroes. No "L"s either, which could be confused for ones. Only A, B, C, D, E, and F, none of which are ambiguous.

RGB Color

  • RGB forms a set of Primary Colors, from which a vast array of other colors can be formed by mixing.
  • The "Primary Colors" you were most likely taught in school ("Yellow and Blue make Green") are applicable to mixing paint.
  • The "Primary Colors" of printing presses are Cyan, Magenta, and Yellow, with Black tossed in for clarity.
  • This set of "Primary Colors", Red, Green, and Blue, are well suited to shining lights into people's eyes, or projecting on a screen. That's why they are used for computer screens.
  • In the RGB color scheme
    • Red and Green make Yellow
    • Green and Blue make Cyan
    • Blue and Red make Magenta

That was the hard part. Here are some quick guidelines.

Black, White, and Gray

1) Turn all the lights out, and the screen is black. Zeroes are all the way off. Your first color: #000000 is Black.

2) Turn all the lights on, and the screen is white. #FFFFFF is White.

3) If Red, Green, and Blue are on equally, the color is a shade of Gray.

  • #000000 (Black)
  • #232323
  • #6a6a6a
  • #999999
  • #c8c8c8
  • #ffffff (White)

Those are all shades of gray, and there are 250 others.

Hue

The Perfect, Brightest, most Vivid, Canonical Primary Colors are the ones where those lights are on, and the others are off.

  • #ff0000 Red
  • #00ff00 Green
  • #0000ff Blue

For Secondary colors, turn on the two you want, turn off the other one.

  • #ffff00 Yellow
  • #00ffff Cyan
  • #ff00ff Magenta

THEREFORE "Hue" is determined by which color couplet (or couplets for secondary colors) has the highest value.

Brightness

For darker colors, choose values closer to black

  • #330000 a dark Red (like wine)
  • #002f00 a dark Green
  • #00003a a dark Blue

Brighter colors are closer to white

  • #c90000 is a bright Red
  • #00ef00 is a bright Green
  • #0000fa is a bright Blue

THEREFORE "Brightness" is determined by how high the highest value is. A color with the highest value of c9 is brighter than one with the highest value being an 82.

Saturation

"Saturated" can also be called "vivid". "Desaturated" can also be called gray.

To desaturate a color, add gray. This means adding some of the other two colors.

  • #ffcccc is still Red, because the highest couplet is Red. But the color is a also a lot like #cccccc, a bright light gray.
  • The converse of this is that if you have a gray, you can warm it up by adding a little red.
  • You can also make cool grays by adding blue.
  • #ccccdc is a bright cool gray blue.

The most "Saturated" colors are the colors with the biggest difference between the Hue couplet and the other two couplets. 

Pastel colors are both Bright and mostly Desaturated, because they are near White but with a little color left in them. Like #ffeeee would be a bright, desaturated, nearly white version of red, so a pastel pink.

Looking at RGB Hexadecimal, and visualizing Hue, Saturation, and Brightness

That gives us control over Hue, Saturation, and Brightness, the Primary and Secondary Colors, and the grays. Pretty good. Let's look at the examples again.

  • #d7a367 Lots of Red, less Green, much less Blue. Red and Green make Yellow, leaning Red is Orange. Desaturated somewhat by the blue.
  • #a3621f Lots of Red, way less Green, almost no Blue. Similar to the first example, but 20% darker overall.
  • #ffe7c2 Pastel Yellow-Orange. Super Bright (ff), but not saturated (c2 is nearly as bright as ff)
  • #387f41 Green is dominant. 50% Bright. 50% saturated, too, being about as far from gray as from vivid. Red and Blue nearly equal.
  • #505f69 Blue dominant. Slightly less bright than the Green above. A little closer to gray. There is enough more green than red to matter, so it will lean more toward Cyan than Magenta.

One way to check these answers and to play on your own is to visit the HEX Colour Tester.

The End. See? Easy.