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…

Color Tips for the Web

Color Tips for the Web

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.

Enjoy : The Cre8 team