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:
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.