Color Design Guidelines

Color helps express hierarchy, establish brand presence, give meaning, and indicate element states.

Introduction

Application of the color palette brings a unified and recognizable consistency to Cengage’s array of digital products and interfaces. We are committed to complying with the Web Content Accessibility Guidelines AA standard contrast ratios.

All text should be legible and meet accessibility standards. The WCAG 2.1 guidelines require a 4.5:1 color contrast between text and background for normal text, and 3:1 for large text. At Cengage we strive to always hit 4.5:1 to avoid any possible issues or questions about whether a piece of text is accessible. Additionally, any non-text visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors.

Primary

The primary colors are based on our main brand color. These colors are used in logical ways throughout product and marketing to guide the eye and highlight the important elements.

We use primary-500 to indicate primary actions, buttons, text links, etc.

FAIL

PASS

Name

primary-700

Space Cadet

Hex

#1A1E51

RGB

26,30,81

FAIL

PASS

Name

primary-600

Resolution Blue

Hex

#292F7C

RGB

41,47,124

FAIL

PASS

Name

primary-500

Free Speech Blue

Hex

#3942B0

RGB

57,66,176

FAIL

PASS

Name

primary-400

Slate Blue

Hex

#5D65CB

RGB

93,101,203

FAIL

Name

primary-300

Blue Bell

Hex

#8B91DA

RGB

139,145,218

PASS

FAIL

Name

primary-200

Lavender Blue

Hex

#BABDE9

RGB

186,189,233

PASS

FAIL

Name

primary-100

Quartz

Hex

#E8E9F8

RGB

232,233,248

Secondary

The secondary colors are based off secondary-500 from the Cengage Higher Ed branding guidelines. It is commonly used for important calls to action on pages where purchases are made.

PASS

FAIL

Name

secondary-700

Golden Poppy

Hex

#ECC901

RGB

236,201,1

PASS

FAIL

Name

secondary-600

Sizzling Sunrise

Hex

#FEDA0D

RGB

254,218,13

PASS

FAIL

Name

secondary-500

Paris Daisy

Hex

#FEE449

RGB

254,228,73

Tertiary

The tertiary colors are based off tertiary-500 from the Cengage Higher Ed branding guidelines. It is commonly used in place of the primary colors on dark backgrounds.

FAIL

Name

tertiary-700

Maya Blue

Hex

#79A5FF

RGB

121,165,255

PASS

FAIL

Name

tertiary-600

Columbia Blue

Hex

#A2C1FF

RGB

162,193,255

PASS

FAIL

Name

tertiary-500

Periwinkle Crayola

Hex

#CDDEFF

RGB

205,222,255

Neutrals

The neutrals come in varying levels of saturation to create the right level of contrast. Dark neutrals are the primary colors we use for typography. We commonly use light neutrals for type set on a dark background, or for subtle backgrounds that don’t take away from the cleanliness of a page.

FAIL

PASS

Name

neutral-900

Black

Hex

#000000

RGB

0,0,0

FAIL

PASS

Name

neutral-800

Jet

Hex

#2D2D2D

RGB

45,45,45

FAIL

PASS

Name

neutral-700

Onyx

Hex

#454545

RGB

69,69,69

FAIL

PASS

Name

neutral-600

Mortar

Hex

#5A5A5A

RGB

90,90,90

FAIL

PASS

Name

neutral-500

Sonic Silver

Hex

#707070

RGB

112,112,112

FAIL

Name

neutral-400

Suva Gray

Hex

#8D8D8D

RGB

141,141,141

PASS

FAIL

Name

neutral-300

Light Gray

Hex

#D4D4D4

RGB

212,212,212

PASS

FAIL

Name

neutral-200

White Smoke

Hex

#F5F5F5

RGB

245,245,245

PASS

FAIL

Name

neutral-100

White

Hex

#FFFFFF

RGB

255,255,255

Info

The info colors are used to provide users with neutral, informational feedback. They are primarily used within alerts, and to indicate when an interactive element is in the focused state.

FAIL

PASS

Name

info-700

Blue Lagoon

Hex

#004A75

RGB

26,30,81

FAIL

PASS

Name

info-600

Sapphire Blue

Hex

#005F96

RGB

41,47,124

FAIL

PASS

Name

info-500

French Blue

Hex

#0074B7

RGB

57,66,176

FAIL

Name

info-400

Deep Sky Blue

Hex

#009AF3

RGB

93,101,203

FAIL

Name

info-300

Blue Jeans

Hex

#2FB3FF

RGB

139,145,218

PASS

FAIL

Name

info-200

Uranian Blue

Hex

#A6DEFF

RGB

186,189,233

PASS

FAIL

Name

info-100

Alice Blue

Hex

#E8F5FC

RGB

232,233,248

Danger

The danger colors are mainly used for backgrounds in messages and in error states to draw attention to important information or actions that are destructive or block workflow. You'll find red used in components such as alerts, buttons, and typography.

FAIL

PASS

Name

danger-700

Falu Red

Hex

#7F1714

RGB

127,23,20

FAIL

PASS

Name

danger-600

Carnelian

Hex

#A91F1A

RGB

169,31,26

FAIL

PASS

Name

danger-500

Maximum Red

Hex

#D32821

RGB

211,40,33

FAIL

Name

danger-400

Cinnabar

Hex

