Have you ever been strapped to use specific colors outlined in a branding guide? Felt restricted because those colors ended up being too light or dark for the way you want to use them?
Here’s the solution: throw out your brand guide.
gasp!
OK, don’t throw it out. Just put it in a drawer for a few minutes.
Branding Guides be Damned
When dealing with color on screen, it’s easy to get caught up in literal values from hex colors, you can cheat colors ever so slightly to achieve the right optical value. This is especially prevalent when trying to bring a company’s identity colors to a screen design. Because the most important idea behind a brand guide is to help a company maintain the visual integrity of their business, consider hex numbers to be guidelines rather than law. Once you are familiar enough with the colors your company uses, you can start to flex them a bit, and take a few liberties.
This is a quick method for cheating to get the color you really want. With a little sleight of design, we can swap a color that might be part of your identity guidelines, with one that works better optically, and no one will be the wiser!
Color is a Wily Beast
This might be hard: You might have to break out of the idea that a color can only be made using one method. Color is fluid. It interacts and changes based on its surroundings. Some colors can appear lighter or darker based on what color they appear on or next to. The RGB gamut is additive color, and as such, has a tendency to push contrast in the direction that objects may already be leaning—increasing the contrast of light colors on dark colors and decreasing the contrast of light on light. Obviously, because we are talking about monitors here, these aren’t hard and fast rules.
Cheat and Feel Good About It
On a light background, when you have a large element of a light color, a small element of the same color will appear lighter.
Enter our fake company: Double Dagger. They manufacture footnotes. Take a look at Fig. 1 below. The logo (Double Dagger), rule, and small text are all #6699CC. Because the logo so large, we get a good sense of the light blue color. Unfortunately, the rule and small text beneath it feel much lighter because we can’t create enough contrast with such small shapes in that color.
Now take a look at Fig. 2. Our logo is still #6699CC, but now the rule and smaller text have been cheated to #4477BB, effectively giving us the same optical color that we used in the logo. You will find that we get a better sense of the light blue, and the added benefit of more contrast for our text. Doesn’t that feel good?
Conversely, when you have a large element of a dark color, a small element of the same color will appear darker.
Let’s look at Fig. 3 below. Double Dagger has decided to change its identity colors from blue to red. In Fig. 3, our logo, rule, and small text are all #330000, a very dark red. If you look at the rule and small text below the logo, you will notice that they seem dark enough to be confused with black. The dark red can’t be sustained by the smaller shapes. Now let’s look at Fig. 4. The logo is still #33000, but we’ve now cheated the rule and smaller text to #550000. This gives us a better sense of a red, but preserves the dark and moody direction the company has taken.
But we’ve only touched on color against a white background. For colors against a darker background, you may find lighter colors work fine, but darker colors need to be cheated a bit to the lighter side in order to reach a good optical equivalent. Take a look below at Fig. 5 and Fig. 6. Both use the same exact corresponding colors as Fig. 1 and Fig. 2 above, but now they are set against a dark background. Where the blue used in Fig. 1 above was too light for the smaller elements, we find it is just right for them in Fig. 5, and the darker blue we used in Fig. 2 has now proven too dark for a dark background, as evidenced in Fig. 6.
Your mileage may vary, and this may not be applicable in all situations, but consider it to be just another tool on your utility belt for dealing with color problems.
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
23/12/2006
It’s amazing how subtle changes in color make a big difference on-screen. The only problem in this is that monitors don’t always display color properly (which sucks!). Colors on my Apple Cinema Display are much brighter and vibrant than a lot of screens… On more than one occasion I have had a coworker and/or client come back and ask why I used a certain color (which appeared horrendous on their screens)...
Anyways… great article.
Vote Helpful or Unhelpful
23/12/2006
I’m more of a programmer than a designer, but I have enough of an eye that I have found myself “cheating†colors one way or another to make them appear the same optically. Great discussion of the topic. I feel so validated!
Vote Helpful or Unhelpful
23/12/2006
Excellent bit of information here. I have run into this several times and had to fudge every now and then. Your comparisons make it easy to see the improvements that can be made.
Vote Helpful or Unhelpful
24/12/2006
Whily beast indeed, but a mighty fine bit of taming. I’ll be dropping this into Ma.gnolia instantly.
Vote Helpful or Unhelpful
24/12/2006
I have to agree with Andrew Hedges, originating from a development background and not having studied design I’ve found myself doing this on many an occasion. It’s nice to know that we get it right some times! Great article.
Vote Helpful or Unhelpful
28/12/2006
Great article Jason.
I felt a little guilty sometimes and preferred not to “break the rules†(yes, I know they were made for breaking anyways) when a few colors didn’t look right.
Now I’ll become a color cheater and be happy once again :)
Thanks for that!
Vote Helpful or Unhelpful
30/12/2006
Thanks Jason,
Being a “one man army” on html, design and programming made me wonder if my techniques were correct or not.
Thanks again for writing it down.
Vote Helpful or Unhelpful
02/01/2007
This is pretty much commonplace in the print world and is good practise for web design, I use it often. This article illustrates the problem very well. It can be tricky to get it right though because different screen types and display settings can through things off. Also beware when using CSS constances as outlined in a previous article on 23ways.
Vote Helpful or Unhelpful
28/07/2009
Can anyone recommend a good method for quickly previewing these color cheats in a web authoring environment? I can picture doing this kind of finessing in Photoshop with the Color Picker tool (where the feedback is immediate), but not at the HTML/CSS stage, even with a tool like Dreamweaver—the color selection process just seems too hit-or-miss to be truly effective.
Maybe I just need to go back to the drawing board on this…
Vote Helpful or Unhelpful
21/12/2009
Seems reasonable enough. But what if the client doesn’t agree on the color change? Try and make it work within the limitations I suppose.
Vote Helpful or Unhelpful
09/01/2007
“Cheating Color” has me sitting on an edge. I think the term “optical color” is free to be coined! It would make immediate sense to me even if I hadn’t read the rest of the article.
Vote Helpful or Unhelpful
Impress us