Floating Orange
Design. Write. Learn.

What I Learned This Week

The Three Properties of Color - In Hex

Color is a product of three basic properties: Hue, Value and Chroma (aka, Intensity, or Saturation). Hue, of course, refers to the twelve basic colors of the color wheel. Value refers to the lightness or darkness of a color, where high-value is lighter, and low-value is darker. Chroma refers to the purity of a color; you can add grey to a hue to create what’s called a “tone”, add black to a hue to create a “shade”, and add white to create a “tint”.

Since I started creating digital graphics and design I’ve been acutely aware of the hex codes that determine hue, value and chroma of my designs. I’m forever jotting down hex codes for color schemes and brand guidelines. But I’ve never actually adjusted the hex values themselves to tweak a hue one way or another. 

Sure, when I first started, I learned quickly that #000000 is black and #FFFFFF is white and printers prefer #FFFFFE because its very difficult to achieve a really pure white. Over time, I learned to read the hex so that I understood the basic colors they represented, but I always wondered how adjusting the hex characters one way or another would change my colors, and never really took the time to figure it out because the tools I use do it for me. Lazy, I know.

Today, I decided to find out a bit more about hex values, and here's what I learned:

The first thing to know about hex colors is that the characters are grouped by hue: FF0000 is red, 00FF00 is green and 0000FF is blue; RRGGBB. These are called additive colors, because you start with zero and add value to increase hue. The higher the number, the brighter the color. Subtractive colors, on the other hand, start with white (remember, white is FFFFFF) and subtract to get the color desired: 00FFFF is Cyan, FF00FF is magenta and 0000FF is yellow. Notice these colors are brighter because they start with white and subtract value from a hue. 

Every color in hex is created by mixing the brightness of the three hues, red, green and blue. Every hue is controlled by the value of two hex characters on a scale from 00 to FF. The first character is referred to as the sixteens, and the second as the ones. If you compare the values of hues, its basically easier to notice a difference when there’s a big change in the sixteens than if there’s a change in the ones. So, if you look at a color, like 901565 (which is a deep purple) to 909565 (Olive drab), there’s a big, noticeable difference even though only one character was changed. But it was a sixteens, so the difference is big and noticeable. If you compare 901565 to 991565, it’s subtle because the value changed was in the ones of the red hue.

If you spread the sixteens apart, like F06010 (bright orange), you get a more chromatic or saturated color. The closer the sixteens are, the less saturated the hues become. In fact, this closeness is where you’ll find all the grey scales. The higher the sixteens, the lighter the color.  The lower the sixteens, the darker the color. The greater variation between the sixteens, the more saturation and the smaller the variation the less intense the color becomes until it fades into a shade of grey.

Hue, value and chroma: the three properties of color. In the digital world, these properties can be controlled by six hexadecimal character to produce over 16 million combinations. It’s a thrilling challenge, finding just the right blend of color to convey an emotion, create a brand, tell a story. And understanding how hexadecimal numbers control that blending helps me become better at the craft I love.