As 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)
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):
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:
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: