WPDS - Color | Foundations

Publish date: 2024-07-31

Table of contents

red

blue

green

orange

teal

gold

mustard

purple

pink

yellow

gray

0

20

40

60

80

100

200

300

400

500

600

700

Note: In the graphic, the number in each color swatch is the contrast against our background color. For accessibility, large text should have at least a 3:1 ratio for AA compliance, and small text should have at least 4.5:1 for AA and 7:1 for AAA compliance. See WCAG for details.

Introduction to Our Color Palette

Our color palette is designed to cater to the diverse needs of our product's design requirements, providing a comprehensive range of colors.

While our palette offers a variety of colors suitable for a wide array of applications within our product, we strongly recommend using our theme tokens. These tokens are specifically designed to ensure that colors are applied with the correct intention and assignment, particularly in contexts where light and dark themes are utilized.

How to Reference Color Tokens

Color tokens can be referenced by combining their color group and scale. This system allows for easy identification and application of color values within your projects. For example:

Note: The -static modifier preserves the color token's consistency across light and dark contexts. Its usage should be limited within the scope of our product to maintain design coherence.

Using our tokens in code

When you need to apply colors from the WPDS theme to your components, start by importing the theme object from the WPDS UI kit package. This enables you to use the theme's predefined color values in a type-safe manner, ensuring consistency across your application and adherence to the design system. For example:

import { theme } from "@washingtonpost/wpds-ui-kit"; theme.colors.background //Reference to the token

Theme and Semantic Tokens

Our theme tokens follow a semantic and predictable structure comprising three parts:

Definition

subtle*: The subtle modifier ensures that the color token remains the same color across light and dark contexts.

Primary (-hover)

onPrimary

onPrimary-hover

onPrimary-subtle

onPrimary-subtle-hover

Secondary

onSecondary

onSecondary-hover

onSecondary-subtle

onSecondary-subtle-hover

Cta

onCta

onCta-hover

ctaContainer

onCtaContainer

onCtaContainer-hover

onCtaContainer-subtle

onPortal-subtle-hover

Background

onBackground

onBackground-hover

onBackground-subtle

onBackground-subtle-hover

Background-forSurfaces

onBackground

onBackground-hover

onBackground-subtle

onBackground-subtle-hover

Surface

onSurface

onSurface-hover

onSurface-subtle

onSurface-subtle-hover

Surface-highest

onSurface

onSurface-hover

onSurface-subtle

onSurface-subtle-hover

Portal

onPortal

onPortal-hover

onPortal-subtle

onPortal-subtle-hover

errorContainer

onMessage

onMessage-hover

onMessage-subtle

onMessage-subtle-hover

Use error token only for non text elements when used on semantic container

successContainer

onMessage

onMessage-hover

onMessage-subtle

onMessage-subtle-hover

Use success token only for non text elements when used on semantic container

warningContainer

onMessage

onMessage-hover

onMessage-subtle

onMessage-subtle-hover

Use warning token only for non text elements when used on semantic container.

signalContainer

onMessage

onMessage-hover

onMessage-subtle

onMessage-subtle-hover

Use signal token only for non text elements when used on semantic container.

outline

Use outine token for borders on cards

outline-subtle

Use outine-subtle token for borders on cards

Color tokens

