Erin Sowards, Graphic and Web Design

Articles


Recent Articles

Hexadecimal Color Codes

February 4, 2010

Hexadecimal simply refers to a system of numerical notation that uses 16 rather than 10 as its base.

For example:

  1. p {
  2. color: #000000; /* Black */
  3. }
  4. p {
  5. color: #ffffff; /* White */
  6. }
  7. p {
  8. color: #336600; /* Green */
  9. }

The first two digits represent how much red to use, the second two are for green, and the last two are for blue. Since RGB is additive, or all colors added together make white, I think of 0 as being the least amount of light being added. So, #000000 is black, #ffffff is white.

The hexadecimal system counts as 0 1 2 3 4 5 6 7 8 9 a b c d e f with 0 being the least amount of light, and F being the most amount of light.

0 1 2 3 4 5 6 7 8 9 a b c d e f
                               

Web safe colors

Web safe colors aren’t really necessary anymore, since everyone has great monitors, but they are easier to type and remember.

Rollover a color to get a tool tip of the hexadecimal color code.

                                   
                                   
                                   
                                   
                                   
                                   
     
                                   
                                   
                                   
                                   
                                   
                                   

Color Shortcut

If the color is Web safe, I like to shorten each pair to three digits instead of six:

  1. p {
  2. color: #000; /* Black */
  3. }
  4. p {
  5. color: #fff; /* White */
  6. }
  7. p {
  8. color: #360; /* Green */
  9. }

Designing since 2001. Lovingly made with HTML5, a dab of CSS3, and unobtrusive Javascript. Validate