How To Use Color in UX Design. Covers How To Pick A Palette - by Jennifer Jhang - UX Collective
How To Use Color in UX Design. Covers How To Pick A Palette - by Jennifer Jhang - UX Collective
How To Use Color in UX Design. Covers How To Pick A Palette - by Jennifer Jhang - UX Collective
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.
Search
Listen Share
— 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.
Saturation means the intensity of a color. At 100% saturation, color is at its purest.
Harmonious palettes
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
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.
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.
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.
Design Systems Repo: for inspiration, look through design systems of other
companies to see how they organize colors (everyone does it a little differently).
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.
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.
Get visualizing
Let’s look at a few tools that will make it easier to pick your color palette for data
visualization.
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:
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.
Coolors: Coolors also simulates how your palette will look for different types of
color blindness.
Conclusion
Here’s quick recap on what we learned:
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
Design System Sprint 2: One Color Palette to Rule them All — Marcin Treder, 2017
How to Choose Colors for Your Data Visualizations — Michael Yi, 2019
Here’s What You Need to Know About Color Accessibility in Product Design — Justin
Rey Reyna, 2018
Hi, I’m Jennifer! I’m a creative and self-motivated learner with a passion for intuitive design that simply
improves lives.
1.3K 7
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.
3.3K 23
8.8K 180
400 1
3.3K 23
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.
24K 226
Lists
Icon Design
36 stories · 225 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.
sarthak
120
9.2K 88
To make Medium work, we log user data. By using Medium, you agree to
our Privacy Policy, including cookie policy.
6.8K 28