The Usability Color Palette

February 16, 2015In Framework, Usability4 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

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.

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

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

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

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?

a person typing on their phone

The Conundrum of Empathy in UX Design: A Driving Force or an Unrealistic Ideal?

Empathy is often touted as the backbone of user experience (UX) design, a tool to perceive and feel what end users might experience. However, the practicality and efficacy of empathy in UX design is a subject of intense debate. While empathy can be…

A strategist draws out a user journey wireframe on paper.

Unleashing Creativity: Design Thinking Principles and Methods in Web Design and Branding

The world of intricacies necessary to complete UX/UI design exercises for web design calls for innovative solutions to address complex challenges. Design Thinking, a human-centered approach to problem-solving, offers a versatile toolkit to create…

A person logging into their laptop.

The Art and Science of UI Design: A Guide to Effective Interface Creation

User Interface (UI) design is a multifaceted discipline that focuses on creating visually appealing, easy-to-use, and efficient interfaces for digital products. With technology's rapid evolution and user expectations constantly shifting, UI…