Free HTML Tutorial - Learn HTML

 

Understanding Hex / Color Values

Hex values are used for generating colors other than the standard reds, blues, greens, yellows, purples, etc.  As you learned above, to specify a purple font you just use the tag <font color="purple">.  

But HTML doesn't understand colors like "sky blue" or "pea green" so if you want these kinds of colors, you need to specify a hex color value.

Understanding hex values is easy if you can grasp the basics. Just remember that the individual colors you will mix are always red, green, and blue and always in that order.

So with the 6-character hex code the first two characters represent the amount of red, the second two characters represent the amount of green, and the last two represent the amount of blue. Take a look at the chart below for the percentage breakdown.

So the hex color of ff3333 means 100% of red (ff), 20% of green (33) and 20% of blue (33)

So you'd use <font color="#ff3333"> to specify this color on your page.

If you wanted all white then the hex color would be ffffff.

If you wanted a color that was mostly blue with a hint of red and green you could use the hex code of 3333ff (20% of red, 20% of green and 100% of blue).

Now if this is too confusing, or you simply do not care to learn how to mix colors, you can always use a hex color code chart to produce the colors you need.

The hex color code chart below will give you the HTML code you need for your desired colors...

1. Drag the bar on the "Hue" selector to generate the desired base color. 

2. Next double click inside the Brightness/Saturation grid to activate the cursor.  Drag it until the desired brightness is achieved. 

The "Swatch" bar shows you the final color result.

3. The Hex Color Code is generated at the bottom of the grid.  Simply copy and paste the code into your page.