Hexadecimal color is the color mode used on the Web. It’s a very efficient method, using only six digits to identify a single color out of the 16.8 million available on modern computer monitors. This guide will help you understand what “hexadecimal” means, and how to predict what particular color a given six-digit figure (like #7700ff) might create (like violet).

 

Click on the image below to view a much larger version.

 

The color wheel above shows three primary colors (red, green and blue) and three secondary colors (yellow, cyan and magenta). This color scheme is just like in the RGB Color Wheel, but the colors here are identified with a different code – hexadecimal. The hexadecimal code always starts with a pound (#) sign in HTML and CSS coding. You will also find a field for hexadecimal values in the Color Pickers for Photoshop and Illustrator.

 

The Rules of Hexadecimal Color

There are three important things to remember about hexadecimal color:

1. In decimal (“base ten”) counting, each digit can be any number from 0 to 9, or ten possibilities. That’s how we normally count, of course. In hexadecimal (“base sixteen”) counting, each digit can be any number from 0 to 9 -OR- any letter from A to F. That gives us sixteen possibilities. You would count in this order, from lowest to highest: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
   
   

   Base Ten vs. Base Sixteen

2. In decimal counting, two digits side-by-side can give you 100 possibilities (0 to 99). That’s ten for the first digit times ten for the second digit. In hexadecimal, you get 16 times 16, which gives you 256 possibilities. That’s convenient, since there are 256 possible values for red in RGB, 256 for green, and 256 for blue.
   
   

   Double-Digit Hexadecimal

3. The first two digits in hexadecimal tell you the red values. The second pair tell you the green values, and the last pair tell you the blue values. 256 for Red x 256 for Green x 256 for Blue equals just under 16.8 million.
   
   

   Combining Red, Green and Blue

 

High-Saturation Hues

The higher the number in the first pair of a hexadecimal number, the more that red is contributing to the color. Ditto for green in the second pair, and blue in the third pair. Alternatively, a lower number means a color is contributing less.

#ff0000 pure red	#ffff00 yellow: pure red plus pure green	#00ff00 pure green	#00ffff cyan: pure green plus pure blue	#0000ff pure blue	#ff00ff magenta: pure blue plus pure red

 

Shades of White

Pure white is indicated by the highest hexadecimal value there is: #ffffff. The background behind this text is #ffffff. You can get softer whites by decreasing the values of red, green, and especially blue.

#eeffff	#efffff	#ffefff	#ffeeff	#ffffef	#ffffee	#ffffde	#ffffdd

Notice that if you reduce just the red values, the color gets more cyan. If you reduce just the green values, the color gets more magenta. And if you reduce just the blue values, the color gets more yellow.

 

Shades of Black and Gray

Pure black is indicated by the lowest hexadecimal value there is: #000000. This text is #000000. You can get softer blacks and grays by increasing the values of red, green, and blue.

#440000	#004400	#000044	#444444	#999999	#cccccc

Notice that if you increase just the red values, the color gets more red. If you increase just the green values, the color gets more green. And if you increase just the blue values, the color gets more blue. Adding equal amounts of red, green and blue results in a gray; the higher the number, the lighter the gray.

 

Muted Colors

Muted colors are less saturated (vivid) and more natural. You get these in hexadecimal by adding a touch of two other two primaries to your main primary color, and reducing the value for that main primary.

#ff0000 red	#ffff00 yellow	#00ff00 green	#00ffff cyan	#0000ff blue	#ff00ff magenta
#cc3333 muted red	#cccc33 muted yellow	#99cc99 muted green	#339999 muted cyan	#6666cc muted blue	#993399 muted magenta

Notice that if you increase just the red values, the color gets more red. If you increase just the green values, the color gets more green. And if you increase just the blue values, the color gets more blue. Adding equal amounts of red, green and blue results in a gray; the higher the number, the lighter the gray.

 

Shades of Brown

Browns tend to be versions of muted orange. Try mixing middle values of red and green and leaving blue as 00.

#996600	#663300	#683500

 

 

 

Share this Article

You can share this article almost anywhere but on your car's back bumper.
Hover over this bar to access the menu.

 

Related Posts

• The RGB Color Wheel
• The CMYK Color Wheel
• Mix Colors in Photoshop as if they were Paint
• Quickie Color Wheel in Photoshop
• The Dreamweaver CS4 Workspace

Comments

3 Comments

• 

  By Mario Labelle, 04/07/2010 @ 7:47 am

  Hi there,

  In your RGB color wheel, the “halfway” color values should be “7f” and not “77″. You are probably thinking Octal and not Hexadecimal.

  Cheers,

  Mario
• 

  By Naali, 07/01/2011 @ 4:40 pm

  I think you have the tertiary colours labeled incorrectly.

  Assuming Wikipedia has the correct information see http://en.wikipedia.org/wiki/Tertiary_color

 

Links to this Post

1. Colour wheel « ratheskin — 04/17/2012 @ 10:18 am

RSS feed for comments on this post. | TrackBack URI

 

I’d love to hear from you!

*Name

*Email (not published)

Website