UX Framework
Colors
Search the component library

Colors

v2.0.0-beta.6
Download UI Kit v1.9.0 Code

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

Download UI Kit v1.9.0 Code

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

Documents

UX Accessibility Checklist

Primary Palette

Contains the main brand colors and standard backgrounds.

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

#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

#d6ebe8

Primary Uses

Alternative background for screens with minimal content, such as sign in.

A11y Complements

Charcoal

Ink Blue

Neutral Palette

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

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

#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

Digital Marine Turquoise

#19a6a4

Primary Uses

Indicate current day in calendars.

A11y Complements

Charcoal

Exported Styles

Available Styles Reference As (How do I use this?)
Digital Pearson Blue [](/design/c/colors/v2.0.0-beta.6/#rd-digital-pearson-blue)
Ink Blue [](/design/c/colors/v2.0.0-beta.6/#rd-ink-blue)
White [](/design/c/colors/v2.0.0-beta.6/#rd-white)
White Gray [](/design/c/colors/v2.0.0-beta.6/#rd-white-gray)
Sunshine Yellow [](/design/c/colors/v2.0.0-beta.6/#rd-sunshine-yellow)
Sunflower Yellow [](/design/c/colors/v2.0.0-beta.6/#rd-sunflower-yellow)
Digital Ice Blue [](/design/c/colors/v2.0.0-beta.6/#rd-digital-ice-blue)
Charcoal [](/design/c/colors/v2.0.0-beta.6/#rd-charcoal)
Medium Gray [](/design/c/colors/v2.0.0-beta.6/#rd-medium-gray)
Concrete [](/design/c/colors/v2.0.0-beta.6/#rd-concrete)
Alto [](/design/c/colors/v2.0.0-beta.6/#rd-alto)
Moonlight [](/design/c/colors/v2.0.0-beta.6/#rd-moonlight)
Strawberry Red [](/design/c/colors/v2.0.0-beta.6/#rd-strawberry-red)
Digital Grass Green [](/design/c/colors/v2.0.0-beta.6/#rd-digital-grass-green)
Hot Pink [](/design/c/colors/v2.0.0-beta.6/#rd-hot-pink)
Digital Marine Turquoise [](/design/c/colors/v2.0.0-beta.6/#rd-digital-marine-turquoise)

Changelog

2.0.0-beta.6

  • ADDED: Hot Pink to the conditional palette.
  • ADDED: Digital Marine Turquoise to the conditional palette.

2.0.0-beta.5

  • ADDED: Sunflower Yellow color to Secondary Palette
  • ADDED: Alto color to Neutral Palette

2.0.0-beta.4

  • CHANGED: Added new accessibility checklist.

2.0.0-beta.3

  • CHANGED: Switch back to using pure white background, and update colors to be brighter.

2.0.0-beta.2

  • CHANGED: Tweak colors for accessibility.
  • CHANGED: Palette to match rebrand discussions.

2.0.0-beta.1

  • CHANGED: Colors now reflect new branding.

1.0.1

  • ADDED: Exported styles

1.0.0

Initial version