Apr 15, 20212 min read

Color in UX

Updated: May 1, 2021

Color has more to say than it meets the eye. Color highlights, guides attention, and unifies the elements. In UX, color reinforces the functional and aesthetic features of a product.

Color wears many hats. Branding sees color as mood and perception. The development sees color in terms of functions. UX sees color as uniformity in the system across various platforms. Overall, color is a versatile tool in conveying different types of information.

To improve color decisions, let’s cover how to: pick a palette, prioritize color, and consider data visualization.

Picking a palette using color theory

Learning a few color elements (read more) will help pick the apt colors for the palette.

Hue & Saturation

Hue is basically a fancy synonym for color.

Saturation means the intensity of a color. At 100% saturation, color is at its purest.

Tint, tone, & shade

Mixing pure color with neutrals creates lighter and darker varieties.

Tint — color mixed with white

Tone — color mixed with grey

Shade — color mixed with black

Harmonious palettes

“All colors are the friends of their neighbors and the lovers of their opposites.”

— Marc Chagall

Monochromatic. The first idea for choosing colors that work well together is going for a monochromatic palette. This means to work with a single hue, and the variation in tints, tones, and shades.

Complimentary. Colors that are opposite to each other in the color wheel are considered complementary. By mixing these two colors, it is conveying contrast and interest. This is tricky to use in extensive amounts, but they are helpful when it is needed to highlight something, like a call to action.

Analogous colors are groups of three colors that are next to each other on the color wheel and a tertiary. Green, Greenish-Yellow, and Yellow are examples. An analogous color scheme creates a rich, monochromatic look.

How to create your palette

Here are a few ways to get started on the own color palette.

Create gradients: play with creating gradients from a harmonious palette.

harmonious palette

to gradients

Use photographs: choose a photograph and pick colors from it.

Use photographs to select a color palette

Prioritizing primary & secondary

Prioritize and determine the colors in the design system. They help to create visual consistency for the end-users.

Primary

Primary colors are used frequently in the interfaces. They include colors in branding, UI elements, and structure.

Here's the color palette for this branding:

The branding used on a Sign-Up Screen: (Check more on Sweet Chaos's Branding)

Secondary

Secondary colors consist of accents based on primary. Secondary colors can be used to show system feedback such as success, error, or alert.

Now about colors in Data Visualisation

For data visualization, use color to emphasize the visual of the data. It may need 6–12 colors to cover all use cases, depending on data complexity. Create a flexible tint stack with an extensive variety of hues and brightness.