Colors
Search the component library

Colors

v3.0.1

Every color used in the Elemental Design library is defined in this component.

Usage Guidelines

Only core components such as Buttons or Typography should depend directly on the colors component. Higher level components should get their colors indirectly from the core set of components. This makes it easy to update the color usage across the library.

Features

  • Single collection of all colors
  • Multiple palettes for dark/light themes etc.
  • Guaranteed compliance with Accessibility contrast requirements

Dependencies

None

Primary Palette

Contains the main brand colors and standard backgrounds.

Digital Pearson Blue
Ink Blue
White
White Gray

Digital Pearson Blue

#047a9c

Primary Uses

Pearson Blue is the primary brand color. It is used for common interactive items like links and primary buttons.

A11y Complements

White

White Gray

Ink Blue

#005a70

Primary Uses

Complements Pearson Blue as a hover effect. Also designed for use as an accent color and background for light text.

A11y Complements

White

White Gray

Digital Ice Blue

Moonlight

White

#ffffff

Primary Uses

Most content should appear on a white background, whether it spans the full page or forms a small tile. White should also be used as a text color on dark backgrounds.

A11y Complements

Digital Pearson Blue

Ink Blue

Digital Grass Green

Charcoal

Medium Gray

Strawberry Red

Hot Pink

White Gray

#f5f5f5

Primary Uses

The standard background for within applications. Only secondary content should live directly on a White Gray background, preferring to use White.

A11y Complements

Digital Pearson Blue

Ink Blue

Digital Grass Green

Charcoal

Medium Gray

Strawberry Red

Hot Pink

Secondary Palette

Additional brand colors that accent the page in specific circumstances.

Sunshine Yellow
Sunflower Yellow
Digital Ice Blue
Digital Marine Turquoise

Sunshine Yellow

#ffb81c

Primary Uses

Should be reserved for the most important interactive elements. More important than Pearson Blue, and should generally only appear once per screen.

A11y Complements

Charcoal

Sunflower Yellow

#ff9a19

Primary Uses

Hover state for Sunshine Yellow.

A11y Complements

Charcoal

Digital Ice Blue

#DAF0ED

Primary Uses

Alternative background for screens with minimal content, such as sign in. Also used for mild attention grabbing, for example in coach marks.

A11y Complements

Charcoal

Ink Blue

Digital Marine Turquoise

#19A5A3

Primary Uses

Use for decorative elements. Avoid any situations where turquoise is the foreground or background color for text.

A11y Complements

Charcoal

Neutral Palette

Basic grays used for text, buttons, divider lines, etc.

Charcoal
Medium Gray
Concrete
Alto
Moonlight

Charcoal

#252525

Primary Uses

Intended as the default text color, replaces black in most cases.

A11y Complements

White

White Gray

Sunshine Yellow

Moonlight

Concrete

Digital Ice Blue

Digital Marine Turquoise

Medium Gray

#6a7070

Primary Uses

Intended as the secondary text color for light backgrounds.

A11y Complements

White

White Gray

Concrete

#c7c7c7

Primary Uses

Intended for borders and separators, typically not used for actual content.

A11y Complements

Charcoal

Ink Blue

Alto

#d9d9d9

Primary Uses

Default button color.

A11y Complements

Charcoal

Ink Blue

Moonlight

#e9e9e9

Primary Uses

Disabled buttons, accent color.

A11y Complements

Charcoal

Ink Blue

Conditional Palette

Colors that only appear under certain conditions, like success or error states.

Strawberry Red
Digital Grass Green
Hot Pink

Strawberry Red

#db0020

Primary Uses

Indicates overdue items and the concept of incorrectness.

A11y Complements

White

White Gray

Digital Grass Green

#038238

Primary Uses

Indicates success.

A11y Complements

White

White Gray

Hot Pink

#DA0474

Primary Uses

Indicate new/unread notifications.

A11y Complements

White

White Gray

Changelog

3.0.1

  • ADDED: Feature links

3.0.0

  • REMOVED: Brackish Turquoise
  • FIXED: Location of Digital Marine Turquoise in the document

2.1.0

  • CHANGED: Digital Ice Blue hex value to standout better against gray backgrounds
  • ADDED: Brackish Turquoise as CTA Button Hover state for Digital Marine Turquoise
  • CHANGED: Digital Marine Turquoise hex value to pass accessibility requirements

2.0.0

  • CHANGED: Colors now reflect new branding.

1.0.1

  • ADDED: Exported styles

1.0.0

Initial version