If you’ve ever customized the design of your blog, social network profile or a widget, you’ve probably encountered HTML Hexadecimal color codes.
Here is a simple guide to help you recognize web colors more quickly from their RGB codes.
In a typical web representation #RRGGBB, the first 2 digits denote red, the second 2 digital are for green and while the last 2 digit represent the blue shade.
Each number denotes the strength of that particular color – FF0000 is only red (no green, no blue), 00FF00 only green (no red, no blue). If all colors are present in equal strength FFFFFF, you get white, if no color is present 000000, black.
If you want to "darken" a color, you need to move the color towards black 000000. That means 880000 is darker than BB0000 that is darker than FF0000.
Similarly, if you want to "lighten" a color, move towards white FFFFFF. So, FF8888 is lighter than FF4444 that is lighter than FF0000
Color combinations are dictated by the "strongest" color. So BB8844 is a reddish shade, 33CC00 would be a little green, and 777777 gray (since it has no strongest color).
If you’re uncomfortable with *Hexadecimal arithmetic, you could use the standard Windows calculator in scientific mode to perform such calculations.
*Hexadecimal numbers use 16 unique symbols (0-F) as opposed to the Decimal number system’s 10 (0-9), and to make up for the extra 6 characters, the English alphabets A-F are used.
Resources: Douglas R. Jacobson, Color Mixer, RGB Color Model
Find this article at: http://www.labnol.org/internet/design/think-web-colors-in-hexadecimal-numbers/5456/
Tags: 101, basic, color schemes, colors, feature, hexadecimal, Web Design
Reader Comments
I am wondering, why should drop a post about HTML color codes, when there are hundreds of thousands of tutorials available online.
Written by Manivannan Palanichamy on 11.18.08
Now that you mention it, it appears so simple, yet didn’t realize till now! Thanks.
Written by Ashish on 11.18.08
Very nice! Short and concise. Especially the part about the strongest colour; that cleared up stuff for me :)
Written by no.good.at.coding on 11.18.08
Thanks Amit for simplifying it. I didn’t know about the #RRGGBB …
Written by Subi on 11.18.08
I’ve been programming for more years than I like to think about (I used to program in 6502 assembler by writing hex (!) data statements and using a CBM Basic program to “poke” the code into memory on a Commodore Vic-20 :-) but I never, until now, made the (obvious really!) connection between the hex colour code and the actual colour :-)
Thank you, Amit, for another extremely useful post! (And to Manivanna I say that it’s probably true there are many hundreds of online tutorials, but unless someone is actually *looking* for a tutorial, they may not even realise that they didn’t know about this trick :-)
For me the greatest value of this blog is that it introduces me to things that I didn’t know I didn’t know (!), thus awakening my curiosity enough to go dig out more information.
Just me €0.02 :-)
Written by John C on 11.19.08
Thanks! Very very interesting and simple.
Written by Pecciola on 11.19.08
Marvelous explanation, especially the chart clearing up the letters of the hexadecimal code. One suggestion: how about adding an “experiment” box, where we can input combos to see how they will come out? That would be fantastic! Thanks!
Written by Star Meyer on 01.29.09