Accent Colors
Component status:Ready
Additional, approved colors to complement our primary colors.
While our primary color palette should be used the most across touchpoints, accent colors — when used in smaller amounts — can provide added context to support your marketing and communications materials.
| Name | Hex | Sass Variable | Swatch | 
|---|---|---|---|
| Blue (PMS 298) | #41b6e6 | $blue | |
| Orange (PMS 1645) | #ff6a39 | $orange | |
| Green (PMS 7487) | #8edd65 | $green | |
| Brown (PMS 4635) | #946037 | $brown | |
| Pink (PMS 1777) | #fb637e | $pink | |
| Violet (PMS 2425) | #830065 | $violet | |
| Aqua (PMS 563) | #6bbbab | $aqua | |
| Teal (PMS 5473) | #26686d | $teal | |
| Gold (PMS 7549) | #ffb600 | $gold | 
Usage#
Don’ts#
- Don’t use accent colors as a predominant color or primary way to identify a school, center, institute or department
- Don’t use more than 5% of one accent color within a user experience
- Don’t use an accent color to indicate a status; consider our Utility Colors instead
Implementation Notes#
- Look to the Primary Colors page to see important notes about color contrast and brand guidelines
Accessibility#
- Reference Primary Colors to see important notes about color contrast and use of color
References#
- Reference Primary Colors to see important notes about how to use the brand colors