You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

## 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”. [Links checked February/17/2017]

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 Link

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 Link

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.

The higher the numbers are, the brighter each primary color is. In the example above, 97 overwhelms the red color, 05 the green color and 15 the blue color.

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.

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.
• `#ff0000` stands for the brightest red.
• `#00ff00` stands for the brightest green.
• `#0000ff` 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.
• `#00ffff` stands for the brightest cyan.
• `#ff00ff` stands for the brightest magenta.
• `#ffff00` stands for the brightest yellow.

#### Shortcuts In Hex Link

Hex numbers that use only three characters, such as `#fae`, imply that each ones place5 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.

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 Link

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.

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.

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.

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>:

`a { text-decoration:underline;color:#aaaaff; }`

`a span { text-decoration:none;color:#0000ff; }`

As you can see here, underlines in the same color as the text can interfere with parts of type that drop below the baseline. Changing the underline to resemble the background more closely makes descenders easier to read, even though most browsers place underlines above the letterforms.

Adding spans to every anchor tag can be problematic. A popular alternative is to remove underlines and add border-bottom:

`a { text-decoration: none; border-bottom: 1px solid #aaaaff; }`

#### Better Body Copy Link

A recurring design problem is that a specific color may be technically correct but has an unintended effect. For example, some designs call for headers and body copy to be the same color. We have to keep in mind that the thicker the strokes of large text appears, the darker the small text appears.

`h1, p { color: #797979; }`

`h1 { color: #797979; }`

`p { color: #393939; }`

While technically identical, the body of the copy is narrower, and more delicate letterforms make it visually brighter than the heading. Lowering the sixteens places will make the text easier to read.

#### How To Warm Up Or Cool Down A Background Link

Neutral backgrounds may be easy to read against, but “neutral” doesn’t have to mean “bland”. Adjusting the first and last byte can make a background subtly warmer or cooler.

• `#404040` — neutral
• `#504030` — warmer
• `#304050` — cooler

Is that too much? For a more subtle shift, use the ones places instead:

• `#404040` — neutral
• `#4f4040` — warmer
• `#40404f` — cooler

#### Coordinate Colors With Copy-Paste Link

Recognizing the structure of a hex number’s number/letter pairs gives designers a unique tool to explore color combinations. Unlike color wheels and charts, rearranging pairs in a hex number is a simple process to change hues while keeping values similar. As a bonus, the results can be unpredictable. The simplest technique is to move one pair of characters to a different spot, which trades primary colors.

A common design technique to make text or other visual elements coordinate with a photo is to use colors from within that photo. Understanding hex colors can take that a step further, by deriving new colors that coordinate with the photo without taking directly from the photo.

### Going Forward Link

Don’t let the code intimidate you. With a little creativity, hex colors are a tool at your disposal. If nothing else, next time someone asks if you can solve a problem with code in any language, you can simply say:

“Shouldn’t be harder than parsing hexadecimal triplets in my head.”

### Hex Color Tools Link

You may be interested in the following tools and apps:

(il)

Ben Gremillion is a Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He writes tutorials and facilitates the ZURB University training courses.

1. 1

### Kris Van Houten

October 4, 2012 5:40 am

Awesome article. I have often wondered how the heck hex codes are structured, this article makes it look so much more simple than I previously thought. Thank you!

4
• 2

### Martijn Oud

October 4, 2012 6:40 am

I have done the same but never bothered to learn more about it! Reading about the RGB part really made me have an “ah-ha” moment. I always assumed #09b meant #09b09b.

0
• 3

### Alex McCabe

October 8, 2012 1:08 am

I too was under that impression, but for the sake of ease I always use the full 6-digit code when using hex, even when all six digits are the same. It’s just slightly easier to read.

This article explains a lot, and may require more than one read to understand fully I feel.

0
2. 4

### TJ

October 4, 2012 6:26 am

Fantastic article! I’ve been meaning to look into how these hex values work. I’m glad I could find it here. Thanks!

2
3. 5

### George

