Skip to main content

Color

The WPP color system is based on a foundation of visual perception, inclusive design, and accessibility.

The WPP DS color palette brings a unified and recognizable consistency to the digital products and experiences designed and developed under the WPP Open Platform. This consistency is grounded in well-defined principles of working with color in the context of design tokens, themes, and accessibility.

Primary​

#TokenHEXUsage
wpp-primary-color-100#E0EBFF

Regular Secondary Button: Fill – Hover
More Button: Fill – Hover; Back To Top Button: Fill – Hover
Tree Item: Fill – Active Selected, Active Selected Hover
List Item: Fill – Selected, Selected Hover, Selected Pressed
Vertical Stepper: Step control – Selected idle; Sub-step control – selected idle
Date Picker: Date – Range In Between (Today) – Fill – Selected
Highlighting text for search results

wpp-primary-color-200#C2D4FF

Regular Secondary Button: Fill – Pressed
More Button: Fill – Pressed; Back To Top Button: Fill – Pressed
Data Zoom: Overlay – Fill – Idle, Hover

wpp-primary-color-300#85A3FF

Use primarily for the Disabled state.

Regular Primary Button: Fill – Disabled
Regular Secondary Button: Border, Text, Icon – Disabled
Action Primary Button: Text, Icon – Disabled
More Button: Border, Icon – Disabled; FAB: Fill – Disabled
Data Zoom: Drag Control – Fill – Idle
Checkbox: Fill – Selected, Mixed Disabled

Toggle, Radio Button, Slider Parts, Selectable Card and more.

wpp-primary-color-400#0A2FFF

Use primarily for the Hover state.

Regular Primary Button: Fill – Hover
FAB: Fill – Hover
Link: Primary, Contextual Link – Hover
Checkbox: Selected - Fill - Hover
Avatar: Show More – Fill – Hover List Item: Checkbox and Title – Selected Hover
Data Zoom: Drag Control, Border – Hover
Tabs: Tab Item – Label – Hover
Checkbox: Fill – Selected Hover, Mixed Hover

Toggle, Slider, Selectable Card, Date Picker Parts and more.

wpp-primary-color-500#0014CC

Use primarily for Idle, Selected states.

Regular Primary Button: Fill – Idle, Loading
Regular Secondary Button: Border, Text, Icon – Idle, Hover
Action Primary Button: Text, Icon – Idle, Hover
More Button: Icon, Border – Idle, Hover
FAB: Fill – Idle, Loading; Back To Top: Border, Icon – Idle, Hover
Primary Link: Idle
Avatar: Show More – Fill – Idle
Tree Item: Title – Active Selected, Active Selected Hover
List Item: Title, Icon – Selected
Spinner: Fill
Progress Indicator: Bar, Circle – Progress Fill
Tabs: Tab Item – Label, Highlight – Selected
Horizontal Stepper: Step Indicator – Current – Border, Number; Completed – Fill; Bar – Segment – Fill
Vertical Stepper:
Step Control – Indicator – Selected, Idle, Hover, Pressed; Title – Selected; Divider – Fill
Sub-step Control – Sub-step Indicator – Current, Completed – Selected Idle, Idle, Hover, Pressed; Title – Selected Idle; Divider – Fill
Pagination: Page Item – Number – Selected Idle
Pills: Multiple/Single Selection – Border – Selected

Date Picker parts, Radio Button, Checkbox, Toggle, Slider Parts, Selectable Card and more.

wpp-primary-color-600#00078F

Use primarily for Pressed state.

Link: Primary, Contextual Links – Pressed
Avatar: Show More – Fill – Pressed
List Item: Checkbox and Title – Selected Pressed
Date Picker:
Date – Today Unselected – Number – Pressed;
Date – Selected (Today) – Fill – Pressed;
Range In Between Today – Number – Hover;
Month/Year – Fill – Selected Pressed
Checkbox: Fill – Selected Pressed, Mixed Pressed
Toggle: Fill – Selected Pressed
Pills: Multiple/Single Selection – Text, Icon – Selected, Selected Hover; Border – Selected Hover
Selectable Card: Border – Selected Pressed

Regular Primary Button, Regular Secondary Button, Action Primary Button, More Button, FAB, Back To Top.

wpp-primary-color-700#000050–
wpp-primary-color-800#000333–

Greys​

Cold​

#TokenHEXUsage
wpp-grey-color-000#FFFFFF

Use primarily for Text, Icons on the background.

