Categories
design education technology

The Hexadecimal Color Wheel

Hexadecimal Color Wheel
Hexadecimal Color Wheel
photoshop-dreamweaver-cs4Hexadecimal 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.

Hexadecimal Color Wheel
Hexadecimal Color Wheel

 

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.

Color Picker
Color Picker

 

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

 

Done

2 replies on “The Hexadecimal Color Wheel”

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.