October 4, 2012 6:26 am

Excellent report. =)

5
4. 6

### Voytek

October 4, 2012 6:29 am

Wow, perfect job!

5
5. 7

### Sriram Velamur

October 4, 2012 6:30 am

Wonderful piece. Thanks a ton for making things on the hexworld this clear.

8
6. 8

### Peter Müller

October 4, 2012 6:30 am

There are other color spaces that are much more intuitive to do a lot of these things in. HSL or HSV are easier to understand by humans, which is also the reason why color pickers focus om visualizing those.

-1
7. 9

### Rick

October 4, 2012 6:31 am

That is a great article, Very detailed and informative. The basic structure of the hex numbers I knew but the added stuff on how to work with them was awesome.

0
• 10

### mary

October 10, 2012 12:40 am

This was my main takeaway from this article too. :)
The additional tips on mixing up or dividing hex values for color-matching was handy for hex-familiar people like us.

0
8. 11

### Zaethrael

October 4, 2012 6:34 am

This is perfect! (i need more color theory :))
Thank You very much,

0
9. 12

### Lanny Heidbreder

October 4, 2012 6:43 am

Quality of information: ★★★★★

My happiness with this article now that all my secrets are exposed to the world: ★☆☆☆☆

7
10. 13

### Michael Brown

October 4, 2012 7:02 am

Nice article, even for someone who already knows all this stuff. But please….the most significant digit in a hex byte is NOT the “tens place”. Hex is base 16, not base 10. The “tens place” is for decimal (base 10) numbers.

0
11. 14

### Sven

October 4, 2012 7:03 am

Nice article.
But why don’t you use #ff0000 for Red. That would’ve been more accurate.

0
• 15

### Jon

October 4, 2012 12:28 pm

Having used full saturated colors in the graphics represented would have killed readers’ eyes.

0
12. 16

### Mark

October 4, 2012 7:15 am

Got to agree with Peter.

Learning to use hex code can be useful for recognizing colors in other peoples code, but there are much better ways to work with color out there.

If your using a pre-processor you can use HSL with confidence (as it will convert to hex so everything works on older browsers). Using HSL is amazing. It’s made such a difference to my workflow. Being able to look at color value and easily recognize it and make small adjustments is a massive time saver.

Bottom line hex/RGB are for computers – human designers shouldn’t have to bother with them.

0
13. 17

### Nick

October 4, 2012 7:18 am

Just FYI, there is no “tens” place in a hexadecimal pair. It’s the “sixteens” place. Aside from that, good job!

0
14. 18

### Chris Nager

October 4, 2012 7:36 am

Thank you for this in depth look into hexadecimal colors.
Here is my proposal for further simplified hexcodes:
http://chrisnager.com/further-simplified-hexcodes/

0
15. 19

### T800

October 4, 2012 7:42 am

This is great find!
I wonder if there are any graphic tools/add-ins that do this kind of processing.

0
16. 23

### Carl

October 4, 2012 7:43 am

Amazing tutorial. thank you for making HEX so much easier to understand!

PS: Hope you don’t mind that I added it to http://coursebacon.com/ (It’s a side project of mine :)

0
17. 24

### James

October 4, 2012 8:10 am

Thanks Ben, this was really well done. The Mathematician in me winced a little every time you referred to the “tens digit,” but I’ll let it slide ;)

0
18. 25

### Chris Booth

October 4, 2012 8:14 am

Good article, but the phrase “each ones place should match the tens place” is confusing. Since we’re talking about hexadecimal here, the left-hand digit is not the “tens place” but the “sixteens place”.

0
• 26

### Ben

October 4, 2012 8:36 am

I thought “tens” would cause less confusion. But you’re right, technically it’s base 16. Actually, I like the way you phrased it: left-hand digit covers all the bases.

0
19. 27

### Srinivas Reddy

October 4, 2012 10:47 am

Great article. The hexa world looks little brighter now. Thanks for share!

0
20. 28

### caleb hanson

October 4, 2012 10:54 am

