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