Web Safe Color Code Chart

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

Web Safe 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?

HTML Hex Codes

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.

Share

Rating: 
5 (3 votes)

What Do You Think?

Copyright © 2017 www.webhostdesignpost.com