Quackit Logo
HTML
CSS
Scripting
Database
Hosting
Design
XML

Print Version

Hex Color Codes

So you're working on a web design project and your colleague has just asked you to "send me the hex color codes". You reply "OK - no problem". You think "What on earth are hex color codes?".

Well, "hex color codes" is another way of saying "hexidecimal color codes". The format is a hash (#) followed by 6 numbers or letters. The position of the numbers/letters correlate to the RGB value. For example, #0000ff translates into Red:000, Green:000, Blue:255.

When coding HTML, you often need to specify what color an element should be. For example, the color of text, the background color of a table cell etc. You can either provide a color name (i.e. blue) or the hexadecimal value (#0000ff). Using hex color codes, you have many more options for different shades of color. Instead of just "blue" you can nominate a specific shade of blue using a hexadecimal value.

For example, here are just a few different shades of blue that you could specify:

 blue
 Hex color code: #0000ff (same as 'blue')
 Hex color code: #000099
 Hex color code: #000066

If you're ever presented with the RGB value of a color, you will be able to determine the hex color code. The easiest way to do this is to use this color code picker. This color picker enables you to view the hex and RGB values of any color. If you have an image editor such as Photoshop, this color picker will be familiar.

Counting in Hexadecimal

Hexadecimal can be a little difficult to understand at first. This is because most of us are used to counting in decimal. When using decimal, we count from 0 to 10, then once we reach 10, we just go from 0 to 10 again but prefix with a 1 (i.e. 10,11,12,13...).

On the other hand, if we were to count using Hexadecimal, we would go from 1 to 16, then start again. Using Hexadecimal, once we go past 10 we add a letter. For example: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

This is why most hexadecimal values include a combination of letters and digits.

Enjoy this website?

  • Share
  • Add this page to your Favorites
  • Link to this page (copy/paste into your own website or blog):
  • Link to Quackit using one of these banner ads.
  • Help support Quackit by making a donation

Oh, and thank you for supporting Quackit!

© Copyright 2000 - 2010 Quackit.com