Color palette for print

The color palette is broken down into three sections. The primary colors are most deeply associated with the UW and should be used most often. Accent colors should be used sparingly and not cover more than 15% of any given design. Accent colors may not be used for official University logos. Neutral colors are colors that don’t compete with the primary and secondary palette.

See the design examples tab to see how the colors work together. Use color combinations that provide enough contrast between text/graphic elements and backgrounds. See the digital accessibility tab for more information.

Primary Colors

Accent Colors

Metallic Color

Neutral Colors

Color palette for digital

The color palette is broken down into three sections. The primary colors are most deeply associated with the UW and should be used most often. Accent colors should be used sparingly and not cover more than 15% of any given design. Accent colors may not be used for official University logos. Neutral colors are colors that don’t compete with the primary and secondary palette. They are usually used for text, callout boxes, and borders or lines.

See the design examples tab to see how the colors work together. Use color combinations that provide enough contrast between text/graphic elements and backgrounds. See the digital accessibility tab for more information.

Click on a color swatch below to copy the HEX code.

Primary Colors

Accent Colors

Neutral Colors

Digital accessibility

When designing the color scheme of a website, web page, or document, be sure to consider whether there is sufficient contrast between foreground and background colors for text and non-text components, such as icons. Some users have difficulty perceiving text if there is too little contrast between foreground and background. The W3C Web Content Accessibility Guidelines  defines specific contrast ratios that must be met for compliance.

Use the color contrast checker below to ensure the color combination you plan to use meets accessibility standards.

To check your colors, enter the HEX or RGB value for the foreground color (text or components) and background color. Make sure the “#” sign is included. If the color meets accessibility standards, the contrast ratio result will show “AA” or “AAA.” If there is not enough contrast, the results will show “FAIL.”

Color combinations may get different results based on whether they are being used for headlines, body copy or components.

• Headlines are considered to be 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
• Text is considered any body copy that is smaller than a headline.
• Components refers to non-text content such as icons, charts or other graphics that convey information but would not be read aloud by a screenreader.

For more information, see the color contrast section of our IT Accessibility Checklist.

Contrast checker

Tool courtesy of Nikao Creatives | Github Repo

Frequently used color combinations that are compliant

Examples of color combinations that are NOT compliant and should not be used

Design examples

The examples below show examples of approved color usage in designs. Remember, primary colors should be used most often, accent colors should take up no more 15% of any design.

How to use accent colors

Our accent colors — pink, teal, green & lavender — should be used sparingly and not cover more than 15% of any given design. Accent colors may not be used for official University logos.

Click on the number of accent colors you’d like to use on the slider below to view examples of what 15% of a design looks like. Regardless of how many accent colors you use, the combined total amount of accent color on your design should not exceed 15%.

The 15% rule also applies to apparel and merchandise. For apparel, only primary colors and neutrals may be used for fabrics.

• One accent
• Two accents
• Three accents
• Four accents