Regular Primary and Destructive Buttons: Text, Icon – All States
Action Inverted Button: Text, Icon – Idle, Hover
FAB: Icon – All Sates
Avatar: Text Content
Tree Item: Fill – Idle, Disabled; Fill – Multiple Selection – Active Selected
Data Viz: Drag Indicator – Fill
Toast: No Title – Toast Message; With Title – Title
Tooltip: Dark – Tooltip Text, Title, Value
Surfaces (Cards, Modals), Tooltip, Menus – Fill Backgrounds

Info Banner, Step Indicator, Slider, Segmented Control, Toggle, Checkbox, Radio Button and more.

wpp-grey-color-100#F8F9FB

Use primarily for the main background.

Filter Button: Fill – DisabledAction Secondary Button: Fill – Hover (12%), Pressed (18%), Loading (18%)
Table Cell: Fill – SelectedTooltip: Title+Text – Description Text
Text Input: Fill – Disabled
Date Picker Input: Fill – DisabledSearch Input: Fill – Disabled
Text Area: Fill – DisabledCounter: Fill – Disabled
Combined Input: Fill – Disabled
Date Picker: Date – Range In Between – Fill – Hover
Single Select: Fill – Disabled
Autocomplete: Fill – Disabled
Segmented Control: Parts – Item Text, Icon – Fill – Hover
Card: Regular – On Card – Fill

wpp-grey-color-200#F4F5F7

Use primarily for the Hover states.

Table Header: Fill – Hover
Table Cell: Fill – Hover
Context Menu Item: Fil – Hover, Expanded
Tree Item: Fill – Hover; Multiple Selection – Fill – Active/Selected Hover
Inline Message: Warning, Informational – Fill
App Top Bar:

  • Menu Item – Unselected Hover/Active;
  • Menu Sub-item – Unselected Hover

App Sidebar: Menu Item, Sub-item – Unselected Hover

Vertical Stepper:

  • Step Control – Fill – Unselected Hover;
  • Sub-step Control – Fill – Unselected Hover

Pagination:

  • Page Item – Fill – Unselected Hover;
  • Text Select – Fill – Hover, Active, Active Hover
  • Inputs, Selects: Fill – Hover

Filter Button, List Item, Date Picker, Radio Button, Checkbox, Pills, File Upload and more.

wpp-grey-color-300#E7EAEE

Use primarily for the Pressed states.

Divider: Fill
Filter Button: Fill – Hover
Data Table: Cell – Divider – Fill
Context Menu Item: Fill – Hover, Expanded
Tree Item: Fill – Pressed; Multiple Selection – Fill – Selected Pressed
Progress Indicator: Base Empty – Fill
App Top Bar:
Menu Item – Fill – Unselected Pressed, Selected;
Menu Sub-item – Fill – Unselected Pressed, Selected
App Sidebar: Menu Item, Sub-item – Unselected Pressed, Selected Idle
Horizontal Stepper: Step Control – More Indicator – Fill
Vertical Stepper:
Step Control – Fill – Unselected Pressed;
Sub-step Control – Fill – Unselected Pressed
Pagination: Page Item – Fill – Unselected Pressed; Text Select – Fill – Pressed
Input: Counter – Left/Right Control – Fill – Pressed/Active
Segmented Control: Background – Fill; Parts – Fill – Idle, Disabled
Slider: Track, Tick Mark – Fill – Idle
Selectable Cards: Border – Disabled Not Selected

Skeleton, List Item, Date Picker Parts, Radio Button, Checkbox, Pills and more.

wpp-grey-color-400#C1C7CD

Use primarily for Icons, Borders in Disabled state.

Action Secondary Button: Icon – Disabled
Filter Button: Icon, Border – Disabled
Data Table: Column Header – Divider – Fill
Stepper: Step Indicator – Next – Border; Divider – Fill; Sub-step Indicator – Border
Inputs: Border – Disabled

Radio Button, Checkbox, Toggle, Segmented Control, Pills, Scroll.

wpp-grey-color-500#A2A9B0Used for Label/Text in Disabled state.
wpp-grey-color-600#8B919A

Use primarily for Borders, Icons in Idle state.

Filter Button: Border – Idle
Inputs, Selects: Border – Filled, Hint

Radio Button, Checkbox, Toggle, Segmented Control, Pills and more.

wpp-grey-color-700#697077

Use primarily for Borders in Hover state.

Hint Text
Action Secondary Button**: Fill (12%) – Hover
Filter Button: Border – Hover
Inputs, Selects: Border – Hover

Radio Button, Checkbox, Toggle, Segmented Control, Pills and more.

wpp-grey-color-800#4D5358

Use primarily for Borders in Pressed state and Action Icons in Hover state.

Muted, Supplementary Text
Action Secondary Button: Icon – Idle, Hover; Fill (18%) – Pressed
Filter Button: Border, Icon – Pressed
Quiet Link: Pressed
Tag: Info – Label
Inputs, Selects: Border – Pressed, Active; Helper Text Banner: Info – Fill

