
DEV-101: HTML Color and the Hexadecimal Chart
In this section we'll deal with the addition of color to your pages. The web works with a color palette known as "Browser Safe" - That means the 216 colors that are supported by both Netscape Navigator and Internet Explorer and are available on all computer systems.
The 216 Color Chart - Hexadecimals Explained: The 216 Browser Safe colors are coded into HTML in Hexadecimal value. This means that the colors are broken down into hex (six) units. Hexadecimals are derived from a code base that assigns RGB (Red Green Blue) values (from 0 to 255) to a hex unit (i.e. FF = 255R or 100% Red). A typical hex code looks like this: The "hex" comes from the six digits or characters after the # sign. Rather than memorizing the complete code base for this system, we'll provide a color palette here for you to utilize and download. Also, we'll provide the RGB to HEX conversion method for those of you who are interested.
The Conversion Chart and the WebSafe Color Chart
FFFFFF | FFFFCC | FFFF99 | FFFF66 | FFFF33 |
FFFF00 | CCFFFF | CCFFCC | CCFF99 | CCFF66 |
CCFF33 | CCFF00 | 99FFFF | 99FFCC | 99FF99 |
66FFFF | 99FF66 | 99FF33 | 66FFCC | FFCCFF |
99FF00 | 33FFFF | FFCCCC | 33FFCC | 00FFFF |
66FF99 | FFCC99 | 66FF66 | 66FF33 | 00FFCC |
66FF00 | 33FF99 | FFCC66 | FFCC33 | CCCCFF |
33FF66 | 33FF33 | 00FF99 | FFCC00 | 33FF00 |
00FF66 | 00FF33 | 00FF00 | CCCCCC | CCCC99 |
99CCFF | CCCC66 | CCCC00 | CCCC33 | 99CCCC |
FF99FF | 99CC99 | 66CCFF | FF99CC | 99CC66 |
66CCCC | 99CC33 | 00CCFF | 33CCFF | 99CC00 |
FF9999 | 66CC99 | FF9966 | 66CC66 | 33CCCC |
CC99FF | 00CCCC | FF9933 | FF9900 | 66CC33 |
66CC00 | 33CC99 | 00CC99 | CC99CC | 33CC66 |
00CC66 | CC9999 | FF66FF | 33CC33 | 33CC00 |
CC9966 | 00CC33 | 9999FF | 00CC00 | CC9933 |
CC9900 | FF66CC | 9999CC | FF6699 | 999999 |
6699FF | FF6666 | CC66FF | 999966 | 6699CC |
999933 | FF6633 | FF6600 | FF33FF | 3399FF |
999900 | 669999 | CC66CC | 0099FF | FF33CC |
3399CC | CC6699 | 669966 | FF00FF | 339999 |
669933 | 669900 | FF3399 | 0099CC | 9966FF |
CC6666 | 009999 | CC6633 | CC6600 | 339966 |
FF00CC | FF3366 | 009966 | CC33FF | FF3333 |
339933 | 009933 | 9966CC | FF3300 | FF0099 |
339900 | 009900 | 6666FF | CC33CC | FF0066 |
996699 | FF0033 | FF0000 | CC00FF | CC3399 |
996666 | 6666CC | 996633 | 996600 | 3366FF |
CC3366 | CC00CC | 9933FF | 0066FF | 666699 |
CC3333 | CC3300 | 3366CC | CC0099 | 9933CC |
666666 | 666633 | 0066CC | 9900FF | 666600 |
CC0066 | 336699 | 993399 | CC0033 | 6633FF |
336666 | 006699 | CC0000 | 993366 | 9900CC |
336633 | 006666 | 336600 | 6633CC | 3333FF |
006633 | 993333 | 993300 | 6600FF | 990099 |
006600 | 0033FF | 663399 | 009966 | 3333CC |
663366 | 6600CC | 990033 | 0033CC | 990000 |
3300FF | 663333 | 663300 | 660099 | 0000FF |
333399 | 3300CC | 003399 | 333300 | 660066 |
333333 | 003366 | 0000CC | 660033 | 333300 |
660000 | 330099 | 003333 | 003300 | 000099 |
330066 | 330033 | 000066 | 330000 | 000033 |
000000 |
HEX
|
RGB
|
FF
|
255
|
CC
|
204
|
33
|
153
|
66
|
102
|
99
|
53
|
00
|
0
|
This concludes our Personal Website Tutorial Section for now, watch this section in the future for information on FTP methods, more HTML tips and a library of graphics and animated icons you can add to your personal website. If you have any suggestions as to topics to discuss in the future, or if there are any areas you feel need more explanation, please click here to fill out the comment form!
Happy Coding from the Citynet Development Team!