Color palette

Our color palettes are shared between Brand and Gestalt, and represent our full range of options. The colors are divided into baseline, extended, and reserved colors.

For further Brand guidance, please reference the Brand guidelines website.

Baseline colors

Our baseline palette helps to create consistency across products.
The baseline palette is comprised of our hero and neutrals colors, allowing the Pinterest content to shine, while ensuring enough color contrast. In addition, the colors used serve specific purposes in order to provide a better user experience. Check out Color Usage for more details about their intended usage.

Light mode

Pushpin 450

#E60023

Cosmicore 900

#111111

Skycicle 500

#0074E8

Roboflow 500

#767676

Roboflow 200

#E9E9E9

Mochimalist 0

#FFFFFF

Dark mode

Pushpin 450

#E60023

Mochimalist 0

#FFFFFF

Skycicle 300

#75BFFF

Roboflow 300

#CDCDCD

Roboflow 500

#767676

Cosmicore 900

#111111

Reserved colors

The 450 colors are primarily reserved for Brand usage as they are among the least accessible colors. This set works best within larger brand moments, and is not commonly used for functional color pairings. While Pushpin 450 is our hero, primary product color, please only use other 450 colors when absolutely necessary while maintaining accessibility.

Pushpin 450

#E60023

Flaminglow 450

#EE376A

Skycicle 450

#007CFF

Spabattical 450

#009990

Matchacado 450

#1DAD65

Mysticool 450

#8A39FA

Firetini 450

#FF5B45

Caramellow 450

#D86800

Extended palette

The extended color palette displays all the available shades and tints of each color in the palette. The colors are named and numbered for easy reference. The usage of these colors varies depending on the product needs, but they come in handy for illustrations, communicating status, and brand moments.

We aim to meet WCAG 2.1 AA accessibility standards, and in order to ensure accessible contrast for color pairings, we require our darkGray Text color to be used for any colors 400 and below. For 500 and above, we recommend using white.

Colors

Pinterest name (common name)

Pushpin (red)

#FFF7F7

#FFEBEB

100

#FFE0E0

200

#FCBBBB

300

#F47171

400

#EB4242

500

#CC0000

600

#B60000

700

#9B0000

800

#800000

900

#660000

Flaminglow (pink)

#FFF8FA

#FFEBF1

100

#FFDFE9

200

#FFBED2

300

#FE8EB1

400

#F76593

500

#DE2C62

600

#C31952

700

#A30C4A

800

#82053E

900

#630233

Skycicle (blue)

#F7FBFF

#E6F4FF

100

#D7EDFF

200

#ABDBFF

300

#75BFFF

400

#45A3FE

500

#0074E8

600

#005FCB

700

#004BA9

800

#003C96

900

#002966

Spabattical (teal)

#F7FDFC

#E6FAF5

100

#CCF6EE

200

#75E4D5

300

#48D5C6

400

#26C0B4

500

#00857C

600

#006B6C

700

#005C62

800

#005062

900

#003440

Matchacado (green)

#F6FDF5

#E3FAE1

100

#C3F9C2

200

#A4F9AC

300

#6BEC8C

400

#39D377

500

#008753

600

#005F3E

700

#00422C

800

#003020

900

#00261A

Mysticool (purple)

#F8F7FF

#F0EDFF

100

#E9E4FF

200

#D5C7FF

300

#B190FF

400

#9E68FF

500

#812AE7

600

#6B16CA

700

#550AA9

800

#400387

900

#2C0066

Firetini (orange)

#FFF6EB

#FFF0DB

100

#FFE4C1

200

#FFC58F

300

#FDA161

400

#F77A38

500

#DE3700

600

#C32F00

700

#A42700

800

#842000

900

#660E00

Caramellow (yellow)

#FFFEDB

#FFFEBB

100

#FFFD92

200

#FAE600

300

#FDC900

400

#E18D00

500

#BD5B00

600

#AA4900

700

#943A00

800

#7C2D00

900

#662400

Neutrals

Pinterest name (common name)

Mochimalist (white)

#FFFFFF

Roboflow (gray)

#F9F9F9

100

#F1F1F1

200

#E9E9E9

300

#CDCDCD

400

#A5A5A5

500

#767676

550

#5F5F5F

600

#4A4A4A

700

#2B2B2B

800

#191919

Cosmicore (black)

900

#111111

Transparent

(common name)

transparent (transparent)

transparent

RGBA(0, 0, 0, 0)

Colors in code

The full extended palette of colors (colors, neutrals, and transparent) are the foundational elements of our color system or base color tokens. Base tokens are the lowest level tokens, which map directly to a value. Base tokens would likely be internal only and used to build our semantic design tokens.

The full extended palette is available through design tokens and follow the naming pattern of color-{common_name}-{pinterest_name}-{number}. For example:

CSS var(--color-pink-flaminglow-400)

The transparent color is just color-transparent.

Using colors that are not available through our semantic design tokens and components directly is considered an anti-pattern and should be avoided whenever possible. If it's absolutely necessary, a hack on Box can be used.

Edit page on GitHub