Colour Chart
Browser Safe Colour Table
Many years ago, in the days of low colour-depth monitors, I developed this Colour Table for “safe” colours to use in web design. While those limitations are long gone, the basic table is still very useful for finding clean colours, doing quick compatibly checks (same column or row), and visualizing. I still use it today.
The table shows the colours samples with Hex values for the 216 colours common to the PC and Mac. (a full gamut is 256)
Note that the top row of the main table is duplicated within the groups.
| To translate these into Red Green Blue values, simply separate the hex number into pairs. The first pair is R, the second G, the third B. |
| 00 |
= |
00 |
| 33 |
= |
51 |
| 99 |
= |
153 |
| CC |
= |
204 |
| FF |
= |
255 |
|
Then, using the table to the left, you can convert the Hex pairs into the RGB values (0-255). Any colours with values that aren’t on this list are not “Web Safe” |
| 1 |
#000000
|
#333333
|
#666666
|
#999999
|
#CCCCCC
|
#FFFFFF
|
|
| 2 |
#000000 |
#000033 |
#000066 |
#000099 |
#0000CC |
#0000FF |
| 3 |
#330000 |
#330033 |
#330066 |
#330099 |
#3300CC |
#3300FF |
| 4 |
#660000 |
#660033 |
#660066 |
#660099 |
#6600CC |
#6600FF |
| 5 |
#990000 |
#990033 |
#990066 |
#990099 |
#9900CC |
#99OOFF |
| 6 |
#CC0000 |
#CC0033 |
#CC0066 |
#CC0099 |
#CC00CC |
#CC00FF |
| 7 |
#FF0000 |
#FF0033 |
#FF0066 |
#FF0099 |
#FF00CC |
#FF00FF |
| 8 |
#FF3300 |
#FF3333 |
#FF3366 |
#FF3399 |
#FF33CC |
#FF33FF |
| 9 |
#CC3300 |
#CC3333 |
#CC3366 |
#CC3399 |
#CC33CC |
#CC33FF |
| 10 |
#993300 |
#993333 |
#993366 |
#993399 |
#9933CC |
#9933FF |
| 11 |
#663300 |
#663333 |
#663366 |
#663399 |
#6633CC |
#6633FF |
| 12 |
#333300 |
#333333 |
#333366 |
#333399 |
#3333CC |
#3333FF |
| 13 |
#003300 |
#003333 |
#003366 |
#003399 |
#0033CC |
#0033FF |
| 14 |
#006600 |
#006633 |
#006666 |
#006699 |
#0066CC |
#0066FF |
| 15 |
#336600 |
#336633 |
#336666 |
#336699 |
#3366CC |
#3366FF |
| 16 |
#666600 |
#666633 |
#666666 |
#666699 |
#6666CC |
#6666FF |
| 17 |
#996600 |
#996633 |
#996666 |
#996699 |
#9966CC |
#9966FF |
| 18 |
#CC6600 |
#CC6633 |
#CC6666 |
#CC6699 |
#CC66CC |
#CC66FF |
| 19 |
#FF6600 |
#FF6633 |
#FF6666 |
#FF6699 |
#FF66CC |
#FF66FF |
| 20 |
#FF9900 |
#FF9933 |
#FF9966 |
#FF9999 |
#FF99CC |
#FF99FF |
| 21 |
#CC9900 |
#CC9933 |
#CC9966 |
#CC9999 |
#CC99CC |
#CC99FF |
| 22 |
#999900 |
#999933 |
#999966 |
#999999 |
#9999CC |
#9999FF |
| 23 |
#669900 |
#669933 |
#669966 |
#669999 |
#6699CC |
#6699FF |
| 24 |
#339900 |
#339933 |
#339966 |
#339999 |
#3399CC |
#3399FF |
| 25 |
#009900 |
#009933 |
#009966 |
#009999 |
#0099CC |
#0099FF |
| 26 |
#00CC00 |
#00CC33 |
#00CC66 |
#00CC99 |
#00CCCC |
#00CCFF |
| 27 |
#33CC00 |
#33CC33 |
#33CC66 |
#33CC99 |
#33CCCC |
#33CCFF |
| 28 |
#66CC00 |
#66CC33 |
#66CC66 |
#66CC99 |
#66CCCC |
#66CCFF |
| 29 |
#99CC00 |
#99CC33 |
#99CC66 |
#99CC99 |
#99CCCC |
#99CCFF |
| 30 |
#CCCC00 |
#CCCC33 |
#CCCC66 |
#CCCC99 |
#CCCCCC |
#CCCCFF |
| 31 |
#FFCC00 |
#FFCC33 |
#FFCC66 |
#FFCC99 |
#FFCCCC |
#FFCCFF |
| 32 |
#FFFF00 |
#FFFF33 |
#FFFF66 |
#FFFF99 |
#FFFFCC |
#FFFFFF |
| 33 |
#CCFF00 |
#CCFF33 |
#CCFF66 |
#CCFF99 |
#CCFFCC |
#CCFFFF |
| 34 |
#99FF00 |
#99FF33 |
#99FF66 |
#99FF99 |
#99FFCC |
#99FFFF |
| 35 |
#66FF00 |
#66FF33 |
#66FF66 |
#66FF99 |
#66FFCC |
#66FFFF |
| 36 |
#33FF00 |
#33FF33 |
#33FF66 |
#33FF99 |
#33FFCC |
#33FFFF |
| 37 |
#00FF00 |
#00FF33 |
#00FF66 |
#00FF99 |
#00FFCC |
#00FFFF |
|
Here’s a couple of other ways of organizing the chart:
VisiBone chart – click a colour to see values + compatible colours
The Adobe Kuler site lets you explore colour in several ways.
The W3 Colour Picker starts with the 216 colours, then offers shades + and -.
On the left, you’ll also see links to Color Names (other charts I once had) and a Color Mixer.
And lots of other design charts.
David
For Now 
[…] Colour Chart […]
LikeLike
Pingback by New Old Pages | For Now— January 12, 2014 #
[…] Colour Chart […]
LikeLike
Pingback by WordPress Migration: Moving your Blog from Free to Hosted, Part 1 | For Now— January 22, 2014 #