Colors on the Web

We are frequently asked about colors during presentations on website design. Colors on the web are composed of red, green and blue, where each shade can range in value from 0 to 255, where zero would indicate no red, and 255 would be 100% red.  The only confusing part is that these aren’t numbered 0 to 255, but 00 to FF. This numbering system is called hexadecimal, and is efficient for computers.

Sample Web Color Swatches in Hexadecimal

Swatch Hexadecimal (#RGB) Decimal (R, G, B) Percentage (R, G, B) Color
  #000000 0, 0, 0 0%, 0%, 0% Black
#808080 128, 128, 128 50%, 50%, 50% Medium Gray
#ffffff 255, 255, 255 100%, 100%, 100% White
#ff0000 255, 0, 0 100%, 0%, 0% Pure Red
#00ff00 0, 255, 0 0%, 100%, 0% Pure Green
#0000ff 0, 0, 255 0%, 0%, 100% Pure Blue
#00ffff 0, 255, 255 0%, 100%, 100% Pure Cyan
#ff00ff 255, 0, 255 100%, 0%, 100% Pure Purple
#ffff00 255, 255,0 100%, 100%, 0% Pure Yellow
#ffff00 255, 128,0 100%, 50%, 0% Pure Orange

Counting in Hexadecimal

Counting in hexadecimal is pretty easy. Count 0 to 9 as you would normally. Instead of counting ten, you would count “A”, eleven is “B”, and so on to fifteen, which is “F”. Once you reach “F” you roll over to 10, which in decimal is 16. Which is why we prefix hexadecimal numbers with 0x, so we don’t get confused. So 0x10 is hexadecimal for 16. And, 0xFF is hexadecimal for 255.

The table below counts 0 to 19 in hexadecimal:

DecimalHexadecimal
00x00
10x01
20x02
30x03
40x04
50x05
60x06
70x07
80x08
90x09
DecimalHexadecimal
100x0a
110x0b
120x0c
130x0d
140x0e
150x0f
160x10
170x11
180x12
190x13

Frequently asked questions about colors on the web:

Q: Should I use upper or lower case?
You can use upper or lower case, but if you want to be cool, use lower case. It’s old school, and goes back to the days of the C programming language.

Q: Why do they use hexadecimal?
Remember the old adage, computers count in zeroes and ones? It’s true, and it’s called binary (versus decimal or hexadecimal), but to make it easier we use hexadecimal. So 0 to 15 in decimal ranges from 0x00 to 0xFF in hexadecimal, which ranges from 0000 to 1111 in binary.

Q: What is CMYK?
CMYK is for Cyan-Magenta-Yellow-Key (black), and is frequently used in printing.

Q: What image types use web colors?
JPegs and PNG (pronouced Ping) files, although PNG files add another variable for transparency.

Useful Links

w3schools.com HTML Color Picker (Great resource)
Adobe Color Wheel

By |April 26th, 2016|

About the Author: