Skip to main content
Design system

Color

Color token values are defined by their context. There are two contexts we currently support a "light" and "dark" context. Toggle the sun/moon in the top right of the site to see each context.

Table of contents


red
spark
orange
mustard
gold
yellow
green
teal
blue
purple
pink
gray
0
20
40
60
80
100
200
300
400
500
600
700
13.04
8.89
5.87
4.66
3.80
2.54
1.77
1.28
1.18
14.71
6.52
4.73
3.32
2.72
2.29
1.58
1.27
1.07
9.21
5.83
3.73
2.85
2.75
2.08
1.59
1.26
1.12
8.50
5.02
3.02
2.21
2.37
1.90
1.54
1.26
1.12
8.38
5.04
3.06
2.23
2.40
1.91
1.55
1.25
1.13
1.21
1.06
9.22
5.92
3.83
3.07
2.82
2.10
1.61
1.25
1.08
12.55
8.56
5.68
2.63
3.73
2.52
1.76
1.28
1.06
13.04
8.90
5.87
4.54
3.81
2.54
1.77
1.27
1.15
12.50
8.47
5.61
4.18
3.69
2.51
1.75
1.26
1.13
12.46
8.43
5.61
3.14
3.69
2.50
1.76
1.26
1.16
21.00
18.88
14.35
9.00
7.00
4.74
2.32
1.48
1.21
1.14
1.07
1.00

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:

  • gray100
  • red300
  • teal600

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:

  • Role: This defines the purpose of the token within the UI.
  • Modifier (Optional): This denotes a variant, change, or subset of the role, such as -subtle*.
  • State (Optional): This indicates the token's state within the UI.

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 (-hover)
onSecondary
onSecondary-hover
onSecondary-subtle
onSecondary-subtle-hover
Cta (-hover)
onCta
onCta-hover
ctaContainer
onCtaContainer
onCtaContainer-hover
onCtaContainer-subtle
onPortal-subtle-hover
Opinions (-hover)
onOpinons
onOpinons-hover
opinionsContainer
onOpinionsContainer
onOpinons-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

