The Usability Color Palette

February 16, 2015In Web Usability, Web Design4 Minutes

I found I could say things with color and shapes that I couldn’t say any other way – things I had no words for.
-Georgia O’Keeffe

Ms. O’Keeffe could not have said it any better – instant visual impressions are formed through color without any other types of a connection made. Your web design and color palette can affect how individuals perceive you and your brand and your website’s usability.

Different colors correlate to different emotions, as has been discussed by psychologists and businesses for years – big businesses use colors to affect your emotions (and, consequently, your decisions). Brands want to stand out in people’s minds, creating positive associations and making them more likely to recall them in the future. The site and logo should be easily recognizable by your audience and correlated to your service or product library.

Color Palette
Color Palette

Dive into color relationships

Looking in depth at the color choices for your brand (website, logo and other materials) requires taking a close look at the brand values and goals. Many combinations may be a good fit for an organization and its message. Color relationships are determined by their position on the color wheel.

Complementary colors are pairs that sit directly across each other on the color wheel. allowing for the most dramatic contrast combination.
Analogous colors appear next to each other on the color wheel, lending a harmonious color relationship.
Triadic colors are three colors that are evenly spaced around the color wheel.
Split-complementary elements consist of a base color plus the two colors adjacent to the base color’s complement on the color wheel.

Computer user interface showing color wheel

Know Your Terms

Hue
The overarching, discerning quality of color (e.g. “blue”) – the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue and yellow (known as the unique hues). Orange and purple make up the other hues – a total of red, orange, yellow, green, blue and violet. In painting color theory, hue is a pure color without tint or shade.

Shade
What is obtained when adding black to a particular hue (e.g., dark blue is a shade of blue), resulting in a darker hue?

Tint
Adding white to a particular hue (e.g., light blue is a tint of blue) increases lightness.

Tone
What you get when you add both black and white (grey) to a hue (e.g., pastel blue is a tone of blue)

Saturation
Defined as the range of color beginning with grey (0% saturation) and ending with a pure, gray-less form (100% saturation). Desaturated colors tend to be softer and often duller compared to the more highly saturated colors (that tend toward the vivid). Is it the colorfulness of a color relative to its brightness?

The color schemes of logos and websites influence us from a very early age, creating value and recognition. Evoke emotion with different color schemes – there is a wealth of power in understanding color manipulation. Limit your selection of colors, choosing one color to stand out and vibrate strongly, with one or two muted ones to create a low-contrast harmonious experience. Make sure to create visual harmony by matching text color with a prominent color of images on your site, sustaining a smooth flow for the eye.

~~~

Consider the following questions when deciding upon color schemes:


What kind of feelings does your brand want to evoke?
What colors are competitors using in their branding?
What type of intensity works best with your brand messaging?
How can your color schemes make your brand stand out positively?

Person on computer browsing website with usability

Transforming Usability Throughout the Health Care Experience

There's perhaps no industry where usability and overall user experience is more critical than that of health care. Personalized engagement is of the utmost importance to an environment where the relationship with between patient and provider can at…


Person on their cellphone

Essential Mobile App Design Usability Factors

The goal of many mobile app designs is to create a system that speaks the language of the user, leveraging familiar concepts to deliver something that feels new and unexpected - even delightful. This can be challenging to accomplish but aligning…


Two users on a laptop engaging with AMP

UX Solutions: Determining If Your Website Can Benefit From AMP

In a marketplace where speed often equals performance, staying relevant across device with attention to mobile is critical. That’s why AMP, or Accelerated Mobile Pages has been met with such excitement. Site owners and marketers who want to remain…