How To Use Color in UX Design. Covers How To Pick A Palette - by Jennifer Jhang - UX Collective

Download as pdf or txt
Download as pdf or txt
You are on page 1of 21

Open in app Sign up Sign in

To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.
Search

How to use color in UX design


How to pick a palette, prioritize colors, consider data visualization, and test for
accessibility.

Jennifer Jhang · Follow


Published in UX Collective
7 min read · Aug 1, 2020

Listen Share

Color is the mother tongue of the subconscious.

— Carl Jung
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
To makeof SASSwork,
Medium andweLESS functions.
log user UXMedium,
data. By using design sees
you agreecolor
to as a consistent
system acrossour Privacy Policy, including cookie policy.
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.

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


To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

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

Create an analogous palette from three colors sitting next to each other.
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

Analogous

Complementary contains two opposite colors, which creates high contrast.

Complementary

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

Split- complementary

A triadic palette has three hues equally spaced around the wheel.
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

Triadic

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.

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
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.
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

Secondary
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.

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.
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

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 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–12Tocolors to cover
make Medium work,all useuser
we log cases, depending
data. By onyoudata
using Medium, agreecomplexity.
to Create a
our Privacy Policy, including cookie policy.
flexible tint stack with a wide range in hue and brightness.

Types of data and recommended color palette:


Categorical
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 with a categorical palette

Sequential
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.
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

A heat map with a sequential palette

Diverging
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 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.
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

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.

Contrast
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 recommends the following contrast
ratios:

4.5:1 for text

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

3:1 for icons


To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

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.

Get testing
Accessible Color Matrix: from your color palette, this creates a matrix (range) of
accessible pairs.
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

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.

Conclusion
Here’s quick recap on what we learned:

using color theory to pick an harmonious palette

prioritizing colors into primary and secondary

considering data visualization and its data types

testing for color accessibility early and often

We use color with its versatile spectrum, in an attempt to express the depth of our
human experience. I hope this post was helpful, and that you come away with
another view of color in the light of UX.
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

References:
The Role of Color in Product Design: UX of Color Palettes — Lindsay Munro, 2019

The Ultimate UX Guide to Color Design — Justin Baker, 2017

Design System Sprint 2: One Color Palette to Rule them All — Marcin Treder, 2017

Color in Design Systems — Nathan Curtis, 2016

How to Choose Colors for Your Data Visualizations — Michael Yi, 2019

Color for data visualization — Spectrum Adobe, 2019

Here’s What You Need to Know About Color Accessibility in Product Design — Justin
Rey Reyna, 2018

Web Content Accessibility Guidelines (WCAG) 2.1 — W3C, 2018

UX Design Color Palette Design Systems Accessibility Visual Design


Follow
To make Medium work, we log user data. By using Medium, you agree to

Written by our Privacy Policy, including cookie policy.


Jennifer Jhang
416 Followers · Writer for UX Collective

Hi, I’m Jennifer! I’m a creative and self-motivated learner with a passion for intuitive design that simply
improves lives.

More from Jennifer Jhang and UX Collective

Jennifer Jhang in UX Collective

How to create a UX Sitemap: a simple guideline


“As a little kid, I climbed a lot of trees because I always loved the bird’s-eye view” - Felix
Baumgartner, Stratosphere Skydiver

4 min read · Apr 8, 2020

1.3K 7
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

Taras Bakusevych in UX Collective

58 rules for beautiful UI design


The right UI can elevate an application from functional to unforgettable, making the difference
between a user who engages once and one…

10 min read · Jan 10, 2024

3.3K 23

Ida Persson in UX Collective

If you want to be creative, you can’t be certain


Embracing ambiguity as a superpower.
To make Medium work, we log user data. By using Medium, you agree to
4 min read · Jan 17, 2024
our Privacy Policy, including cookie policy.

8.8K 180

Jennifer Jhang in UX Collective

7 UI patterns in e-commerce apps


I recently did a competitor analysis of current, top e-commerce apps. I observed Target, Nike,
Apple, Samsung, Ebay, Chewy, Banggood, Drop…

6 min read · Sep 15, 2020

400 1

See all from Jennifer Jhang

See all from UX Collective


To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

Recommended from Medium

Taras Bakusevych in UX Collective

58 rules for beautiful UI design


The right UI can elevate an application from functional to unforgettable, making the difference
between a user who engages once and one…

10 min read · Jan 10, 2024

3.3K 23
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

Adham Dannaway in UX Planet

16 little UI design rules that make a big impact


A UI design case study to redesign an example user interface using logical rules or guidelines

14 min read · Mar 14, 2023

24K 226

Lists

Icon Design
36 stories · 225 saves

Interesting Design Topics


222 stories · 366 saves

Stories to Help You Grow as a Designer


11 stories · 545 saves

Figma 101
7 stories · 421 saves
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

Ashley Drewes in Bootcamp

Input Fields for Usability & Style


My organization currently use a classic input style: an outlined box, with slightly rounded
corners. The label description is above the…

· 5 min read · Aug 17, 2023

sarthak

Defining Your UI Colors: A Comprehensive Guide


Welcome to the fascinating world of UI/UX design, where colors hold the power to captivate,
guide, and communicate. In this
To make Medium comprehensive…
work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.
6 min read · Aug 17, 2023

120

Punit Chawla in Prototypr

UX/UI Design Trends Going Into 2024


Every year, we have a line up of new design trends that not only look good, but also stick
around and influence other designers to “steal”…

10 min read · Dec 13, 2023

9.2K 88
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.

Nathan Curtis in EightShapes

Naming Tokens in Design Systems


Terms, Types, and Taxonomy to Describe Visual Style

17 min read · Oct 15, 2020

6.8K 28

See more recommendations

You might also like