NamePreviewRGBAHEXDescription
alpha0rgba(0, 0, 0, .50)#000000a6-
alpha20rgba(0, 0, 0, .45)#00000073-
alpha40rgba(0, 0, 0, .40)#00000066-
alpha60rgba(0, 0, 0, .35)#00000059-
alpha80rgba(0, 0, 0, .30)#0000004f-
alpha100rgba(0, 0, 0, .25)#00000040-
alpha200rgba(0, 0, 0, .20)#00000033-
alpha300rgba(0, 0, 0, .15)#00000026-
alpha400rgba(0, 0, 0, .10)#0000001a-
alpha500rgba(0, 0, 0, .05)#0000000d-
alpha50rgba(0, 0, 0, .50)#00000080Legacy-Token subject to be deprecated use our new alpha tokens
alpha25rgba(0, 0, 0, .05)#0000000dLegacy-Token subject to be deprecated use our new alpha tokens
mustard600rgba(251, 241, 221, 1)#fbf1dd-
mustard500rgba(254, 227, 156, 1)#fee39c-
mustard400rgba(247, 202, 111, 1)#f7ca6f-
mustard300rgba(235, 179, 71, 1)#ebb347-
mustard200rgba(217, 158, 32, 1)#d99e20-
mustard100rgba(226, 163, 31, 1)#e2a31f-
mustard80rgba(193, 139, 0, 1)#c18b00-
mustard60rgba(145, 104, 2, 1)#916802-
mustard40rgba(100, 72, 1, 1)#644801-
yellow600rgba(253, 250, 219, 1)#fdfadb-
yellow100rgba(255, 236, 68, 1)#ffec44-
gold600rgba(250, 240, 227, 1)#faf0e3-
gold500rgba(243, 228, 205, 1)#f3e4cd-
gold400rgba(232, 203, 164, 1)#e8cba4-
gold300rgba(222, 181, 126, 1)#deb57e-
gold200rgba(211, 158, 76, 1)#d39e4c-
gold100rgba(229, 160, 56, 1)#e5a038-
gold80rgba(194, 136, 47, 1)#c2882f-
gold60rgba(158, 97, 5, 1)#9e6105-
gold40rgba(109, 69, 8, 1)#6d4508-
green600rgba(238, 249, 234, 1)#eef9ea-
green500rgba(213, 237, 202, 1)#d5edca-
green400rgba(178, 214, 160, 1)#b2d6a0-
green300rgba(145, 192, 120, 1)#91c078-
green200rgba(110, 169, 81, 1)#6ea951-
green100rgba(54, 167, 92, 1)#36a75c-
green80rgba(73, 147, 39, 1)#499327-
green60rgba(56, 113, 30, 1)#38711e-
green40rgba(40, 81, 21, 1)#285115-
orange600rgba(255, 239, 224, 1)#ffefe0-
orange500rgba(251, 225, 195, 1)#fbe1c3-
orange400rgba(249, 194, 150, 1)#f9c296-
orange300rgba(241, 162, 106, 1)#f1a26a-
orange200rgba(230, 130, 61, 1)#e6823d-
orange100rgba(243, 117, 14, 1)#f3750e-
orange80rgba(216, 97, 0, 1)#d86100-
orange60rgba(166, 74, 0, 1)#a64a00-
orange40rgba(118, 53, 2, 1)#763502-
teal600rgba(234, 251, 254, 1)#eafbfe-
teal500rgba(199, 234, 239, 1)#c7eaef-
teal400rgba(159, 203, 211, 1)#9fcbd3-
teal300rgba(118, 172, 182, 1)#76acb6-
teal200rgba(74, 142, 155, 1)#4a8e9b-
teal100rgba(3, 175, 202, 1)#03afca-
teal80rgba(15, 113, 128, 1)#0f7180-
teal60rgba(15, 84, 95, 1)#0f545f-
teal40rgba(11, 57, 64, 1)#0b3940-
purple600rgba(250, 238, 249, 1)#faeef9-
purple500rgba(248, 221, 244, 1)#f8ddf4-
purple400rgba(234, 179, 223, 1)#eab3df-
purple300rgba(217, 137, 201, 1)#d989c9-
purple200rgba(201, 92, 182, 1)#c95cb6-
purple100rgba(209, 56, 191, 1)#d138bf-
purple80rgba(182, 35, 161, 1)#b623a1-
purple60rgba(136, 27, 121, 1)#881b79-
purple40rgba(93, 18, 84, 1)#5d1254-
pink600rgba(252, 233, 239, 1)#fce9ef-
pink500rgba(249, 222, 231, 1)#f9dee7-
pink400rgba(239, 180, 191, 1)#efb4bf-
pink300rgba(228, 138, 155, 1)#e48a9b-
pink200rgba(213, 94, 119, 1)#d55e77-
pink100rgba(255, 79, 131, 1)#ff4f83-
pink80rgba(195, 39, 85, 1)#c32755-
pink60rgba(149, 25, 64, 1)#951940-
pink40rgba(105, 11, 44, 1)#690b2c-
red600rgba(253, 231, 231, 1)#fde7e7-
red500rgba(249, 221, 219, 1)#f9dddb-
red400rgba(242, 180, 171, 1)#f2b4ab-
red300rgba(229, 138, 124, 1)#e58a7c-
red200rgba(211, 95, 79, 1)#d35f4f-
red100rgba(234, 0, 23, 1)#ea0017-
red80rgba(190, 44, 37, 1)#be2c25-
red60rgba(142, 31, 27, 1)#8e1f1b-
red40rgba(99, 16, 14, 1)#63100e-
blue600rgba(231, 240, 254, 1)#e7f0fe-
blue500rgba(211, 231, 250, 1)#d3e7fa-
blue400rgba(172, 197, 231, 1)#acc5e7-
blue300rgba(132, 164, 214, 1)#84a4d6-
blue200rgba(87, 132, 197, 1)#5784c5-
blue100rgba(22, 109, 252, 1)#166dfc-
blue80rgba(19, 102, 179, 1)#1366b3-
blue60rgba(15, 75, 132, 1)#0f4b84-
blue40rgba(10, 50, 88, 1)#0a3258-
gray700rgba(255, 255, 255, 1)#ffffff-
gray600rgba(247, 247, 247, 1)#f7f7f7-
gray500rgba(240, 240, 240, 1)#f0f0f0-
gray400rgba(233, 233, 233, 1)#e9e9e9-
gray300rgba(212, 212, 212, 1)#d4d4d4-
gray200rgba(170, 170, 170, 1)#aaaaaa-
gray100rgba(115, 115, 115, 1)#737373-
gray80rgba(89, 89, 89, 1)#595959Previously #66666 updated to aim for AAA contrast on target background
gray60rgba(73, 73, 73, 1)#494949-
gray40rgba(42, 42, 42, 1)#2a2a2a-
gray20rgba(17, 17, 17, 1)#111111-
gray0rgba(0, 0, 0, 1)#000000-
alpha0-staticrgba(0, 0, 0, .65)#000000a6-
alpha20-staticrgba(0, 0, 0, .45)#00000073-
alpha40-staticrgba(0, 0, 0, .40)#00000066-
alpha60-staticrgba(0, 0, 0, .35)#00000059-
alpha80-staticrgba(0, 0, 0, .30)#0000004f-
alpha100-staticrgba(0, 0, 0, .25)#00000040-
alpha200-staticrgba(0, 0, 0, .20)#00000033-
alpha300-staticrgba(0, 0, 0, .15)#00000026-
alpha400-staticrgba(0, 0, 0, .10)#0000001a-
alpha500-staticrgba(0, 0, 0, .05)#0000000d-
alpha50-staticrgba(0, 0, 0, .50)#00000080Legacy-Token subject to be deprecated use our new alpha tokens
alpha25-staticrgba(0, 0, 0, .05)#0000000dLegacy-Token subject to be deprecated use our new alpha tokens
mustard600-staticrgba(251, 241, 221, 1)#fbf1dd-
mustard500-staticrgba(254, 227, 156, 1)#fee39c-
mustard400-staticrgba(247, 202, 111, 1)#f7ca6f-
mustard300-staticrgba(235, 179, 71, 1)#ebb347-
mustard200-staticrgba(217, 158, 32, 1)#d99e20-
mustard100-staticrgba(226, 163, 31, 1)#e2a31f-
mustard80-staticrgba(193, 139, 0, 1)#c18b00-
mustard60-staticrgba(145, 104, 2, 1)#916802-
mustard40-staticrgba(100, 72, 1, 1)#644801-
yellow600-staticrgba(253, 250, 219, 1)#fdfadb-
yellow100-staticrgba(255, 236, 68, 1)#ffec44-
gold600-staticrgba(250, 240, 227, 1)#faf0e3-
gold500-staticrgba(243, 228, 205, 1)#f3e4cd-
gold400-staticrgba(232, 203, 164, 1)#e8cba4-
gold300-staticrgba(222, 181, 126, 1)#deb57e-
gold200-staticrgba(211, 158, 76, 1)#d39e4c-
gold100-staticrgba(229, 160, 56, 1)#e5a038-
gold80-staticrgba(194, 136, 47, 1)#c2882f-
gold60-staticrgba(158, 97, 5, 1)#9e6105-
gold40-staticrgba(109, 69, 8, 1)#6d4508-
green600-staticrgba(238, 249, 234, 1)#eef9ea-
green500-staticrgba(213, 237, 202, 1)#d5edca-
green400-staticrgba(178, 214, 160, 1)#b2d6a0-
green300-staticrgba(145, 192, 120, 1)#91c078-
green200-staticrgba(110, 169, 81, 1)#6ea951-
green100-staticrgba(54, 167, 92, 1)#36a75c-
green80-staticrgba(73, 147, 39, 1)#499327-
green60-staticrgba(56, 113, 30, 1)#38711e-
green40-staticrgba(40, 81, 21, 1)#285115-
orange600-staticrgba(255, 239, 224, 1)#ffefe0-
orange500-staticrgba(251, 225, 195, 1)#fbe1c3-
orange400-staticrgba(249, 194, 150, 1)#f9c296-
orange300-staticrgba(241, 162, 106, 1)#f1a26a-
orange200-staticrgba(230, 130, 61, 1)#e6823d-
orange100-staticrgba(243, 117, 14, 1)#f3750e-
orange80-staticrgba(216, 97, 0, 1)#d86100-
orange60-staticrgba(166, 74, 0, 1)#a64a00-
orange40-staticrgba(118, 53, 2, 1)#763502-
teal600-staticrgba(234, 251, 254, 1)#eafbfe-
teal500-staticrgba(199, 234, 239, 1)#c7eaef-
teal400-staticrgba(159, 203, 211, 1)#9fcbd3-
teal300-staticrgba(118, 172, 182, 1)#76acb6-
teal200-staticrgba(74, 142, 155, 1)#4a8e9b-
teal100-staticrgba(3, 175, 202, 1)#03afca-
teal80-staticrgba(15, 113, 128, 1)#0f7180-
teal60-staticrgba(15, 84, 95, 1)#0f545f-
teal40-staticrgba(11, 57, 64, 1)#0b3940-
purple600-staticrgba(250, 238, 249, 1)#faeef9-
purple500-staticrgba(248, 221, 244, 1)#f8ddf4-
purple400-staticrgba(234, 179, 223, 1)#eab3df-
purple300-staticrgba(217, 137, 201, 1)#d989c9-
purple200-staticrgba(201, 92, 182, 1)#c95cb6-
purple100-staticrgba(209, 56, 191, 1)#d138bf-
purple80-staticrgba(182, 35, 161, 1)#b623a1-
purple60-staticrgba(136, 27, 121, 1)#881b79-
purple40-staticrgba(93, 18, 84, 1)#5d1254-
pink600-staticrgba(252, 233, 239, 1)#fce9ef-
pink500-staticrgba(249, 222, 231, 1)#f9dee7-
pink400-staticrgba(239, 180, 191, 1)#efb4bf-
pink300-staticrgba(228, 138, 155, 1)#e48a9b-
pink200-staticrgba(213, 94, 119, 1)#d55e77-
pink100-staticrgba(255, 79, 131, 1)#ff4f83-
pink80-staticrgba(195, 39, 85, 1)#c32755-
pink60-staticrgba(149, 25, 64, 1)#951940-
pink40-staticrgba(105, 11, 44, 1)#690b2c-
red600-staticrgba(253, 231, 231, 1)#fde7e7-
red500-staticrgba(249, 221, 219, 1)#f9dddb-
red400-staticrgba(242, 180, 171, 1)#f2b4ab-
red300-staticrgba(229, 138, 124, 1)#e58a7c-
red200-staticrgba(211, 95, 79, 1)#d35f4f-
red100-staticrgba(234, 0, 23, 1)#ea0017-
red80-staticrgba(190, 44, 37, 1)#be2c25-
red60-staticrgba(142, 31, 27, 1)#8e1f1b-
red40-staticrgba(99, 16, 14, 1)#63100e-
blue600-staticrgba(231, 240, 254, 1)#e7f0fe-
blue500-staticrgba(211, 231, 250, 1)#d3e7fa-
blue400-staticrgba(172, 197, 231, 1)#acc5e7-
blue300-staticrgba(132, 164, 214, 1)#84a4d6-
blue200-staticrgba(87, 132, 197, 1)#5784c5-
blue100-staticrgba(22, 109, 252, 1)#166dfc-
blue80-staticrgba(19, 102, 179, 1)#1366b3-
blue60-staticrgba(15, 75, 132, 1)#0f4b84-
blue40-staticrgba(10, 50, 88, 1)#0a3258-
gray700-staticrgba(255, 255, 255, 1)#ffffff-
gray600-staticrgba(247, 247, 247, 1)#f7f7f7-
gray500-staticrgba(240, 240, 240, 1)#f0f0f0-
gray400-staticrgba(233, 233, 233, 1)#e9e9e9-
gray300-staticrgba(212, 212, 212, 1)#d4d4d4-
gray200-staticrgba(170, 170, 170, 1)#aaaaaa-
gray100-staticrgba(115, 115, 115, 1)#737373-
gray80-staticrgba(89, 89, 89, 1)#595959Previously #66666 updated to aim for AAA contrast on target background
gray60-staticrgba(73, 73, 73, 1)#494949-
gray40-staticrgba(42, 42, 42, 1)#2a2a2a-
gray20-staticrgba(17, 17, 17, 1)#111111-
gray0-staticrgba(0, 0, 0, 1)#000000-
errorContainerrgba(253, 231, 231, 1)#fde7e7-
errorrgba(211, 95, 79, 1)#d35f4f-
warningContainerrgba(255, 239, 224, 1)#ffefe0-
warningrgba(230, 130, 61, 1)#e6823d-
successContainerrgba(238, 249, 234, 1)#eef9ea-
successrgba(73, 147, 39, 1)#499327-
signalContainerrgba(231, 240, 254, 1)#e7f0fe-
signalrgba(87, 132, 197, 1)#5784c5-
onMessage-subtle-hoverrgba(89, 89, 89, 1)#595959-
onMessage-subtlergba(73, 73, 73, 1)#494949-
onMessage-hoverrgba(89, 89, 89, 1)#595959-
onMessagergba(17, 17, 17, 1)#111111-
portalrgba(255, 255, 255, 1)#ffffff-
onPortal-subtle-hoverrgba(115, 115, 115, 1)#737373-
onPortal-subtlergba(89, 89, 89, 1)#595959-
onPortal-hoverrgba(115, 115, 115, 1)#737373-
onPortalrgba(17, 17, 17, 1)#111111-
onSurface-subtle-hoverrgba(115, 115, 115, 1)#737373-
onSurface-subtlergba(89, 89, 89, 1)#595959-
onSurface-hoverrgba(115, 115, 115, 1)#737373-
onSurfacergba(17, 17, 17, 1)#111111-
surface-highestrgba(255, 255, 255, 1)#ffffff-
surfacergba(255, 255, 255, 1)#ffffff-
onBackground-subtle-hoverrgba(115, 115, 115, 1)#737373-
onBackground-subtlergba(89, 89, 89, 1)#595959-
onBackground-hoverrgba(115, 115, 115, 1)#737373-
onBackgroundrgba(17, 17, 17, 1)#111111-
background-forSurfacesrgba(247, 247, 247, 1)#f7f7f7-
backgroundrgba(255, 255, 255, 1)#ffffff-
accessiblergba(89, 89, 89, 1)#595959Legacy-Token subject to be deprecated use the appropriate -subtle token
outline-subtlergba(0, 0, 0, .05)#0000000d-
outlinergba(0, 0, 0, .10)#0000001a-
subtlergba(212, 212, 212, 1)#d4d4d4Legacy-Token subject to be deprecated use the outline token
faintrgba(233, 233, 233, 1)#e9e9e9Legacy-Token subject to be deprecated use the outline token
onDisabledrgba(0, 0, 0, .30)#0000004f-
disabledrgba(0, 0, 0, .05)#0000000d-
onCtaContainer-subtle-hoverrgba(89, 89, 89, 1)#595959-
onCtaContainer-subtlergba(73, 73, 73, 1)#494949-
onCtaContainer-hoverrgba(89, 89, 89, 1)#595959-
onCtaContainerrgba(17, 17, 17, 1)#111111-
ctaContainerrgba(231, 240, 254, 1)#e7f0fe-
onCta-hover-
onCta-
cta-hoverrgba(19, 102, 179, 1)#1366b3-
ctargba(22, 109, 252, 1)#166dfc-
onSecondary-subtle-hoverrgba(115, 115, 115, 1)#737373-
onSecondary-subtlergba(89, 89, 89, 1)#595959-
onSecondary-hoverrgba(115, 115, 115, 1)#737373-
onSecondaryrgba(17, 17, 17, 1)#111111-
secondary-hoverrgba(240, 240, 240, 1)#f0f0f0-
secondaryrgba(255, 255, 255, 1)#ffffff-
onPrimary-subtle-hoverrgba(170, 170, 170, 1)#aaaaaa-
onPrimary-subtlergba(212, 212, 212, 1)#d4d4d4-
onPrimary-hoverrgba(170, 170, 170, 1)#aaaaaa-
onPrimaryrgba(255, 255, 255, 1)#ffffff-
primary-hoverrgba(42, 42, 42, 1)#2a2a2a-
primaryrgba(17, 17, 17, 1)#111111-

ncG1vNJzZmiapZ65pXrWmqqhoZ6cwbC6z6iqrWaTpLpwss6upZ2ZpJ68r7%2BOnKalp6I%3D