Search token by name
NamePreviewRGBAHEXDescription
alpha0
rgba(0, 0, 0, .50)#000000a6-
alpha20
rgba(0, 0, 0, .45)#00000073-
alpha40
rgba(0, 0, 0, .40)#00000066-
alpha60
rgba(0, 0, 0, .35)#00000059-
alpha80
rgba(0, 0, 0, .30)#0000004f-
alpha100
rgba(0, 0, 0, .25)#00000040-
alpha200
rgba(0, 0, 0, .20)#00000033-
alpha300
rgba(0, 0, 0, .15)#00000026-
alpha400
rgba(0, 0, 0, .10)#0000001a-
alpha500
rgba(0, 0, 0, .05)#0000000d-
alpha50
rgba(0, 0, 0, .50)#00000080Legacy-Token subject to be deprecated use our new alpha tokens
alpha25
rgba(0, 0, 0, .05)#0000000dLegacy-Token subject to be deprecated use our new alpha tokens
red600
rgba(253, 231, 231, 1)#fde7e7-
red500
rgba(249, 221, 219, 1)#f9dddb-
red400
rgba(242, 180, 171, 1)#f2b4ab-
red300
rgba(229, 138, 124, 1)#e58a7c-
red200
rgba(211, 95, 79, 1)#d35f4f-
red100
rgba(234, 0, 23, 1)#ea0017-
red80
rgba(190, 44, 37, 1)#be2c25-
red60
rgba(142, 31, 27, 1)#8e1f1b-
red40
rgba(99, 16, 14, 1)#63100e-
spark600
rgba(255, 246, 241, 1)#FFF6F1-
spark500
rgba(255, 222, 204, 1)#FFDECC-
spark400
rgba(255, 191, 173, 1)#FFBFAD-
spark300
rgba(254, 140, 108, 1)#FE8C6C-
spark200
rgba(254, 114, 76, 1)#FE724C-
spark100
rgba(254, 78, 29, 1)#FE4E1D-
spark80
rgba(219, 48, 1, 1)#DB3001-
spark60
rgba(179, 40, 1, 1)#B32801-
spark40
rgba(80, 18, 0, 1)#501200-
orange600
rgba(255, 239, 224, 1)#ffefe0-
orange500
rgba(251, 225, 195, 1)#fbe1c3-
orange400
rgba(249, 194, 150, 1)#f9c296-
orange300
rgba(241, 162, 106, 1)#f1a26a-
orange200
rgba(230, 130, 61, 1)#e6823d-
orange100
rgba(243, 117, 14, 1)#f3750e-
orange80
rgba(216, 97, 0, 1)#d86100-
orange60
rgba(166, 74, 0, 1)#a64a00-
orange40
rgba(118, 53, 2, 1)#763502-
mustard600
rgba(251, 241, 221, 1)#fbf1dd-
mustard500
rgba(254, 227, 156, 1)#fee39c-
mustard400
rgba(247, 202, 111, 1)#f7ca6f-
mustard300
rgba(235, 179, 71, 1)#ebb347-
mustard200
rgba(217, 158, 32, 1)#d99e20-
mustard100
rgba(226, 163, 31, 1)#e2a31f-
mustard80
rgba(193, 139, 0, 1)#c18b00-
mustard60
rgba(145, 104, 2, 1)#916802-
mustard40
rgba(100, 72, 1, 1)#644801-
gold600
rgba(250, 240, 227, 1)#faf0e3-
gold500
rgba(243, 228, 205, 1)#f3e4cd-
gold400
rgba(232, 203, 164, 1)#e8cba4-
gold300
rgba(222, 181, 126, 1)#deb57e-
gold200
rgba(211, 158, 76, 1)#d39e4c-
gold100
rgba(229, 160, 56, 1)#e5a038-
gold80
rgba(194, 136, 47, 1)#c2882f-
gold60
rgba(158, 97, 5, 1)#9e6105-
gold40
rgba(109, 69, 8, 1)#6d4508-
yellow600
rgba(253, 250, 219, 1)#fdfadb-
yellow100
rgba(255, 236, 68, 1)#ffec44-
green600
rgba(238, 249, 234, 1)#eef9ea-
green500
rgba(213, 237, 202, 1)#d5edca-
green400
rgba(178, 214, 160, 1)#b2d6a0-
green300
rgba(145, 192, 120, 1)#91c078-
green200
rgba(110, 169, 81, 1)#6ea951-
green100
rgba(54, 167, 92, 1)#36a75c-
green80
rgba(73, 147, 39, 1)#499327-
green60
rgba(56, 113, 30, 1)#38711e-
green40
rgba(40, 81, 21, 1)#285115-
teal600
rgba(234, 251, 254, 1)#eafbfe-
teal500
rgba(199, 234, 239, 1)#c7eaef-
teal400
rgba(159, 203, 211, 1)#9fcbd3-
teal300
rgba(118, 172, 182, 1)#76acb6-
teal200
rgba(74, 142, 155, 1)#4a8e9b-
teal100
rgba(3, 175, 202, 1)#03afca-
teal80
rgba(15, 113, 128, 1)#0f7180-
teal60
rgba(15, 84, 95, 1)#0f545f-
teal40
rgba(11, 57, 64, 1)#0b3940-
blue600
rgba(231, 240, 254, 1)#e7f0fe-
blue500
rgba(211, 231, 250, 1)#d3e7fa-
blue400
rgba(172, 197, 231, 1)#acc5e7-
blue300
rgba(132, 164, 214, 1)#84a4d6-
blue200
rgba(87, 132, 197, 1)#5784c5-
blue100
rgba(22, 109, 252, 1)#166dfc-
blue80
rgba(19, 102, 179, 1)#1366b3-
blue60
rgba(15, 75, 132, 1)#0f4b84-
blue40
rgba(10, 50, 88, 1)#0a3258-
purple600
rgba(250, 238, 249, 1)#faeef9-
purple500
rgba(248, 221, 244, 1)#f8ddf4-
purple400
rgba(234, 179, 223, 1)#eab3df-
purple300
rgba(217, 137, 201, 1)#d989c9-
purple200
rgba(201, 92, 182, 1)#c95cb6-
purple100
rgba(209, 56, 191, 1)#d138bf-
purple80
rgba(182, 35, 161, 1)#b623a1-
purple60
rgba(136, 27, 121, 1)#881b79-
purple40
rgba(93, 18, 84, 1)#5d1254-
pink600
rgba(252, 233, 239, 1)#fce9ef-
pink500
rgba(249, 222, 231, 1)#f9dee7-
pink400
rgba(239, 180, 191, 1)#efb4bf-
pink300
rgba(228, 138, 155, 1)#e48a9b-
pink200
rgba(213, 94, 119, 1)#d55e77-
pink100
rgba(255, 79, 131, 1)#ff4f83-
pink80
rgba(195, 39, 85, 1)#c32755-
pink60
rgba(149, 25, 64, 1)#951940-
pink40
rgba(105, 11, 44, 1)#690b2c-
gray700
rgba(255, 255, 255, 1)#ffffff-
gray600
rgba(247, 247, 247, 1)#f7f7f7-
gray500
rgba(240, 240, 240, 1)#f0f0f0-
gray400
rgba(233, 233, 233, 1)#e9e9e9-
gray300
rgba(212, 212, 212, 1)#d4d4d4-
gray200
rgba(170, 170, 170, 1)#aaaaaa-
gray100
rgba(115, 115, 115, 1)#737373-
gray80
rgba(89, 89, 89, 1)#595959Previously #66666 updated to aim for AAA contrast on target background
gray60
rgba(73, 73, 73, 1)#494949-
gray40
rgba(42, 42, 42, 1)#2a2a2a-
gray20
rgba(17, 17, 17, 1)#111111-
gray0
rgba(0, 0, 0, 1)#000000-
alpha0-static
rgba(0, 0, 0, .65)#000000a6-
alpha20-static
rgba(0, 0, 0, .45)#00000073-
alpha40-static
rgba(0, 0, 0, .40)#00000066-
alpha60-static
rgba(0, 0, 0, .35)#00000059-
alpha80-static
rgba(0, 0, 0, .30)#0000004f-
alpha100-static
rgba(0, 0, 0, .25)#00000040-
alpha200-static
rgba(0, 0, 0, .20)#00000033-
alpha300-static
rgba(0, 0, 0, .15)#00000026-
alpha400-static
rgba(0, 0, 0, .10)#0000001a-
alpha500-static
rgba(0, 0, 0, .05)#0000000d-
alpha50-static
rgba(0, 0, 0, .50)#00000080Legacy-Token subject to be deprecated use our new alpha tokens
alpha25-static
rgba(0, 0, 0, .05)#0000000dLegacy-Token subject to be deprecated use our new alpha tokens
red600-static
rgba(253, 231, 231, 1)#fde7e7-
red500-static
rgba(249, 221, 219, 1)#f9dddb-
red400-static
rgba(242, 180, 171, 1)#f2b4ab-
red300-static
rgba(229, 138, 124, 1)#e58a7c-
red200-static
rgba(211, 95, 79, 1)#d35f4f-
red100-static
rgba(234, 0, 23, 1)#ea0017-
red80-static
rgba(190, 44, 37, 1)#be2c25-
red60-static
rgba(142, 31, 27, 1)#8e1f1b-
red40-static
rgba(99, 16, 14, 1)#63100e-
spark600-static
rgba(255, 246, 241, 1)#FFF6F1-
spark500-static
rgba(255, 222, 204, 1)#FFDECC-
spark400-static
rgba(255, 191, 173, 1)#FFBFAD-
spark300-static
rgba(254, 140, 108, 1)#FE8C6C-
spark200-static
rgba(254, 114, 76, 1)#FE724C-
spark100-static
rgba(254, 78, 29, 1)#FE4E1D-
spark80-static
rgba(219, 48, 1, 1)#DB3001-
spark60-static
rgba(179, 40, 1, 1)#B32801-
spark40-static
rgba(80, 18, 0, 1)#501200-
orange600-static
rgba(255, 239, 224, 1)#ffefe0-
orange500-static
rgba(251, 225, 195, 1)#fbe1c3-
orange400-static
rgba(249, 194, 150, 1)#f9c296-
orange300-static
rgba(241, 162, 106, 1)#f1a26a-
orange200-static
rgba(230, 130, 61, 1)#e6823d-
orange100-static
rgba(243, 117, 14, 1)#f3750e-
orange80-static
rgba(216, 97, 0, 1)#d86100-
orange60-static
rgba(166, 74, 0, 1)#a64a00-
orange40-static
rgba(118, 53, 2, 1)#763502-
mustard600-static
rgba(251, 241, 221, 1)#fbf1dd-
mustard500-static
rgba(254, 227, 156, 1)#fee39c-
mustard400-static
rgba(247, 202, 111, 1)#f7ca6f-
mustard300-static
rgba(235, 179, 71, 1)#ebb347-
mustard200-static
rgba(217, 158, 32, 1)#d99e20-
mustard100-static
rgba(226, 163, 31, 1)#e2a31f-
mustard80-static
rgba(193, 139, 0, 1)#c18b00-
mustard60-static
rgba(145, 104, 2, 1)#916802-
mustard40-static
rgba(100, 72, 1, 1)#644801-
gold600-static
rgba(250, 240, 227, 1)#faf0e3-
gold500-static
rgba(243, 228, 205, 1)#f3e4cd-
gold400-static
rgba(232, 203, 164, 1)#e8cba4-
gold300-static
rgba(222, 181, 126, 1)#deb57e-
gold200-static
rgba(211, 158, 76, 1)#d39e4c-
gold100-static
rgba(229, 160, 56, 1)#e5a038-
gold80-static
rgba(194, 136, 47, 1)#c2882f-
gold60-static
rgba(158, 97, 5, 1)#9e6105-
gold40-static
rgba(109, 69, 8, 1)#6d4508-
yellow600-static
rgba(253, 250, 219, 1)#fdfadb-
yellow100-static
rgba(255, 236, 68, 1)#ffec44-
green600-static
rgba(238, 249, 234, 1)#eef9ea-
green500-static
rgba(213, 237, 202, 1)#d5edca-
green400-static
rgba(178, 214, 160, 1)#b2d6a0-
green300-static
rgba(145, 192, 120, 1)#91c078-
green200-static
rgba(110, 169, 81, 1)#6ea951-
green100-static
rgba(54, 167, 92, 1)#36a75c-
green80-static
rgba(73, 147, 39, 1)#499327-
green60-static
rgba(56, 113, 30, 1)#38711e-
green40-static
rgba(40, 81, 21, 1)#285115-
teal600-static
rgba(234, 251, 254, 1)#eafbfe-
teal500-static
rgba(199, 234, 239, 1)#c7eaef-
teal400-static
rgba(159, 203, 211, 1)#9fcbd3-
teal300-static
rgba(118, 172, 182, 1)#76acb6-
teal200-static
rgba(74, 142, 155, 1)#4a8e9b-
teal100-static
rgba(3, 175, 202, 1)#03afca-
teal80-static
rgba(15, 113, 128, 1)#0f7180-
teal60-static
rgba(15, 84, 95, 1)#0f545f-
teal40-static
rgba(11, 57, 64, 1)#0b3940-
blue600-static
rgba(231, 240, 254, 1)#e7f0fe-
blue500-static
rgba(211, 231, 250, 1)#d3e7fa-
blue400-static
rgba(172, 197, 231, 1)#acc5e7-
blue300-static
rgba(132, 164, 214, 1)#84a4d6-
blue200-static
rgba(87, 132, 197, 1)#5784c5-
blue100-static
rgba(22, 109, 252, 1)#166dfc-
blue80-static
rgba(19, 102, 179, 1)#1366b3-
blue60-static
rgba(15, 75, 132, 1)#0f4b84-
blue40-static
rgba(10, 50, 88, 1)#0a3258-
purple600-static
rgba(250, 238, 249, 1)#faeef9-
purple500-static
rgba(248, 221, 244, 1)#f8ddf4-
purple400-static
rgba(234, 179, 223, 1)#eab3df-
purple300-static
rgba(217, 137, 201, 1)#d989c9-
purple200-static
rgba(201, 92, 182, 1)#c95cb6-
purple100-static
rgba(209, 56, 191, 1)#d138bf-
purple80-static
rgba(182, 35, 161, 1)#b623a1-
purple60-static
rgba(136, 27, 121, 1)#881b79-
purple40-static
rgba(93, 18, 84, 1)#5d1254-
pink600-static
rgba(252, 233, 239, 1)#fce9ef-
pink500-static
rgba(249, 222, 231, 1)#f9dee7-
pink400-static
rgba(239, 180, 191, 1)#efb4bf-
pink300-static
rgba(228, 138, 155, 1)#e48a9b-
pink200-static
rgba(213, 94, 119, 1)#d55e77-
pink100-static
rgba(255, 79, 131, 1)#ff4f83-
pink80-static
rgba(195, 39, 85, 1)#c32755-
pink60-static
rgba(149, 25, 64, 1)#951940-
pink40-static
rgba(105, 11, 44, 1)#690b2c-
gray700-static
rgba(255, 255, 255, 1)#ffffff-
gray600-static
rgba(247, 247, 247, 1)#f7f7f7-
gray500-static
rgba(240, 240, 240, 1)#f0f0f0-
gray400-static
rgba(233, 233, 233, 1)#e9e9e9-
gray300-static
rgba(212, 212, 212, 1)#d4d4d4-
gray200-static
rgba(170, 170, 170, 1)#aaaaaa-
gray100-static
rgba(115, 115, 115, 1)#737373-
gray80-static
rgba(89, 89, 89, 1)#595959Previously #66666 updated to aim for AAA contrast on target background
gray60-static
rgba(73, 73, 73, 1)#494949-
gray40-static
rgba(42, 42, 42, 1)#2a2a2a-
gray20-static
rgba(17, 17, 17, 1)#111111-
gray0-static
rgba(0, 0, 0, 1)#000000-
errorContainer
rgba(253, 231, 231, 1)#fde7e7-
error
rgba(211, 95, 79, 1)#d35f4f-
warningContainer
rgba(255, 239, 224, 1)#ffefe0-
warning
rgba(230, 130, 61, 1)#e6823d-
successContainer
rgba(238, 249, 234, 1)#eef9ea-
success
rgba(73, 147, 39, 1)#499327-
signalContainer
rgba(231, 240, 254, 1)#e7f0fe-
signal
rgba(87, 132, 197, 1)#5784c5-
onMessage-subtle-hover
rgba(89, 89, 89, 1)#595959-
onMessage-subtle
rgba(73, 73, 73, 1)#494949-
onMessage-hover
rgba(89, 89, 89, 1)#595959-
onMessage
rgba(17, 17, 17, 1)#111111-
portal
rgba(255, 255, 255, 1)#ffffff-
onPortal-subtle-hover
rgba(115, 115, 115, 1)#737373-
onPortal-subtle
rgba(89, 89, 89, 1)#595959-
onPortal-hover
rgba(115, 115, 115, 1)#737373-
onPortal
rgba(17, 17, 17, 1)#111111-
onSurface-subtle-hover
rgba(115, 115, 115, 1)#737373-
onSurface-subtle
rgba(89, 89, 89, 1)#595959-
onSurface-hover
rgba(115, 115, 115, 1)#737373-
onSurface
rgba(17, 17, 17, 1)#111111-
surface-highest
rgba(255, 255, 255, 1)#ffffff-
surface
rgba(255, 255, 255, 1)#ffffff-
onBackground-subtle-hover
rgba(115, 115, 115, 1)#737373-
onBackground-subtle
rgba(89, 89, 89, 1)#595959-
onBackground-hover
rgba(115, 115, 115, 1)#737373-
onBackground
rgba(17, 17, 17, 1)#111111-
background-forSurfaces
rgba(247, 247, 247, 1)#f7f7f7-
background
rgba(255, 255, 255, 1)#ffffff-
accessible
rgba(89, 89, 89, 1)#595959Legacy-Token subject to be deprecated use the appropriate -subtle token
outline-subtle
rgba(0, 0, 0, .05)#0000000d-
outline
rgba(0, 0, 0, .10)#0000001a-
subtle
rgba(212, 212, 212, 1)#d4d4d4Legacy-Token subject to be deprecated use the outline token
faint
rgba(233, 233, 233, 1)#e9e9e9Legacy-Token subject to be deprecated use the outline token
onDisabled
rgba(0, 0, 0, .30)#0000004f-
disabled
rgba(0, 0, 0, .05)#0000000d-
onCtaContainer-subtle-hover
rgba(89, 89, 89, 1)#595959-
onCtaContainer-subtle
rgba(73, 73, 73, 1)#494949-
onCtaContainer-hover
rgba(89, 89, 89, 1)#595959-
onCtaContainer
rgba(17, 17, 17, 1)#111111-
ctaContainer
rgba(231, 240, 254, 1)#e7f0fe-
onCta-hover
-
onCta
-
cta-hover
rgba(19, 102, 179, 1)#1366b3-
cta
rgba(22, 109, 252, 1)#166dfc-
onSecondary-subtle-hover
rgba(115, 115, 115, 1)#737373-
onSecondary-subtle
rgba(89, 89, 89, 1)#595959-
onSecondary-hover
rgba(115, 115, 115, 1)#737373-
onSecondary
rgba(17, 17, 17, 1)#111111-
secondary-hover
rgba(240, 240, 240, 1)#f0f0f0-
secondary
rgba(255, 255, 255, 1)#ffffff-
onPrimary-subtle-hover
rgba(170, 170, 170, 1)#aaaaaa-
onPrimary-subtle
rgba(212, 212, 212, 1)#d4d4d4-
onPrimary-hover
rgba(170, 170, 170, 1)#aaaaaa-
onPrimary
rgba(255, 255, 255, 1)#ffffff-
primary-hover
rgba(42, 42, 42, 1)#2a2a2a-
primary
rgba(17, 17, 17, 1)#111111-
opinions
rgba(254, 78, 29, 1)#FE4E1D-
opinions-hover
rgba(219, 48, 1, 1)#DB3001-
onOpinions
-
onOpinions-hover
-
opinionsContainer
rgba(255, 222, 204, 1)#FFDECC-
onOpinionsContainer
rgba(17, 17, 17, 1)#111111-
onOpinionsContainer-hover
rgba(0, 0, 0, .50)#000000a6-
Edit this page on GitHub.