Colors
The core of the Web design system is the inclusion of a large primary color field on each page with colors based on the the parent brand style guide.
Primary Color Field
The primary color field spans the width of the page. Height may vary based on template type and content.
The primary color field may be one of six colors:
- Teal: #48c4b7
- Salsa: #ed6a47
- Dark Blue: #3a98c7
- Citrus: #faae53
- Green: #ced665
- Light Blue: #afe6f1
The primary field color dictates the other colors used on the page.
View Palette as Color Groups
(each column represents the color group associated with a Primary Color)
Web Palette
(Six primary colors with accompanying highlight and type colors)
| Color |
Name |
HEX Color |
RGB |
|
|
Crimson (use for links)
(note: not one of the six primary colors)
|
#A41034
|
164 / 16 / 52 |
|
|
Teal (primary)
|
#48C4B7
|
72 / 196 / 183 |
|
|
Dark Teal Background / Teal Type & Buttons on White
|
#2AA296
|
42 / 162 / 150 |
|
|
Teal Type & Buttons on #c1e7e4
|
#00897b
|
0 / 137 / 123 |
|
|
Light Teal Background
|
#c1e7e4
|
193 / 231 / 228 |
|
|
Citrus (primary)
|
#faae53
|
250 / 174 / 83 |
|
|
Salsa (primary)
|
#ed6a47
|
237 / 106 / 71 |
|
|
Dark Salsa & Citrus Background / Salsa & Citrus Type & Buttons on White
(use with both "Salsa (primary)" & "Citrus (primary)")
|
#ed6a47
|
237 / 106 / 71 |
|
|
Salsa & Citrus Type & Buttons on #ffd5a3
(use with both "Salsa (primary)" & "Citrus (primary)")
|
#e34316
|
227 / 67 / 22 |
|
|
Light Salsa & Citrus Background
(use with both "Salsa (primary)" & "Citrus (primary)")
|
#ffd5a3
|
255 / 213 / 163 |
|
|
Green (primary)
|
#ced665
|
206 / 214 / 101 |
|
|
Dark Green Background / Green Type & Buttons on White
|
#8e9617
|
142 / 150 / 23 |
|
|
Green Type & Buttons on #d7de82
|
#737a15
|
115 / 122 / 21 |
|
|
Light Green Background
|
#d7de82
|
215 / 222 / 130 |
|
|
Light Blue (primary)
|
#afe6f1
|
175 / 230 / 241 |
|
|
Dark Blue (primary)
|
#3a98c7
|
58 / 152 / 199 |
|
|
Dark Blue Background / Dark Blue Type & Buttons on White
(use with both "Dark Blue (primary)" & "Light Blue (primary)")
|
#3a98c7
|
58 / 152 / 199 |
|
|
Dark Blue Type & Buttons on #d2eef7
(use with both "Dark Blue (primary)" & "Light Blue (primary)")
|
#3684b9
|
54 / 132 / 185 |
|
|
Light Blue Background
(use with both "Dark Blue (primary)" & "Light Blue (primary)")
|
#d2eef7
|
210 / 238 / 247 |
