Once you've started using CSS layouts for your web designs, you may notice something special about the way the colors are defined. Rather than the standard 6-character code after the pound sign (e.g.
#cc99ff), you see just three characters (e.g.
#c9f). This is called color shorthand and it takes advantage of the fact that the browser-safe web palette uses triplets that are doubled. In other words, each color triplet is made of 3 pairs of characters 0-f (base 16), and with browser-safe colors the numbers are always the same. So, to write color shorthand, you simply remove the duplicate character in each pair.
#ffffff) is written
#fff in shorthand
#000000) is written
and so on...
Finding Color Triads
If you've read my article on color harmony you will know that color triads are color groups that work well together and bring a lot of life to a design. Using hexadecimal color codes, it's easy to create color triads from any color set you might have.
A very basic color triad might be orange, purple, and sea-green; written
#0fc. In this color triad the three characters are f, c, and 0. By changing the combination of the triplets, you can create different colors that are harmonious with one another. Here's how to do it.
- Pick your primary color.
For the above color scheme, I used orange:
- Rotate the characters so that the three characters are in completely different positions.
I put f last, c first, and 0 in the middle. This gave me a light purple color:
- Rotate the characters one final time so that they are all in different positions.
There is only one combination left where the characters have not been in those positions, a sea-green:
You can do this with non-browser-safe colors as well, just treat each double character as you did the single characters. For example, in my iris layout I used: blue
#FE859C, and green
#9CFE85. The three double character groups are 85, 9c, and fe, moved to different places in the triplet.
Is Browser Safe Color Really Required?
Back in May 2000, I wrote an article about browser safe web colors. I got an email from Jason saying“please don't encourage those newbies out there to produce even more putrid sites based on the antiquated 'web safe' color palette.” While his letter then moved from there to being even more offensive towards me specifically, he does have a point even if he felt the need to be rude to make it.
The browser safe web palette was developed in the 1990s when it was very common to find computers with 8-bit monitors that could only support 256 colors. This meant that if you used a color scheme that used colors that were not browser safe, they would dither and this could look spectacularly ugly on those screens. I saw instances where a color that was a pretty light green ended up looking almost hot pink on an 8-bit monitor. These days, most people have monitors that support millions of colors. Even mobile phones that don't have color often use millions of shades of gray to define the images.
But, if you don't know who's viewing your site (either because you don't get browser and monitor stats or because you don't use them) you won't know what your site looks like to your readers. Using browser safe colors is a safe, if boring bet. And unlike Jason's assertion above, it is possible to create nice looking pages using a browser safe color palette. It is also almost easier to create an ugly looking page using non-browser safe colors. After all, there are more colors!
The important thing about browser safe or non-browser safe is that you make the choice intelligently. I chose to use non-browser safe colors on the iris layout because it better matched the iris photo. However, if I knew that I had customers who used 8-bit monitors, this is not a layout I would recommend and I would consider switching to browser safe colors.
When you choose your color palette, you should understand color theory so that you get colors that go well together. You should also understand your audience, so that you use the web safe palette if required.
Need More Help with HTML or Web Design?
I am available online to help you with your HTML or web design problems. Come join our community of web designers on Google+ and ask a question, join in a discussion, get help with a design, or just get inspired to do great web designs.