Color Shorthand



Once you've started using CSS layouts for your Web designs, you may notice something odd about the way the colors are defined. Rather than the standard 6-character long code after the pound sign (#cc99ff), instead you see just three characters (#c9f). This is called color shorthand and it takes advantage of the fact that the browser-safe Web palette uses triplets that are always doubled. In other words, each color triplet is made of 3 pairs of characters 0-f (base 16), and with browser-safe colors they are doubled. So, to write color shorthand, you simply remove the duplicate character.

For example:

White is written #fff in shorthand

Black is written #000

Red is #f00

Green is #0f0

Blue is #00f

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-gren. Written #fc0, #c0f, and #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.

1.Pick your primary color.

For the above color scheme, I used orange: #fc0.

2.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: #c0f

3.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: #0fc

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 #859CFE, pink #FE859C, and green #9CFE85. The three double character groups are 85, 9c, and fe.

Is Browser Safe Really Required?

The browser safe Web palette was developed seven or eight years ago 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.

The thing is...

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 them. Using browser safe colors is a safe 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 of them!

The important thing about browser safe or non-browser safe is that you make the choice knowingly. I chose to use non-browser safe colors on the iris layout because it better matched the iris. 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.