#E24943

RGB

226,73,67

FAIL

Name

danger-300

Light Coral

Hex

#E8716D

RGB

232,113,109

PASS

FAIL

Name

danger-200

Sundown

Hex

#FAAEB0

RGB

250,174,176

PASS

FAIL

Name

danger-100

Rose White

Hex

#FDEFEE

RGB

253,239,238

Warning

The warning colors are used to indicate a warning or that progress is impeded. It is primarily used within the alert components.

FAIL

PASS

Name

warning-700

Sepia

Hex

#6E340E

RGB

110,52,14

FAIL

PASS

Name

warning-600

Saddle Brown

Hex

#8D4311

RGB

141,67,17

FAIL

PASS

Name

warning-500

Windsor Tan

Hex

#AD5115

RGB

173,81,21

FAIL

Name

warning-400

Spanish Orange

Hex

#E06A1C

RGB

224,106,28

FAIL

Name

warning-300

Persian Orange

Hex

#E98B4C

RGB

233,139,76

PASS

FAIL

Name

warning-200

Apricot

Hex

#F6CDB2

RGB

246,205,178

PASS

FAIL

Name

warning-100

Linen

Hex

#FCEEE5

RGB

252,238,229

Success

We use green to celebrate success. The success colors are commonly used in the alerts and through typography.

FAIL

PASS

Name

success-700

Crusoe

Hex

#0F5323

RGB

15,83,35

FAIL

PASS

Name

success-600

Dartmouth Green

Hex

#136A2D

RGB

19,106,45

FAIL

PASS

Name

success-500

Dark Spring Green

Hex

#178037

RGB

23,128,55

FAIL

Name

success-400

Lime Green

Hex

#21B94E

RGB

33,185,78

PASS

FAIL

Name

success-300

Emerald

Hex

#3EDD6E

RGB

62,221,110

PASS

FAIL

Name

success-200

Celadon

Hex

#ACF0C1

RGB

172,240,193

PASS

FAIL

Name

success-100

Honeydew

Hex

#E3FAEA

RGB

227,250,234

Data Visualization

Data visualization colors are intended for charts, tags, and other categorical color uses. These colors should be used for distinction across data series, not to communicate semantic states like success, warning, or danger.

FAIL

PASS

Name

dataVizBlue700

Data Visualization Blue 700

Hex

#005F96

RGB

0,95,150

FAIL

Name

dataVizBlue500

Data Visualization Blue 500

Hex

#009AF3

RGB

0,154,243

FAIL

Name

dataVizBlue400

Data Visualization Blue 400

Hex

#1FB0FF

RGB

31,176,255

PASS

FAIL

Name

dataVizBlue200

Data Visualization Blue 200

Hex

#85D4FF

RGB

133,212,255

FAIL

PASS

Name

dataVizPink700

Data Visualization Pink 700

Hex

#8F0033

RGB

143,0,51

FAIL

PASS

Name

dataVizPink500

Data Visualization Pink 500

Hex

#E0004D

RGB

224,0,77

FAIL

Name

dataVizPink400

Data Visualization Pink 400

Hex

#FF337A

RGB

255,51,122

PASS

FAIL

Name

dataVizPink200

Data Visualization Pink 200

Hex

#FF99BD

RGB

255,153,189

FAIL

PASS

Name

dataVizGreen700

Data Visualization Green 700

Hex

#136A2D

RGB

19,106,45

FAIL

Name

dataVizGreen500

Data Visualization Green 500

Hex

#1EA746

RGB

30,167,70

PASS

FAIL

Name

dataVizGreen400

Data Visualization Green 400

Hex

#65E000

RGB

101,224,0

PASS

FAIL

Name

dataVizGreen200

Data Visualization Green 200

Hex

#C7FF99

RGB

199,255,153

FAIL

PASS

Name

dataVizOrange700

Data Visualization Orange 700

Hex

#B84900

RGB

184,73,0

FAIL

Name

dataVizOrange500

Data Visualization Orange 500

Hex

#FA6600

RGB

250,102,0

FAIL

Name

dataVizOrange400

Data Visualization Orange 400

Hex

#FF9147

RGB

255,145,71

PASS

FAIL

Name

dataVizOrange200

Data Visualization Orange 200

Hex

#FFB685

RGB

255,182,133

FAIL

PASS

Name

dataVizPurple700

Data Visualization Purple 700

Hex

#711E6E

RGB

113,30,110

FAIL

PASS

Name

dataVizPurple500

Data Visualization Purple 500

Hex

#B12FAD

RGB

177,47,173

FAIL

Name

dataVizPurple400

Data Visualization Purple 400

Hex

#D45ED0

RGB

212,94,208

PASS

FAIL

Name

dataVizPurple200

Data Visualization Purple 200

Hex

#E9AFE7

RGB

233,175,231

FAIL

PASS

Name

dataVizTeal700

Data Visualization Teal 700

Hex

#005249

RGB

0,82,73

FAIL

Name

dataVizTeal500

Data Visualization Teal 500

Hex

#00A393

RGB

0,163,147

PASS

FAIL

Name

dataVizTeal400

Data Visualization Teal 400

Hex

#00E0CA

RGB

0,224,202

PASS

FAIL

Name

dataVizTeal200

Data Visualization Teal 200

Hex

#99FFF5

RGB

153,255,245

On this page