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.2 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.
Color Primitives
Brand
sky-blue
#00B8D9
0, 184, 217
ocean-blue
#008EBA
0, 142, 186
electric-cyan
#00E7FF
0, 231, 255
sunrise-orange
#FD9A04
253, 154, 4
navy
#0B1F3A
11, 31, 58
Cyan
100
#E8FBFE
232, 251, 254
200
#B5F3FA
181, 243, 250
300
#7CE9F4
124, 233, 244
400
#32D3E8
50, 211, 232
500
#00B8D9
0, 184, 217
600
#009AB6
0, 154, 182
700
#007085
0, 112, 133
800
#005F72
0, 95, 114
900
#004351
0, 67, 81
1000
#002933
0, 41, 51
Blue
100
#EAF4FF
234, 244, 255
200
#C3DFFD
195, 223, 253
300
#94C5F2
148, 197, 242
400
#5EA4E1
94, 164, 225
500
#3082CA
48, 130, 202
600
#0A56A4
10, 86, 164
700
#084684
8, 70, 132
800
#063565
6, 53, 101
900
#042448
4, 36, 72
1000
#02152D
2, 21, 45
Green
100
#E7FAEF
231, 250, 239
200
#BFECCD
191, 236, 205
300
#8EDDA9
142, 221, 169
400
#4CC77E
76, 199, 126
500
#17A962
23, 169, 98
600
#00844B
0, 132, 75
700
#006C3B
0, 108, 59
800
#00512D
0, 81, 45
900
#00391E
0, 57, 30
1000
#002311
0, 35, 17
Red
100
#FFE9EC
255, 233, 236
200
#FFC8D0
255, 200, 208
300
#FFA0AE
255, 160, 174
400
#F66D84
246, 109, 132
500
#EB3A59
235, 58, 89
600
#C60034
198, 0, 52
700
#9E0029
158, 0, 41
800
#76001E
118, 0, 30
900
#520013
82, 0, 19
1000
#330008
51, 0, 8
Tangerine
100
#FFF1DE
255, 241, 222
200
#FFDDB8
255, 221, 184
300
#FFC483
255, 196, 131
400
#FFA94B
255, 169, 75
500
#FD9A04
253, 154, 4
600
#C97100
201, 113, 0
700
#A25900
162, 89, 0
800
#784100
120, 65, 0
900
#552B00
85, 43, 0
1000
#331800
51, 24, 0
Yellow
100
#FFF7D6
255, 247, 214
200
#FFEBA3
255, 235, 163
300
#FFD95C
255, 217, 92
400
#FFC200
255, 194, 0
500
#D99E00
217, 158, 0
600
#B27F00
178, 127, 0
700
#8C6300
140, 99, 0
800
#674800
103, 72, 0
900
#493100
73, 49, 0
1000
#2B1C00
43, 28, 0
Indigo
100
#F0F3FF
240, 243, 255
200
#D5DCF8
213, 220, 248
300
#B2BDF0
178, 189, 240
400
#8998DF
137, 152, 223
500
#6170C6
97, 112, 198
600
#404FAC
64, 79, 172
700
#27328C
39, 50, 140
800
#1C256D
28, 37, 109
900
#12194E
18, 25, 78
1000
#080C31
8, 12, 49
Teal
100
#E6F7FA
230, 247, 250
200
#BFE8EF
191, 232, 239
300
#8FD3DE
143, 211, 222
400
#51B4C5
81, 180, 197
500
#1592B0
21, 146, 176
600
#0D7892
13, 120, 146
700
#095F75
9, 95, 117
800
#064858
6, 72, 88
900
#03313D
3, 49, 61
1000
#021D25
2, 29, 37
Violet
100
#FBEAF9
251, 234, 249
200
#F1C6EC
241, 198, 236
300
#E59ADD
229, 154, 221
400
#CE68C5
206, 104, 197
500
#B847AE
184, 71, 174
600
#982E93
152, 46, 147
700
#782273
120, 34, 115
800
#5B1857
91, 24, 87
900
#3F0D3C
63, 13, 60
1000
#270325
39, 3, 37
Purple
100
#F4ECFF
244, 236, 255
200
#DDCCF2
221, 204, 242
300
#C4A6E5
196, 166, 229
400
#A77CD3
167, 124, 211
500
#8959BD
137, 89, 189
600
#6F40A8
111, 64, 168
700
#592D8E
89, 45, 142
800
#421F6B
66, 31, 107
900
#2E134D
46, 19, 77
1000
#1D0832
29, 8, 50
Neutral
0
#FFFFFF
255, 255, 255
100
#F7F9FC
247, 249, 252
150
#F1F3F7
241, 243, 247
200
#DEE5EE
222, 229, 238
300
#C5CEDB
197, 206, 219
400
#A9B5C4
169, 181, 196
500
#8B99AA
139, 153, 170
600
#6F7E91
111, 126, 145
700
#56667A
86, 102, 122
800
#3D4A60
61, 74, 96
900
#2A374A
42, 55, 74
1000
#1B2636
27, 38, 54
1100
#101820
16, 24, 32
1150
#080C10
8, 12, 16
1200
#000000
0, 0, 0
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.
Blue
200
#85D4FF
133, 212, 255
400
#1FB0FF
31, 176, 255
500
#009AF3
0, 154, 243
700
#005F96
0, 95, 150
Pink
200
#FF99BD
255, 153, 189
400
#FF337A
255, 51, 122
500
#E0004D
224, 0, 77
700
#8F0033
143, 0, 51
Green
200
#C7FF99
199, 255, 153
400
#65E000
101, 224, 0
500
#1EA746
30, 167, 70
700
#136A2D
19, 106, 45
Orange
200
#FFB685
255, 182, 133
400
#FF9147
255, 145, 71
500
#FA6600
250, 102, 0
700
#B84900
184, 73, 0
Purple
200
#E9AFE7
233, 175, 231
400
#D45ED0
212, 94, 208
500
#B12FAD
177, 47, 173
700
#711E6E
113, 30, 110
Teal
200
#99FFF5
153, 255, 245
400
#00E0CA
0, 224, 202
500
#00A393
0, 163, 147
700
#005249
0, 82, 73
On this page