Categorized | General

How to Read Hex Color Codes

Posted on 29 March 2006

This is an old tip but (I think) it’s a good one….

I had been building websites for years and this one wasn’t obvious until somebody explained to me what was actually going on. But, hex codes that identify colors for HTML and CSS are pretty simple actually. First of all, what’s a color hex code? It’s a numeric representation of the color you want to define. It looks like this #CF00A3. That’s a number? sure it is…

  • Hex numbers use a counting convention that is called Base 16.
  • The hex numbers used for the color coding are made up of 2 characters.
  • With 2 characters in hex you can count from 0 to 255. You start at 00 and go to FF.
  • The counting goes like this:
    00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, etc, etc, until you get to FF

    For our color codes this is what’s happening:

    00 = no color
    FF = the maximum amount of color

    The hex codes for browser colors are (usually) 6 characters long and they are split into 3 pairs of numbers. Browsers display colors as a mix of Red, Green, and Blue. The first two characters represent red, the second two represent green, and the last two represent blue. The higher the number, the greater amount of color there is.

    Since, in this scenario, black is the absence of any color, black’s hex code is #000000. There is no red, green, or blue in the color black.

    Also, since white is the combination of all colors, white’s hex code is #FFFFFF. White is therefore the combination of the maximum values for red, green, and blue.

    Also,
    Red = #FF0000
    Green = #00FF00
    Blue = #0000FF

    So now, if you have a color like #CC3300 and you need to crank up the red in it, just adjust the first two characters. Change CC to EE and see what happens…

    1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5 out of 5)
    Loading ... Loading ...

    This post was authored by:

    Ted Hall - who has written 2 posts on Tech Pedia.


    Contact the author

    3 Comments For This Post

    1. abs says:

      I had never thought about the reasoning behind it.. Makes so much sense…

    2. ryanB says:

      You also may wish to add the define only three value trick…
      Green= #F00
      Blue= #0F0
      Red= #00F

    3. KnifeySpooney says:

      Thanks, that is similar to what I had figured the counting was for it.

    Leave a Reply

    Site Sponsors

    • programming freak: And by the way thanks for those useful codes, i am surprised a site like this has C codes? and...
    • programming freak: Keep posting some codes man, i would be glad to find some c/c++/java/html/unix codes, sql queries...
    • programming freak: Hey thanks, good one!
    • Nathaniel Baker: its all good information.. but you forgot one very very important thing…. FAT32 can not...
    • om: Yeah sure it is.. :)

    Older Posts

    Ads

    • Advertise Here

    Topics