In web development, it is nice to know what is a web safe color. With different operating systems and internet browsers. There are 216 colors that are considered safe colors to use in your site's design.
These colors are visible on all the different operating systems. By picking one of these colors for your site. You won’t have to worry about your visitor not seeing the correct color palette of your design.
These Are Not The Only Colors
These colors are not written in stone. There is nothing that says you have to use these colors. There are 16,777,216 colors visible on a standard computer monitor.
The web safe colors are almost guaranteed to be in all operating systems. This gives you the best chance when your page is rendered in your internet browser.
If you are worried about a color that you have that is not on the chart. You can always safely use it as a background image with the repeat property.
What is a Hex Code?
You will notice that a lot of colors are assigned by numbers. These are hex triplet, which is a six digit number. The numbers are represented from zero to F. Which is confusing as 0 is the lowest and F is the highest.
The numeric order would look like this:
0 - 1 - 2 - 3 - 4 - 5 - 6 -7 - 8 - 9 - A - B - C -D -E -F
Each group of two digits will represent how much of red, green, and blue. The first two digits is red, second two green, and the last two is blue.
For example:
#FF0000 is red, because there is max of red, with no green or blue.
#FFFFFF this will result in white as all values are maxed out.
#000000 would result in black as all values are zero.
Are Web Safe Colors Still Relevant?
As it is important to know what colors you are working with, using web safe colors are becoming less or a concern when design your page. As of the time of this writing most devices, mobile and desktop, now use a 24 bit colored monitor, which is more than enough to produce any color combination.
216 HTML Color Chart
#FFFFFF | #FFCCFF | #FF99FF | #FF66FF | #FF33FF | #FF00FF |
#FFFFCC | #FFCCCC | #FF99CC | #FF66CC | #FF33CC | #FF00CC |
#FFFF99 | #FFCC99 | #FF9999 | #FF6699 | #FF3399 | #FF0099 |
#FFFF66 | #FFCC66 | #FF9966 | #FF6666 | #FF3366 | #FF0066 |
#FFFF33 | #FFCC33 | #FF9933 | #FF6633 | #FF3333 | #FF0033 |
#FFFF00 | #FFCC00 | #FF9900 | #FF6600 | #FF3300 | #FF0000 |
#CCFFFF | #CCCCFF | #CC99FF | #CC66FF | #CC33FF | #CC00FF |
#CCFFCC | #CCCCCC | #CC99CC | #CC66CC | #CC33CC | #CC00CC |
#CCFF99 | #CCCC99 | #CC9999 | #CC6699 | #CC3399 | #CC0099 |
#CCFF66 | #CCCC66 | #CC9966 | #CC6666 | #CC3366 | #CC0066 |
#CCFF33 | #CCCC33 | #CC9933 | #CC6633 | #CC3333 | #CC0033 |
#CCFF00 | #CCCC00 | #CC9900 | #CC6600 | #CC3300 | #CC0000 |
#99FFFF | #99CCFF | #9999FF | #9966FF | #9933FF | #9900FF |
#99FFCC | #99CCCC | #9999CC | #9966CC | #9933CC | #9900CC |
#99FF99 | #99CC99 | #999999 | #996699 | #993399 | #990099 |
#99FF66 | #99CC66 | #999966 | #996666 | #993366 | #990066 |
#99FF33 | #99CC33 | #999933 | #996633 | #993333 | #990033 |
#99FF00 | #99CC00 | #999900 | #996600 | #993300 | #990000 |
#66FFFF | #66CCFF | #6699FF | #6666FF | #6633FF | #6600FF |
#66FFCC | #66CCCC | #6699CC | #6666CC | #6633CC | #6600CC |
#66FF99 | #66CC99 | #669999 | #666699 | #663399 | #660099 |
#66FF66 | #66CC66 | #669966 | #666666 | #663366 | #660066 |
#66FF33 | #66CC33 | #669933 | #666633 | #663333 | #660033 |
#66FF00 | #66CC00 | #669900 | #666600 | #663300 | #660000 |
#33FFFF | #33CCFF | #3399FF | #3366FF | #3333FF | #3300FF |
#33FFCC | #33CCCC | #3399CC | #3366CC | #3333CC | #3300CC |
#33FF99 | #33CC99 | #339999 | #336699 | #333399 | #330099 |
#33FF66 | #33CC66 | #339966 | #336666 | #333366 | #330066 |
#33FF33 | #33CC33 | #339933 | #336633 | #333333 | #330033 |
#33FF00 | #33CC00 | #339900 | #336600 | #333300 | #330000 |
#00FFFF | #00CCFF | #0099FF | #0066FF | #0033FF | #0000FF |
#00FFCC | #00CCCC | #0099CC | #0066CC | #0033CC | #0000CC |
#00FF99 | #00CC99 | #009999 | #006699 | #003399 | #000099 |
#00FF66 | #00CC66 | #009966 | #006666 | #003366 | #000066 |
#00FF33 | #00CC33 | #009933 | #006633 | #003333 | #000033 |
#00FF00 | #00CC00 | #009900 | #006600 | #003300 | #000000 |
If you are looking for a great tool to find color inspriation, check out Adobe's Color tool.
What Do You Think?