Radio Button, Checkbox, Toggle, Segmented Control, Pills and more.

wpp-grey-color-900#343A3F

Use primarily for Action Icons in Pressed/Active states.

Secondary Action Button: Text – Idle, Hover; Icon – Pressed
Filter Button: Text – Idle, Hover; Icon – Pressed
Toast: Fill
Tooltip: Fill

wpp-grey-color-1000#121619Paragraph Text, Headings, Labels
wpp-overlay-bg-color#4D5358
60%		Overlay (Modal window, Side panel) Background

System​

Neutral Palette​

Use system palette when you want to indicate success, error, destructive interactive elements and validations.

#TokenHEXUsage
wpp-danger-color-200#FFE5EA

Tag: Negative – Background Fill (50%)
Inline Message: M Size – Error – Fill
Tooltip: Validation – Fill

wpp-danger-color-300#FFC7D0

Regular Destructive Button: Fill – Disabled

wpp-danger-color-400#FF143C

Error Icon
Regular Destructive Button: Fill – Hover
Table Cell: Error Row Indicator
Inputs, Selects: Border – Error – Idle

wpp-danger-color-500#DB0025

Error Labels, Text
Regular Destructive Button: Fill – Idle
Tag: Negative – Label Text, Icon
Inputs, Selects: Error Message; Border – Error – Hover
File Upload: Upload Area – Border – Error

wpp-danger-color-600#A0001A

Regular Destructive Button: Fill – Pressed

wpp-warning-color-200#FFECE0

Tag: Warning – Background Fill (50%)

wpp-warning-color-400#FA5D05

Warning Icon
Inputs, Selects: Border – Warning – Idle

wpp-warning-color-500#CC4B00

Inputs, Selects: Warning Message; Border – Warning – Hover
Tag: Warning – Label Text, Icon

wpp-success-color-200#D8FEE0

Tag: Success – Background Fill (50%)
Inline Message: M Size – Success – Fill

wpp-success-color-400#06A228

Success Icon

wpp-success-color-500#058521

Tag: Success – Label Text, Icon

wpp-highlight-color-200#FFFB89
wpp-highlight-color-400#FDE212

Banner: Highlight – Fill

Sequential dataviz​

Brand​

Our monochromatic pallette can help you better illustrate relationship and trend charts.

#TokenHEX
wpp-dataviz-color-seq-brand-100#E5F0FF
wpp-dataviz-color-seq-brand-200#C7DBFF
wpp-dataviz-color-seq-brand-300#94B4FF
wpp-dataviz-color-seq-brand-400#5C85FF
wpp-dataviz-color-seq-brand-500#2954FF
wpp-dataviz-color-seq-brand-600#0024F0
wpp-dataviz-color-seq-brand-700#0013BD
wpp-dataviz-color-seq-brand-800#000785
wpp-dataviz-color-seq-brand-900#000050
wpp-dataviz-color-seq-brand-1000#000229

Example:

Grayscale​

If you want to highlight a specific item on a chart, use our grayscale pattern for others.

#TokenHEX
wpp-dataviz-color-seq-grey-100#ECEDEE
wpp-dataviz-color-seq-grey-200#D9DCDE
wpp-dataviz-color-seq-grey-300#B6BBBF
wpp-dataviz-color-seq-grey-400#8F979D
wpp-dataviz-color-seq-grey-500#6D767D
wpp-dataviz-color-seq-grey-600#4D5358
wpp-dataviz-color-seq-grey-700#3E4347
wpp-dataviz-color-seq-grey-800#2D3134
wpp-dataviz-color-seq-grey-900#1F2123
wpp-dataviz-color-seq-grey-1000#0E0F10

Example:

Warning​

Use our diverging palette when you want to compare an important item with the rest of your data.

#TokenHEX
wpp-dataviz-color-seq-warning-100#FFEFE5
wpp-dataviz-color-seq-warning-200#FFD8C2
wpp-dataviz-color-seq-warning-300#FFAE80
wpp-dataviz-color-seq-warning-400#FF8742
wpp-dataviz-color-seq-warning-500#FA5D05
wpp-dataviz-color-seq-warning-600#CC4B00
wpp-dataviz-color-seq-warning-700#A33C00
wpp-dataviz-color-seq-warning-800#752B00
wpp-dataviz-color-seq-warning-900#4D1C00
wpp-dataviz-color-seq-warning-1000#290F00

Example:

Negative​

Use our diverging palette when you want to compare an important item with the rest of your data.

