Hex Color – The Code Side Of Color
The trouble with a color’s name is that it never really is perceived as the exact same color to two different individuals — especially if they have a stake in a website’s emotional impact. Name a color, and you’re most likely to give a misleading impression. Even something like “blue” is uncertain. To be more precise, it could be “sky blue”, “ocean blue”, “jeans blue” or even “arc welder blue”.
![Hex Color – The Code Side Of Color](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cbede5e0-6659-47bc-9e45-9daec8194aa5/hex-changing-tens-500.png)
Descriptions vary with personal taste and in context with other colors. We label them “indigo”, “jade”, “olive”, “tangerine”, “scarlet” or “cabaret”. What exactly is “electric lime”? Names and precise shades vary — unless you’re a computer.
Code Demands Precision
When computers name a color, they use a so-called hexadecimal code that most humans gloss over: 24-bit colors. That is, 16,777,216 unique combinations of exactly six characters made from ten numerals and six letters — preceded by a hash mark. Like any computer language, there’s a logical system at play. Designers who understand how hex colors work can treat them as tools rather than mysteries.
Breaking Hexadecimals Into Manageable Bytes
Pixels on back-lit screens are dark until lit by combinations of red, green, and blue. Hex numbers represent these combinations with a concise code. That code is easily broken. To make sense of #970515
, we need to look at its structure:
The first character #
declares that this “is a hex number.” The other six are really three sets of pairs: 0–9
and a–f
. Each pair controls one primary additive color.
![Hex Reading hex color reading](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1b1da505-6def-42a1-8dbf-90e83e2b1ff8/hex-reading.png)
Each pair can only hold two characters, but #999999
is only medium gray. To reach colors brighter than 99
with only two characters, each of the hex numbers use letters to represent 10–16
. A
, B
, C
, D
, E
, and F
after 0–9
makes an even 16
, not unlike jacks, queens, kings and aces in cards.
![Hex Chart Diagram showing how hex colors pass above 0-9](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/13833a53-cfc5-4775-8f97-ef0e569dcd71/hex-chart-2.png)
Being mathematical, computer-friendly codes, hex numbers are strings full of patterns. For example, because 00
is a lack of primary and ff
is the primary at full strength, #000000
is black (no primaries) and #ffffff
is white (all primaries). We can build on these to find additive and subtractive colors. Starting with black, change each pair to ff
:
#000000
is black, the starting point.#**ff**0000
stands for the brightest red.#00**ff**00
stands for the brightest green.#0000**ff**
stands for the brightest blue.
Subtractive colors start with white, i.e. with the help of #ffffff
. To find subtractive primaries, change each pair to 00
:
#ffffff
is white, the starting point.#**00**ffff
stands for the brightest cyan.#ff**00**ff
stands for the brightest magenta.#ffff**00**
stands for the brightest yellow.
![Mixing Additive Colors to Make Subtractives Mixing additive colors to make subtractives](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b51d8f7-d035-4a89-b59b-ad0dab49de32/hex-additive-and-subtractive.png)
Shortcuts In Hex
Hex numbers that use only three characters, such as #fae
, imply that each ones place should match the sixteens place. Thus #fae
expands to #ffaaee
and #09b
really means #0099bb
. These shorthand codes provides brevity in code.
In most cases, one can read a hex number by ignoring every other character, because the difference between the sixteens place tells us more than the ones place. That is, it’s hard to see the difference between 41 and 42; easier to gauge is the difference between 41 and 51.
![hex-first-digits Diagram emphasizing the first character in each pair of characters](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3315e8f0-36e9-4fd4-9270-932c03670c6f/hex-first-digits-first-b.png)
The example above has enough difference among its sixteens place to make the color easy to guess — lots of red, some blue, no green. This would provide us with a warm violet color. Tens in the second example (9, 9 and 8) are very similar. To judge this color, we need to examine the ones (7, 0, and 5). The closer a hex color’s sixteens places are, the more neutral (i.e. less saturated) it will be.
Make Hexadecimals Work For You
Understanding hex colors lets designers do more than impress co-workers and clients by saying, “Ah, good shade of burgundy there.” Hex colors let designers tweak colors on the fly to improve legibility, identify elements by color in stylesheets, and develop color schemes in ways most image editors can’t.
Keep Shades In Character
To brighten or darken a color, one’s inclination is often to adjust its brightness. This makes a color run the gamut from murky to brilliant, but loses its character on either end of the scale. For example, below a middle green becomes decidedly black when reduced to 20% brightness. Raised to 100%, the once-neutral green gains vibrancy.
A funny thing happens when we treat hex colors as if they were increments of ten. By adding one to each of the left-hand character of each pair, we raise a color’s brightness while lowering its saturation. This prevents shades of a given color from wandering too closely to pitch black or brilliant neon. Altering hex pairs retains the essence of a color.
![Changing Sixteens Diagram showing how hex affects brightness and saturation](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ed4ae55f-9a93-448e-a0c2-2437143fad29/hex-changing-tens.png)
In the example above, the top set of shades appears to gain yellow or fall to black, even though it’s technically the same green hue. By changing its hex pairs, the second set appears to keep more natural shades.
Faded Underlines
By default, browsers underline text to denote links. But thick underlines interfere with letters’ descenders. Designers can make underlines less obtrusive by scaling back hex colors. The idea is to make the tags closer to the background color, while the text itself gains contrast against the background.
- For dark text on a bright background, we make the links brighter.
- For bright text on a dark background, we make the links darker.
To make this work, every embedded link needs a <span
> inside of every :
a { text-decoration:underline;color:#aaaaff; }
a span { text-decoration:none;color:#0000ff; }
![Descenders Example of underlines that pale compared to the clickable text](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3f75ea98-2afd-4d52-92ce-9cade99e2aaa/hex-descenders.png)
a { text-decoration: none; border-bottom: 1px solid #aaaaff; }
Better Body Copy
![The Text Is Too Bright Example of text that, while technically correct, appears too bright](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3ad97013-7304-4963-92c2-6931e2e6c805/hex-text-too-light1.png)
![The Text Is Improved Example of text technically darker but visually the same](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1a6c64fb-29e5-42ad-80b3-c92df5a528b7/hex-text-improved1.png)
How To Warm Up Or Cool Down A Background
![Different Backgrounds-1 Examples with slight background color variations](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d9e07385-f95f-4670-91e2-a5fd951c9d69/hex-different-backgrounds-1.png)
Is that too much? For a more subtle shift, use the ones places instead:
![More Subtle Background Shift Examples of very slight variations in background color](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f31e3630-be99-4359-9962-294bfe1b8847/hex-different-backgrounds-2.png)
Coordinate Colors With Copy-Paste
![Swap Triplets Examples of how swapping primary colors can yield coordinated but interesting results](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e32940fd-c01e-4ddb-b3f4-67c6c0be41e5/swap-triplets.png)
Going Forward
“Shouldn’t be harder than parsing hexadecimal triplets in my head.”
Hex Color Tools
You may be interested in the following tools and apps:
Further Reading
- Color Theory for Designers: The Meaning of Color
- A Simple Web Developer’s Guide To Color
- Understanding Color Concepts And Terminology
- Creating Your Own Color Palettes
![Smashing Editorial](https://www.smashingmagazine.com/images/logo/logo--red.png)