BY Jennifer Jhang

Color has more to say than meets the eye. As a building block of visual language, color highlights, guides attention, and unifies elements. In UX, color reinforces the functional and aesthetic qualities of a product.

Color wears many hats. Branding sees color as mood and perception. Development sees color in terms of SASS and LESS functions. UX design sees color as a consistent system across 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 colors, consider data visualization, and test accessibility.

Pick palette using color theory

Understanding a few color elements will help you pick the right colors for your palette. The color wheel, a derivative of Newton’s experiments with light, will help you.

Hue & Saturation

Hue is a specific color or degree on the color wheel.

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

The blue hue on a color wheel; a gradient scale shows 100% saturation at the very right.

Tint, tone, & shade

Mixing pure color with neutrals creates lighter and darker variations.

Tint — color mixed with white

Tone — color mixed with grey

Shade — color mixed with black

Tint: starts with a pure blue, gets lighter each step. Tone: from blue, turns greyer each step. Shade: from blue, gets darker

Harmonious palettes

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

Based on the color wheel, these palettes consist of colors that work harmoniously together.

We’ll go over monochromatic, analogous, complementary, split-complementary, and triadic palettes.

Monochromatic consists of tints, tones, and shades of one hue.

Monochromatic example: a color palette created from violet.


Create an analogous palette from three colors sitting next to each other.

Analogous example: a color palette created from yellow, yellow-green, and green.


Complementary contains two opposite colors, which creates high contrast.

Complementary example: a color palette created from red-orange and sky blue.


Split-complementary consists of three colors, with two next to the opposite of one.

Split-complementary example: a color palette created from denim blue, red-orange, and yellow-orange.

Split- complementary

A triadic palette has three hues equally spaced around the wheel.

Triadic example: a color palette created from purple, orange, and green.


Get inspired

Here’s a few ways to get started on your own color palette.

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

I created gradients from a split-complementary palette by adding two colors together.

gradients from a split-complementary palette

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

Try Coolors: it’s a color tool that easily generates different palettes and lets you fine-tune choices.

Prioritize primary & secondary

Prioritize and define the colors in your design system. Like an intuitive library, organized colors help your internal team find what they’re looking for. They also help your team create visual consistency for your users. Aim for precise primary colors, sufficient secondary colors, and clear names for each (Treder, 2017).


Primary colors are used frequently in your interfaces. They include colors in branding, interaction elements, layouts, and text. Add a simple name along with its HEX number: violet: #8322DD.

Here, primary colors are purple, black, and white. The primary colors are also shown on a card with button UI.


Secondary colors are used occasionally, and consists of accents based on primary. Create by hand-picking, CSS functions (darken, lighten by HSL %), or both (Curtis, 2016). Secondary colors can be used to express system feedback such as task success, error, or warning.

Here, secondary colors are red, yellow, blue, green. These secondary colors are also shown on system notifications.

Tint stack

Tint stacks provide flexible choices. Try to empower your team with enough choice (3–4 steps) but not so many that it compromises consistency.

You can create stacks using HSL percentages to easily implement with CSS functions. Include the color name, HSL lightness (0 -100), and HEX number: violet-lighter-20: #B47AEA.

Tint stack based on primary and secondary colors; neutral has 7 steps while the rest of the colors have 4 steps each.

Get started

Eva Colors: this AI tool helps you find secondary colors for notifications, based on a primary.

Coolors for tint stacks: start with one color and change HSL lightness by increments.

Using Coolors, I created tint stacks with 15% increments. I started with a 5-color palette with only #AFE9D9 as base.

Using Coolors to create tint stacks with 15% increments

Design Systems Repo: for inspiration, look through design systems of other companies to see how they organize colors (everyone does it a little differently).

Consider data visualization

For data visualization, use color to emphasize the story of your data (Yi, 2019). You may need 6–12 colors to cover all use cases, depending on data complexity. Create a flexible tint stack with a wide range in hue and brightness.

Types of data and recommended color palette:


Categorical consists of non-numeric categories (country, gender, names). For distinct categories, a color palette with hues spaced apart in the color wheel works best.

A line graph of mood over time uses a categorical palette to represent different emotions.

A line graph with a categorical palette


Sequential data has numeric or ordered values. To indicate numeric steps, colors should gradually change hue and lightness. Much like analogous palette, use color hues that sit next to each other. Low values should start light, and high values go dark.

A heat map of rainfall in different cities throughout the year uses a sequential palette. Palette represents inches of rain.

A heat map with a sequential palette


Diverging data also contains numeric value. It’s basically two sequential palettes that meet at a central point. Diverging can have negative to positive values, or opposites on a spectrum. Keep the central point light, and allow colors to get darker further from center.

A stacked bar chart shows user satisfaction for different UI elements using a diverging palette.

A stacked bar chart with a diverging palette

Get visualizing

Let’s look at a few tools that will make it easier to pick your color palette for data visualization.

ColorBrewer: browse through color palettes (sequential, diverging, categorical), and visualize them on a map.

Viz Palette: this tool lets you see color palettes on different data visualization charts.

Screenshot of the Viz Palette web page

Viz Palette web page

Test accessibility

Test your color palette for accessibility, to ensure users with varying visual abilities can see each color. Testing for accessibility is a step towards a more usable and legible product, strengthening its experience. Check early and often that colors follow World Wide Web Consortium (W3C) guidelines.


Look for sufficient color contrast of text on background, as well as contrast between colors used together in data visualization. With low contrast, text become harder to read, and data harder to distinguish. W3C recommendsthe following contrast ratios:

  • 4.5:1 for text
  • 3:1 for large text (14pt bold, 18pt regular)
  • 3:1 for icons

Contrast ratio of texts and icons on the card with button UI and system notifications all pass the recommended 4.5:1.

Meeting W3C’s 4.5:1 and 3:1 contrast ratios

Visual cues

Try to use multiple visual cues in addition to color in communicating important states. Using colors alone to convey information may not be as accessible for users with color blindness (Reyna, 2018). For example, you can include an icon as well as color and text for a system notification.

Accessible ranges

Create contrast pairs of different text colors on backgrounds. Then show accessible ranges based on progression of your neutral tints (Curtis, 2016). This helps your team see exactly where pairs become inaccessible.

I explored accessible pairs based on the tint stack created before, focusing on neutrals and the primary purple.

Get testing

Accessible Color Matrix: from your color palette, this creates a matrix (range) of accessible pairs.

Screenshot of the Accessible Color Matrix web page

Accessible color matrix web page

Tanaguru: quickly test a color pair for contrast ratio.

Coolors: Coolors also simulates how your palette will look for different types of color blindness.