What are web safe “hex” colors? (Plus an HTML color chart!)

Chart of web safe hex colorsAs a beginner at website design, I remember the first time I encountered phrases like “web safe colors”, “HTML colors” and “hex colors.” Obviously the last term, “hex colors”, has nothing to do with using colors to bring ill-fortune to those so-called friends who wronged me in the past. But as a newbie to website design, how was I to know the truth? ;)

In this post, I’ll clear up exactly what web safe and HTML colors are and what exactly are “hex colors” (a.k.a. hexadecimal colors).

So put down your voodoo dolls and let’s get into it!

What are web safe html colors?

Back in the day when not everyone had monitors that could display millions of colors, a consensus was made as to which colors should be supported in browsers. In total, they came to 216 colors. By using these colors (called web safe colors) designers could be sure that there websites would look the same on all computers, all browsers, and all operating systems.

Nowadays, there really isn’t much of a need for web safe colors, but it still doesn’t hurt to use them for background color and text color. Although, you will need to understand the hex (hexadecimal) numbering system when you create your CSS file since CSS uses hexadecimal numbers for color.

What are hex (hexadecimal) numbers?

First, let me relieve your boggled mind by saying that you really don’t need to know how to count in hex (hexadecimal) in order to get different colors on your web pages. There are many ways to get the code (more on that in a bit.) But for the inquisitive mind, here is the answer to the above question:

Hexadecimal numbers are made from 10 digits (0 1 2 3 4 5 6 7 8 9) and these six letters: A B C D E F. They are combined together to make a 6-digit code that represents a color. (Hence the name “hex” or “hexadecimal”… which means “6″.) Here are some examples:

#000000 (black color)
#FF0000 (red)
#00FF00 (green)
#0000FF (blue)
#FFFFFF (white)

Getting those nasty-looking hex color codes

If you use Photoshop, then you can find the hex color codes by looking on the lower right-hand corner of the color picker window (NOTE: your color picker in Photoshop may look different depending on your settings):

photoshop-hex



If you’d like to lock Photoshop into using only the web safe html colors, then check the box in the lower left-hand corner. Like this:

photoshop-web


If you don’t have Photoshop (or don’t need to use it when you’re just hand-coding a website) then there are many free software programs for both Mac and Windows that you can download from the Internet.

Web safe html color chart

No post on web safe colors would be complete without a chart of HTML color codes. So, here it is:


Hex Code Color
#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF66CC
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3399
#FF3333
#FF3300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000
Hex Code Color
#66FFFF
#66FFCC
#66FF99
#66FF66
#66FF33
#66FF00
#66CCFF
#66CCCC
#66CC99
#66CC66
#66CC33
#66CC00
#6699FF
#6699CC
#669999
#669966
#669933
#669900
#6666FF
#6666CC
#666699
#666666
#666633
#666600
#6633FF
#6633CC
#663399
#663366
#663333
#663300
#6600FF
#6600CC
#660099
#660066
#660033
#660000
Hex Code Color
#CCFFFF
#CCFFCC
#CCFF99
#CCFF66
#CCFF33
#CCFF00
#CCCCFF
#CCCCCC
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#CC99FF
#CC99CC
#CC9999
#CC9966
#CC9933
#CC9900
#CC66FF
#CC66CC
#CC6699
#CC6666
#CC6633
#CC6600
#CC33FF
#CC33CC
#CC3399
#CC3366
#CC3333
#CC3300
#CC00FF
#CC00CC
#CC0099
#CC0066
#CC0033
#CC0000
Hex Code Color
#33FFFF
#33FFCC
#33FF99
#33FF66
#33FF33
#33FF00
#33CCFF
#33CCCC
#33CC99
#33CC66
#33CC33
#33CC00
#3399FF
#3399CC
#339999
#339966
#339933
#339900
#3366FF
#3366CC
#336699
#336666
#336633
#336600
#3333FF
#3333CC
#333399
#333366
#333333
#333300
#3300FF
#3300CC
#330099
#330066
#330033
#330000
Hex Code Color
#99FFFF
#99FFCC
#99FF99
#99FF66
#99FF33
#99FF00
#99CCFF
#99CCCC
#99CC99
#99CC66
#99CC33
#99CC00
#9999FF
#9999CC
#999999
#999966
#999933
#999900
#9966FF
#9966CC
#996699
#996666
#996633
#996600
#9933FF
#9933CC
#993399
#993366
#993333
#993300
#9900FF
#9900CC
#990099
#990066
#990033
#990000
Hex Code Color
#00FFFF
#00FFCC
#00FF99
#00FF66
#00FF33
#00FF00
#00CCFF
#00CCCC
#00CC99
#00CC66
#00CC33
#00CC00
#0099FF
#0099CC
#009999
#009966
#009933
#009900
#0066FF
#0066CC
#006699
#006666
#006633
#006600
#0033FF
#0033CC
#003399
#003366
#003333
#003300
#0000FF
#0000CC
#000099
#000066
#000033
#000000

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



4 Responses:

  1. Amber

    Thanks for clearing that up. I really like the fact that I don’t have to remember the hex color codes. Also, that I don’t have to stick to using only the web safe HTML colors!

    PS: Love the blog!

  2. bravochild

    Thanks for the info, just starting to build my first website. Nice to have a hand to hold when
    first walking the road of jagged pixels.
    Chart is very useful :0)
    On the definition though – I think the reason it’s called hexadecimal is that it is a number system having a base of 16; hex=6 decimal=10. Just thought you might be interested…

  3. X

    Thanks. This is really clear. It’s nice that somebody took the time to do this.

  4. Fluxx

    Hi,

    Very good post for beginners. Bravochild is correct. Just as binary code (which computers read) is based on the number 2 (hence binary), hexadecimal code is based on the number 16. Because each digit in hexadecimal has 16 different options, as opposed to two, hexadecimal can contain the same info as binary, but in a smaller space. If you tried to code colors in binary, you’d have a very long character string. Instead, we code colors in hexadecimal, then let the computer translate to binary.


Share your thoughts below: