How to Create a Style Guide for an Online Brand

0 comments

Posted on 22nd January 2010 by admin in GUI Design

I have heard versions of this statement many times ” Our logo color looks completely different on my laptop than my work computer.” . If the color is a Pantone Blue  or CMYK  for example there are ways to find the best approximation. The challenges are when the blue is to be identified “by look on the page.” A page on a monitor screen has variables that effect the look that do not exist in print: Video / graphic cards, browser differences, monitor settings.

I use to have a palate of WebSafe colors posted on my bulletin board right next to my monitor. “Web Safe” meant that most monitors & browsers will render these colors the same. But this is still relative.  Web colors are called  “Hex Value.”  There is a range within these Hex Values that are considered “safe” in that they will look virtually the same despite computer variables. There is no such thing as a true Pantone Color online. There are now books and guides out there that can convert Pantone to the Hex value. There are also tools of the trade for this. The dropper tool in Photoshop 6 or later provides accurate color conversions.

Photoshop Pantone Dropper
Photoshop Pantone Dropper
Photoshop Pantone Dropper
Photoshop Pantone Dropper
The top of the swatch represents the safe color and the bottom is the closest hex value to Pantone 072.

Many will find the difference acceptable but it is not unusual for the web safe color to get nixed. One cannot make a conclusive decision of which color looks the “best” from looking at the swatch on their computer or even on one, two, or ten other monitors since the chosen color will almost always deviate from the original. Ultimately, we have to feel confident signing off on the prototype and that will most likely happen from our own computers. If we pick a hex value we are happier with like the lower color of the swatch example, our midnight blue may look royal purple to our neighbors.

There may not be a resolution any time soon to standardize print to web as we do print to paper. This will no doubt be something we will have to continue to find a compromise.