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


2 Comments »

RSS feed for comments on this post. TrackBack URI

  1. […] Colour Chart […]

    Like

  2. […] Colour Chart […]

    Like


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.
Entries and comments feeds.