Colors

Shopify uses colors purposefully to communicate how things function in the interface. This helps us create visual patterns that can make interacting with our product easier and more predictable for merchants.


Guidelines

These guidelines are the framework upon which we have built our system for how color is used in Shopify.

Communication over decoration

Although we value an aesthetically pleasing use of color, we place a higher value on clear communication. Our use of color should be purposeful, rational, and should serve to support the purpose of the content.

Diagram of Communication illustration

Color should be accessible

Our color choices should be made with consideration of merchants who are color blind or have a low visual acuity.

Diagram of Accessible illustration

Color should focus attention

The use of color should help bring attention to what matters most. Color should support the hierarchy of the page. Use restraint.

Diagram of Focus Attention illustration


Color palette

Our color palette is built with our core principles and guidelines as its foundation.

Lighter
#F9FAFB
Light
#F4F6F8
Sky
#DFE4E8
Dark
#C4CDD5
Lightest
#919EAB
Lighter
#637381
Light
#454F5B
Ink
#212B35
Light
#B3B5CB
Title bar
#43467F
Dark
#1C2260
Darker
#00044C
Lighter
#F6F0FD
Light
#E3D0FF
Purple
#9C6ADE
Dark
#50248F
Darker
#230051
Text
#50495A
Lighter
#F4F5FA
Light
#B3BCF5
Indigo
#5C6AC4
Dark
#202E78
Darker
#000639
Text
#3E4155
Lighter
#EBF5FA
Light
#B4E1FA
Blue
#007ACE
Dark
#084E8A
Darker
#001429
Text
#3E4E57
Lighter
#E0F5F5
Light
#B7ECEC
Teal
#47C1BF
Dark
#00848E
Darker
#003135
Text
#405352
Lighter
#E3F1DF
Light
#BBE5B3
Green
#50B83C
Dark
#108043
Darker
#173630
Text
#414F3E
Lighter
#FCF1CD
Light
#FFEA8A
Yellow
#EEC200
Dark
#9C6F19
Darker
#573B00
Text
#595130
Lighter
#FCEBDB
Light
#FFC58B
Orange
#F49342
Dark
#C05717
Darker
#4A1504
Text
#594430
Lighter
#FBEAE5
Light
#FEAF9A
Red
#ED6347
Dark
#BF0711
Darker
#330101
Text
#583C35

Color combinations

Use the following as a guide for how and when to use colors from our palette together.

Do

Use any light background color with its corresponding text color button with light background and text color

background-color: color(orange, light);
color: color(orange, text);

Use any primary background color with white text button with primary background and white text

background-color: color(blue);
color: color(white);

Use white background with any dark text color button with white background and dark text

background-color: color(white);
color: color(red, dark);

Use any light background color with its corresponding primary color for an action button with light background and primary text color

background-color: color(yellow, light);
color: color(yellow, dark);

Use white background with any of our primary colors for an icon button with white background and primary color icon

background-color: color(white);
color: color(orange);

Don’t

Mix any color from the palette with a text color from a different part of the palette. button with mixed colors

background-color: color(yellow, light);
color: color(blue, text);

Use low contrast button with low contrast colors

background-color: color(blue, light);
color: color(white);

Use black as a background color button with black background

background-color: color(black);
color: color(white);

Use any dark color as a background button with dark background

background-color: color(red, dark);
color: color(white)

Color usage

The following is a set of specific guidelines for when and how to use each color in our palette.

Do

Use indigo for block highlights Diagram of indigo block highlights

Use indigo for buttons Diagram of indigo buttons

Use indigo for checkmarks and radio buttons Diagram of indigo checkmarks and radio buttons

Use indigo to highlight form fields Diagram of indigo highlight form fields

Don’t

Use indigo for text links Diagram of incorrect use of indigo text links

Indigo is used to signify states in Shopify. We use it for buttons, quick search, highlights on forms, selected checkmarks, and radio buttons.


Accessibility

It’s important for Shopify to meet all web accessibility standards, including the minimum contrast ratios that the WCAG 2.0 specifies for text and background colors according to their AA level.

Do

Minimal contrast ratio: 4.5

5.25
Grey on Black grey text on a black background

4.88
Dark Grey on White dark grey text on a white background

4.87
White on Indigo white text on an indigo background

6.16
Blue on Blue Light blue text on a light blue background

Don’t

Fail

2.94
Dark Grey on Black dark grey text on a black background

2.73
Grey on White grey text on a white background

1.70
White on Yellow white text on a yellow background

1.92
Blue on Blue blue text on a blue background

Exceptions to this rule

These examples in our visual language break this rule in favor of hierarchy or communication benefits.

2.95-3.70
Light over Dark light text on a dark button

Used to indicate importance.

2.2
White over Teal white text on a teal button

Supports documentation and shows new orders.


Resources

Download the UI kit and color palette to start designing with Shopify Polaris.