Colorized: Understanding Hex Color Values

By The Small Lady  

Whether you are going for a bright iridescent look or something darker and more dramatic; whether it's a complex detailed appearance or something clean and simple, you're going to be using color in some way. Indicating colors in HTML is done in two ways. The first way is indicating the color by name:

<font color="black">
<bgcolor="red">

...that is a very simple way to do it. The downside is that in the world of colors, to use the names would be the equivalent of holding a 16-pack of crayons. When you say "Red", you would be getting what the computer deems to be red. It may not be the exact shade of red you want, but you can't fault the computer; it's just following the order you gave it.

I'm sure you want a bigger box of crayons to play it. How about a box of 16,777,216 crayons?

You will probably not need that many colors, but my point is that there are endless colors you can create very easily using hex color values. They may seem intimidating to work with at first, but once you understand how hex color values work, it's not as hard as you think.

The first thing you need to understand is how counting works in a hex system. The digits don't run from 0-9, they run from 0 to F. Translation: count from 0 to 9 normally, then it would be A, B, C, D, E, F. Then 10, 11, 12, etc...after you reach 19, the next number would be 1A. Then 1B, 1C, etc...

Knowing how to count in hex will help you understand hex color values a lot better.

Now to explain the hex color values itself. First, there is a number sign (#), then there are six digits. For example:

#FFFFFF
#007FC0
#800080

The first two digits (I believe many people also call them triplets) indicate the level of Red in the color, the second two indicate the level of Green, and the third indicate the level of Blue in the color. To create a color, you adjust the amount of Red, Green and Blue. Let me add some spaces in the values (and throw in some color swatches) to better show you what I mean.

#  99    33   CD
     R     G     B

This a nice shade of violet. Starting from here, let's remove some Blue.

#  99    33   34
     R     G     B

Now it's more of a burgundy. Now, add some Green:

#  99    A1  34
     R     G     B

And we have olive. Lastly, take out some Red:

#  64    A1  34
     R     G     B

See! Violet to moss green in three easy steps! You can make almost limitless colors just by tweaking each set of numbers to get things exactly as you like them! But I am sure that you have a lot to do and don't want to figure every color you will be using by tweaking and tweaking, so let me give you some basics and tell you where to go to make your color life easier.

#000000 is the lowest value you can have (pure black) and #FFFFFF is the highest (pure white). But don't make the mistake of thinking that the colors go in a strict order from dark to light. For example, #0000FF is pure blue, but #000100 (the next number if we were counting in hex) is black with a practically invisible hint of green.

Making the triplets all the same value results in various shades of grey (with the extremes being black and white). Set the value of one triplet (say, the Red one) to whatever you like, then make the other two triplets identical: as you adjust the value of the identical triplets, you can lighten or darken the shade of the first triplet. That must have sounded confusing. It's really not.

For example, this is a middle shade of red:

#  FF   88   88
     R     G     B

If we raise the values of Green and Blue, it's like we added white to the picture. Try this one:

#  FF   CC   CC
     R     G     B

To make it darker:

#  FF   22   22
     R     G     B

Got it? That is basic lightening and darkening.

Last tip: Neutral colors are colors without any other undertones (excluding black and white). For example, those Reds we used in the example above are all neutral. To make a color warmer (have a reddish undertone) increase the value of the Red triplet slightly...not a lot or otherwise you'll drastically change your color. If you want to make a color cooler (have a blue undertone), adjust the Blue triplet. And to add an olive tinge to your color...yes, increase the Green one.

Now, to make your life easier, there are two websites you can go to help come up with the perfect color. All you do is plug in the hex value of the color you want and you will automatically be able to preview how it looks as a background, text, active link or visited link. These two sites are excellent places to see exactly how a #52B34A font will look on a #A4114F background:

Webmonkey: Color Codes

Happy coloring!

Endnote: how did I come up with 16,777,216? There are 6 digits in a color values, and 16 possible values for each digit (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). So it would be 16x16x16x16x16x16 possible combinations, or 16,777,216. So when you set you computer to display millions of colors, you know exactly how many (at least!) it can come up with.

© The Small Lady - this article is stored here with their permission