#TokenHEX
wpp-dataviz-color-seq-negative-100#FFE5EA
wpp-dataviz-color-seq-negative-200#FFC7D0
wpp-dataviz-color-seq-negative-300#FF8A9D
wpp-dataviz-color-seq-negative-400#FF526F
wpp-dataviz-color-seq-negative-500#FF143C
wpp-dataviz-color-seq-negative-600#DB0025
wpp-dataviz-color-seq-negative-700#A0001A
wpp-dataviz-color-seq-negative-800#7A0014
wpp-dataviz-color-seq-negative-900#52000E
wpp-dataviz-color-seq-negative-1000#290007

Example:

Positive​

Use our diverging palette when you want to compare an important item with the rest of your data.

#TokenHEX
wpp-dataviz-color-seq-positive-100#D8FEE0
wpp-dataviz-color-seq-positive-200#ABFCBD
wpp-dataviz-color-seq-positive-300#63F783
wpp-dataviz-color-seq-positive-400#2FD754
wpp-dataviz-color-seq-positive-500#06A228
wpp-dataviz-color-seq-positive-600#058521
wpp-dataviz-color-seq-positive-700#046C1B
wpp-dataviz-color-seq-positive-800#034F13
wpp-dataviz-color-seq-positive-900#02360D
wpp-dataviz-color-seq-positive-1000#08260C

Example:

Categorical dataviz​

#TokenHEX
wpp-dataviz-color-cat-dark-1#0A2FFF
wpp-dataviz-color-cat-neutral-1#85A3FF
wpp-dataviz-color-cat-light-1#C2D4FF
wpp-dataviz-color-cat-dark-2#0068AD
wpp-dataviz-color-cat-neutral-2#7AB6FF
wpp-dataviz-color-cat-light-2#BDDBFF
wpp-dataviz-color-cat-dark-3#F87171
wpp-dataviz-color-cat-neutral-3#45E4B6
wpp-dataviz-color-cat-light-3#A2F1DB
wpp-dataviz-color-cat-dark-4#12871C
wpp-dataviz-color-cat-neutral-4#6CE07B
wpp-dataviz-color-cat-light-4#A7F6B8
wpp-dataviz-color-cat-dark-5#A36F05
wpp-dataviz-color-cat-neutral-5#ECC706
wpp-dataviz-color-cat-light-5#F8F1A0
wpp-dataviz-color-cat-dark-6#CC4B00
wpp-dataviz-color-cat-neutral-6#FF9E66
wpp-dataviz-color-cat-light-6#FFCFB3
wpp-dataviz-color-cat-dark-7#1FBC59
wpp-dataviz-color-cat-neutral-7#15803D
wpp-dataviz-color-cat-light-7#FFBDC8
wpp-dataviz-color-cat-dark-8#B41880
wpp-dataviz-color-cat-neutral-8#ED78C6
wpp-dataviz-color-cat-light-8#FFC2EA
wpp-dataviz-color-cat-dark-9#832EEA
wpp-dataviz-color-cat-neutral-9#B482F3
wpp-dataviz-color-cat-light-9#DBC3F9
wpp-dataviz-color-cat-dark-10#646C72
wpp-dataviz-color-cat-neutral-10#ABB1B5
wpp-dataviz-color-cat-light-10#D6D9DB

Palette 1 – 10​

When you have fewer than ten items on a chart, use the neutral colors.

cat-1
cat-2
cat-3
cat-4
cat-5
cat-6
cat-7
cat-8
cat-9
cat-10

Preview​

Palette 1 – 20​

When you have more than ten but fewer than 20 items on a chart, combine the neutral and light colors.

cat-1
cat-2
cat-3
cat-4
cat-5
cat-6
cat-7
cat-8
cat-9
cat-10
cat-1-light
cat-2-light
cat-3-light
cat-4-light
cat-5-light
cat-6-light
cat-7-light
cat-8-light
cat-9-light
cat-10-light

Preview​

Palette 1 – 30​

When you have more than 20 items on a chart, combine the dark, neutral, and light colors.

cat-1-dark
cat-2-dark
cat-3-dark
cat-4-dark
cat-5-dark
cat-6-dark
cat-7-dark
cat-8-dark
cat-9-dark
cat-10-dark
cat-1
cat-2
cat-3
cat-4
cat-5
cat-6
cat-7
cat-8
cat-9
cat-10
cat-1-light
cat-2-light
cat-3-light
cat-4-light
cat-5-light
cat-6-light
cat-7-light
cat-8-light
cat-9-light
cat-10-light

Preview​

note

To include background graphics while exporting in PDF or printing the page, follow these steps based on your browser:

  • For Safari: Go to File > Print > Select Print backgrounds.

  • For Chrome: Go to File > Print > Select Background graphics.