You make a good point with color naming helping people think about it (it’s worked for J Crew).

A nice thing to do is to use a CSS language like SASS or LESS and create and name your colors at the top of the file. It’s not semantic to have a variable called “BlueJeans” but damn, it makes it easier to remember which color you’re talking about.
background-color:\$BlueJeans;
color:\$Ivory;
}

-1
• 29

June 24, 2014 5:31 pm

In a similar vein, I create classes in my CSS for the major colors used in my project. For the newbies reading, an example:

In the css file:
.bluejeanstext {color: #213e57;}
.bluejeanscontainers {background: #213e57;}

The HTML:

Yay blue jeans!

Not a perfect solution, but as a designer first, developer second, using class names actually helps me visualize the colors in my head as I code–and it saves me time in the long run.

1
• 30

June 24, 2014 5:33 pm

Oops, it hid the HTML!

Basically, I assigned the .bluejeanstext class to a paragraph tag, and the .bluejeanscontainers class to the surrounding div.

0
21. 31

### Aaron

October 4, 2012 11:58 am

Great tips on color coordination via copy and paste. I thought for awhile you couldn’t do any real color math without converting RGB to HSL, or dealing with CSS preprocessors. Looks like you can actually do a bit just with the RGB HEX by itself.

Thanks!

0
22. 32

### Sam

October 4, 2012 12:11 pm

Nice read, but it looks like the first bar graph is wrong. The result of #c0d050 is more saturated earwaxy color, and the bars reach the wrong hexadecimal characters on the graph. This might confuse others, as it confused me.

0
• 33

### Michael Rommel

October 4, 2012 1:42 pm

Yep, the green bar is two increments too high, blue is eight increments too high… got me started to write this comment, too…

-1
23. 34

### oncehewasrubix

October 4, 2012 2:22 pm

Thanks for this! I got a couple guys here who like to say things like “Oh try #2A2A2A instead if #2C2C2C” That honestly doesn’t mean anything to me because im not looking at the HSB or RGB. I do see the numbers but I honestly dont think in HEX. This article has helped me to better understand the meaning of the hex colors and their corresponding values. I know the hex is a representation of RGB, but when you start to add letters to the mix… That’s where I get lost. Usually when someone is telling me specific hex values, it’s not a designer.

“more pink in that green please”

0
24. 35

### AFR

October 4, 2012 3:43 pm

Nice one!

0
25. 36

### Philip Dorrell

October 4, 2012 5:19 pm

Ben, a 24 bit 6 digit hexadecimal number is not a “color”. At best it is an intention to represent a color. Even going with the assumption that we are talking about the color of transmitted light, and ignoring issues of “perceived” color, there are a number of variables that can affect the relationship between the hexadecimal RGB code and what actually comes out of your monitor. In particular:

* For each of R, G and B, the nature of the phosphor chemical, and how it is contained within the screen.
* What the backlight is.
* For each of R, G and B, and for each number from 0 to 255 (i.e. 00 to FF in hex), how that number translates into intensity of transmitted light.

-1
• 37

### Ben

October 5, 2012 5:19 am

Fair point. Just as computer icons represent files, hexadecimals are codes until computers do something with them. Same goes for all HTML/CSS. Most designers I’ve talked to assumed the codes had no pattern, let alone a direct relationship to RGB in web design. A follow-up article might get into the physics; here I wanted to explain that changing, say, “.classname { color: #ff0000; }” to “.classname { color: #00ff00;}” had predictable results.

Other topics I decided beyond scope of this introduction: How ambient light affects viewing, historical “web-friendly” hex codes, and choosing color for people with less-than-ideal vision.

0
26. 38

### avioli

October 4, 2012 6:40 pm

Love the Make Hexadecimals Work For You section and everything below. Great insight!

0
27. 39

### loremipsum

October 4, 2012 9:19 pm

0
28. 40

### e--p

October 5, 2012 12:13 am

I’ve created 2 little tools to play with colors : gradient and swatch
http://etienne.pouvreau.free.fr/public/nuancier-hsv/

And, just for fun, one that mix colors & type :
http://etienne.pouvreau.free.fr/public/cameleotype/

0
29. 41

### James

October 5, 2012 12:44 am

I found a minor error in your article: hex numbers range from 0 to 15, not 0 to 16; F has a value of 15.

0
• 42

### Ed

October 7, 2012 8:36 am

>> hex numbers range from 0 to 15
Don’t forget that ‘hexadecimal’ is loosely translated Greek/Latin for ‘six’ and ‘decimal’ (10), or sixteen. Sounds like you’re forgetting to keep in mind there’s zero, so there’s 0-9 which are the first ten values plus a-f which are the following six values. A total of 16.

Great article BTW.

0
• 43

### Fox-Dev

October 11, 2012 2:37 pm

I think James meant that there is (like you said) 16 different digits in a hex color code, but values are from 0 to 15 and not from 1 to 16 (unlike card’s value).
It’s like when you’re counting with only one decimal digit, you start from 0 to reach 9, and not starting from 1 to 10. It is the same here.
I think this article is great but I would like it better if it can popularize this kind of hardly accessible intel without compromising the accuracy of the content.

0
30. 44

### rix1

October 5, 2012 1:12 am

Great article! Just one little thing…
In the “Keep Shades In Character” paragraph, isn’t the hex value for the darkest green wrong? The illustration says #203000, but shouldn’t it be #205000?

0
• 45

### Ben

October 5, 2012 5:22 am

That’s one problem with compressing images for PNG files: examples are sometimes a tad off.

0
• 46

### Willy Wongi

October 8, 2012 2:03 am

I don’t think that the PNG compression changed a “5” in a “3” :D

0
31. 47

### Jöran Aerns

October 5, 2012 1:51 am

Kudos to you Ben for making this so easy to understand, much appreciate it!
Gonna make use of it right away

0
32. 48

### Domdib

October 5, 2012 2:13 am

Interesting. Another useful tool is http://www.colorizer.com

0
33. 49

### Stijn

October 5, 2012 2:44 am

Nice article! And nice suggestions on finding colours within the same “space”/”spectrum”.

A nice addition to the initial explaining could have been stating hexadecimal FF equals numeric 256, which corresponds with the 0-255 digits in RGB colour codes: RGB 255,0,16 -> HEX #FF0001

I enjoyed reading this.

0
• 50

### Chris Walsh

October 16, 2012 3:24 am

FF does not equal 256, it equals 255.
Ranges go from 00 to one less than the base.
e.g.
Range 00-FF (hex) is 0-255 but comprise of 256 values
Range 0-F (hex) is 0-15 but comprise of 16 values
in exactly the same way that:
Range 0-99 (decimal) comprise of 100 values
Range 0-9 (decimal) comprise of 10 values.

1
34. 51

### Kelsey Golden

October 5, 2012 6:21 am

Great Article! I used to use various online tools to make complimentary colors. Now I understand how those tools work. Very fascinating.

0
35. 52

### Iván Zazueta

October 5, 2012 7:02 am

Awesome, I have the “KEEP SHADES…” problem.

0
36. 53

### Dino

October 5, 2012 8:20 pm

Finally a useful article!

0
37. 54

### Haziq Mir

October 6, 2012 12:57 am

I don’t feel special anymore! Excellent article. Just the perfect amount of information.

0
38. 55

### Jean

October 6, 2012 12:11 pm

I guess. I’d probably advise someone to learn colour paint theory first by mixing real oil or acrylic paint to understand colours first and how they are derived, before hitting the computer software.

0
39. 56

### Gonzalo

October 7, 2012 8:51 am

HEX code make simple, thank you Ben Gremillion!

0
40. 57

### Andy Smith

October 8, 2012 2:15 am

I never knew how Hex was worked out, and to be honest never really thought I needed to, however, this makes it simple and easy to understand as well as adding some useful tips on using different colours.
Nice article.

0
41. 58

### Jon

October 8, 2012 5:14 am

“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 …”
At first I was confused with your opening numbers there because when working on images within the 0-255 range for each color one has to save images in 8 bit mode. 8 bit per channel R,G,B … so yes right 2 to the power of 24 in total. Math has never been my cup of tea. But none the less, this might be confusing to others too, not?
Bookmarking this site, thank you sir!

0
42. 59

### Gajender Singh

October 8, 2012 9:39 pm

thanks, this is really helpful!!

0
43. 60

### Dan

October 9, 2012 12:19 am

Great article, so well explained. Thanks

0
44. 61

### Edward Meehan

October 9, 2012 11:56 am

This was a great article, hex values boggled my mind when first introduced but now make more sense after years of use… I wish this article had been shown to me in school.

0
45. 62

### Giancarlo Deleon

October 9, 2012 11:57 am

Great article, and great visual aids to help us better understand something often used, but often misunderstood – hexvalues and their relationship with RGB. As representations of true-rgb, hexvalues do make our job’s as designer/coders much easier. Thanks!

0
46. 63

### Will

October 9, 2012 12:49 pm

Color me impressed.

0
47. 64

### Troels

October 9, 2012 1:22 pm

Thank for a pleasant and light *no pun intended* read :)

0
48. 65

### Callie Ferman

October 9, 2012 2:07 pm

Wow this was VERY informative – I didn’t even know that I didn’t know this!

The sites http://colorschemedesigner.com/ and http://colllor.com/ seem helpful for quick and dirty color picking, but even so, it’s great to know the theory behind hexadecimal codes so I don’t have to rely on color picking sites or software.

0
49. 66

### Nils

October 14, 2012 8:48 pm

Excellent article. I’ve been using hex codes for 12 years and never really understood anything but black, white and greys. Thanks for the info!

0
50. 67

### Geoffrey

October 16, 2012 4:48 am

Hi,
Excellent article ! Thank you.
Just a little error : you have “#404040 — neutral” instead of “#4F4040 – neutral” in the part “How To Warm Up Or Cool Down A Background”.
Regards,
G.

0
51. 68

### m4rc

November 27, 2012 12:50 pm

awesome article that helped a lot on my studies

thank you from brazil

0
52. 69

July 26, 2013 5:31 am

This helped me get my head around hex and colour. As has been pointed out there is an error in the first bar graph. The results depicted by the graph should be #D03020 and #C0F0D0. It would be great if you can update this.

0
53. 70

### Jabran Rafique

June 24, 2014 10:22 am

Excellent educational article!

0
54. 71

### Nils

June 24, 2014 4:23 pm

Add me to the list of designers/developers who have never bothered to understand how this works, until today. Thanks for taking the time to put this together. Makes sense now!

0
55. 72

### Douglas Fresh

June 24, 2014 6:43 pm

Great Article!! I would like to use some of the images in the is post on a Photoshop tutorial I am working on, should I contact the author or Smashing Magazine? Also I noticed a slight typo:

“each of the hex numbers use letters to represent 10–16. A, B, C, D, E, and F after 0–9”

This should say “represent 10-15” as it is a zero-based numbering system. Counting 10, 11, 12, 13, 14, 15, 16 gives 7 values not 6!

0
56. 73

### Peter

January 12, 2015 7:58 pm

For those that learn through gaming, try http://www.hexinvaders.com/. After a few rounds, you really start to recognize the colors based on their hex codes, which can obviously come in handy!

0
57. 74

### Anthony

April 20, 2015 1:24 pm

And for those of us who are not as computer literate as some, but who are trying very hard to learn how to paint in oils using images found on the computer this has been invaluable. I struggle quite a bit with the basic colour sometimes but this has made things a whole lot easier for me, thank you.

0
58. 75

### Ashley Ross

April 29, 2015 11:10 am

Awesome. This is such an interesting article and I really enjoyed it. I did not have much knowledge about this topic but after reading it I learned alot. Thank you for this fascinating article.

0