The Usability Color Palette

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 connection made. Your web design and color palette can affect how individuals perceive you and your brand, and ultimately 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 it more likely to recall in the future. The site and logo should be easily recognizable by your audience, and correlated to your service or product library.

Dive into color relationships

Looking in depth at the color choices for your brand (website, logo and other materials) require taking a close look at the brand values and goals. Many different 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 from 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 that are adjacent to the base color’s complement on the 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 – making up a total of red, orange, yellow, green, blue and violet. In painting color theory, hue refers to 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 darker hue.

The result of adding white to particular hue (e.g. light blue is a tint of blue), increasing 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 are duller in comparison to the more highly saturated colors (that tend toward the vivid). 
Is it the colorfulness of a color relative to its own 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 myriad, 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 an 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 own branding?
What type of intensity works best with your brand messaging?
How can your color schemes make your brand stand out in a positive way?

Esther Gutkovsky

Esther is a Content Strategist at ArtVersion Interactive Agency. She first discovered a passion for marketing while studying brand management – since that moment, Esther has rejoiced in using her creative and writing skills within a field that allows for limitless self-expression and ingenuity.

More Posts - Website - Twitter - Facebook


Leave a Comment