Colors

Web Color Application Guidelines

Apply: Use the web primary colors as a base of branded tones and apply secondary colors as accents to call out important information, such as fast facts, statistics or iconography. For iconography that uses the secondary web palette, please use the mid-tone colors.

Group: When using multiple versions of a secondary color, group them together on the page in subsequent sections so application looks cohesive. Secondary colors can be used for H2 and H3 headers, buttons, and as backgrounds. Dark-tone versions are mostly used for content contrast against another version of the same color (For example, the light palm green and the mid-tone palm green can be placed together to compare, contrast, and visually tell your story). Once a secondary color has been used on the page, try not to use it again unless necessary. With a robust suite of web colors, you will never run out of inspiration.

Review & Moderate: Secondary colors should be used in moderation to spice up your content. A lot of color can be overwhelming if not balanced. When needed, edit down. Use white space and text in between your colored content sections to create a balanced look.