A regular reader of the Gist Brands blog recently emailed me a concern:
“Are there any ‘no go’ website colors or combinations we should be aware of as we tackle our new site?”
Good question, and if you do a visual survey of websites, obviously one not enough people are asking.
My take is there are as many color fails and issues in websites as there are in brand color choices in general, though they get further exacerbated online by complications of: screen type and resolution; transmitted color (backlit screens) versus reflective color (like a page, package, or car); as well as form factor (small mobile screens, etc.) But let’s talk about some basic guidelines and guardrails.
How to judge bad color choices.
The true “no-go” website color combinations are those that make your eyes ache and your head spin. It’s not always issues of the colors themselves, as much as how they are combined and used. I’m sure you’ve seen what I’m talking about: Sites that have tiny reversed or colored type on black backgrounds; use saturated neon colors for backgrounds or type; designs that seem to vibrate visually like old 3D glasses. The worst offenders are those designers or clients that decide, “Hey, since we are working with on-screen color [which has the whole gamut of color at no additional cost, unlike printing or sign-making] we will use them all.” And especially the bright ones.
Other than those mind-bending and eye-straining choices, I think good selection of brand and website colors always remains quite subjective depending on your audience and what you are trying to achieve. In general, I think I would categorize the next layer of color problems of offending websites as falling into problematic categories like:
- Too many colors.
- Multiple bright colors.
- Too much colored text.
- Color choices lacking tonal contrast from each other.
- Light objects, text, or graphics on light backgrounds.
- Muted color palettes lacking a bold or contrasting component.
- Almost anything on a mostly black background. (There are a few notable exceptions.)
- Color-on-color textured backgrounds behind text or content. (Think wallpaper patterns.)
So there’s a quick checklist of basic beginner errors to avoid.
There’s method to winning color combinations.
Most good web color schemes, like good brand color schemes, are built around analogous or complementary colors (analogous are situated next to each other in the color wheel/spectrum; complementary are across from each other.) Your total color palette may be much richer and more varied than an analogous or complementary pair, but the main “color architecture” is usually anchored somewhere in those concepts.
If in doubt, this is always the first place to start in building your brand or website color palette. You don’t have to stick to “pure” hues, either. You can use shades, tones, or tints, or even build a more complex mixed palette employing multiple variations, as long as they are rooted somewhere in these color relationships and in color theory.
(Some more on Color Theory: http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm#tints_shades_tones)
How to wrangle a wild one.
The hard reality is frequently we don’t have complete free reign in color selection, anyway. There’s often a sacred cow or dictated color that’s really not a great hue to work with or build from. There are almost always ways to work around challenging colors, if you have a brand color that truly has to be leveraged, and ways to use good color theory to balance or mitigate an otherwise unruly or lurid color. For example:
- If you want to use bright colors, be liberal as well with white, black, gray, light gray, and other neutrals.
- If you have a bright brand color that’s just “too much” as a background or text, use it as the call-to-action color for buttons and user interface (UI) highlights.
- Use your intense colors only in the logo and design accents (frequently better anyway to make the brand stand out) and build a different complementary palette for the website’s visual structure.
- “Dumb those colors down” a bit for on-screen transmitted colors; using shading to add black to the brand color to darken it back, or tinting (adding white) to the brand color to lighten it. Toning adds gray to “neutralize” it.
In reality, in a professional brand standards manual, ideal HTML or HEX spec brand colors may differ quite a bit from a default formula conversion from another color model like Pantone, just so that they appear to be the same color between transmitted and reflective color. And of course, appearance differs screen-to-screen and device-to-device.
10 of the most common mistakes made selecting brand or website colors.
Other places I see people fall flat in color choice:
- Choosing colors to “get attention” and then putting them everywhere, instead of where the attention is needed. Everything screams.
- Little thought to color symbolism or the psychology of color choices. “These are just my favorite colors.”
- Little thought to the color preferences of your customer demographic. “Oh, this isn’t for me?”
- Little thought to differentiating from competitors or the industry. “Everybody else is doing it, so it must be right.”
- And conversely, too much emphasis on being different from everybody to the point of making your site unreadable or obscure. “I will be unique!”
- Little thought to the cultural differences of color or symbolism. (Really important for international audiences.) “What do you mean white is a symbol of death?”
- Little thought to contrast for visitors with low vision or color-blindness. (More on that below.)
- Choosing vibrant web-based colors that can’t easily be reproduced in print and collateral. (Short-sighted for sure.)
- No color hierarchy, where colors serve to organize and make content scannable. “Let’s put red everywhere!”
- No overall color weighting or emphasis, instead painting everything in equal amounts of different colors of the brand or site palette. (Better a descending proportion, like 60%, 30%, 10%.)
Try before you buy.
There’s no doubt that there’s both an art and a science to color. Color selection for either your site or your brand is mission-critical and it’s meant to be a long-term commitment. You can “try on” colors using templates or pre-designed color palettes, borrowing good design principles from others who have made the mistakes before, and seeing if certain combinations fit your site, logo, company personality, or industry. But even then, it’s likely they need to be tuned to be a best fit.
Color choice is always a matter of weighing and balancing, rather than “right” or “wrong.” If in doubt in your selection, especially if you are implementing your brand or website in-house, it’s smart to consult with someone with a good, strategic grasp of color for branding and marketing…not necessarily an interior designer or artist friend.
And there’s nothing wrong with informal testing of your website colors or brand colors with your target audience; just make sure it’s not random testing with employees or family, but instead strategic testing with your customers and clients, or better yet with a subset of your ideal potential customers or clients.
There is no magical perfect palette. Or right answer.
My own brand and website color combination is a somewhat controversial one, so a good case study in brand and website color selection. The color orange is highly polarizing when you look at color studies; people personally love it or hate it. There’s little middle or neutral ground. (It even took on a new highly polarized political meaning after the 2016 election in the U.S.) Orange is also a color that can get confused with red, brown, or green for people with red-green color blindness. As a result, many people would categorically judge it as a brand color to avoid. Case closed.
However, orange is also a bold, vibrant, energetic color strongly associated with creativity, confidence, and the intellect. It’s high-visibility and attention-getting, and in our culture is identified with construction, way-finding (think road signs), change, energy, ideas, insights, instinct, and optimism. These are all highly relevant to both the process and product that I tackle in strategic rebranding, the many positive associations greatly outweighing the negative. It also differentiates me significantly from many competitors, since most people are afraid to claim or leverage orange. While my clients likely don’t want me to recommend orange as their own brand color, they are more than comfortable with the associations as they relate to the work that I do for them.
In practical application on my website, orange isn’t just used for my logo and highlights. It’s heavily leveraged, even for some backgrounds, which could be judged as risky. And yet there’s a strategic color hierarchy employed; contrast is maintained for readability; and a very healthy use of white space, as well as shades of gray and black, balance the vibrancy and energy of the orange. There aren’t other hues involved in the design structure itself (only in photos or illustrations in the blog) to compete or clash with the orange.
I also very intentionally chose a more toned-back, slightly earthy shade headed in the direction of a terra cotta which maintains the vibrancy of orange, but doesn’t overpower like neon orange or even a bright citrus color would. This keeps my brand materials and my site from seeming too stimulating, superficial, over-bearing, or risky, or from being an assault on the senses.
A note on designing and choosing colors for colorblindness and low vision.
Contrast, size, and additional “visual cues” are typically the main things to address for both low-vision and colorblind users. In general, using contrasting colors or colors on opposite ends of the spectrum work best for colorblind users. There are varying kinds of color blindness, so you’re unlikely to design something that works for every user faultlessly. It’s more about programming for best success with the most users.
Giving additional cues, other than just color, is the easiest way to meet the most users wherever they are at. For example, not just relying on color for a clue, but also using symbolism, e.g. an underline in addition to a color call-out for a text link. Or say, using patterns and textures in addition to color to call out the columns in a graph. In this case, if the color “falls out,” users can still see differentiation. Fewer colors in a design also helps limit color confusion, so staying minimal helps. For color blindness, the most common is red/green color blindness, so color combinations that are variants of those two cause more problems: green/red; blue/purple; green/brown; green/yellow; etc.
There are some color blindness simulators online that you can use to visualize what your logo, ad, or website might look like to various color-limited viewers. This can help you at least decide whether there will be confusion and if the most important items still stand out.