Color

Below are the colors that are approved by Stanford University Communications for use on the web. All colors are available as variables in Decanter prefixed by su-. Some colors come with tints and shades to achieve functional contrast.

Important Notice: colors have been deprecated. The full list can be viewed at the end of this page.

Primary Colors

Our primary palette consists of Cardinal Red, White, Black and Cool Grey. Our designs lean heavily on these colors, mixing in the secondary and accent palettes to build color schemes that are complementary and balanced.

Accent Colors

Although our primary palette should drive most Stanford communications materials, other colors can be added as appropriate. For those circumstances, we have developed this accent palette. These colors are intended to compliment our Stanford primary colors.

They should not become the predominant colors for a school, center, institute or department, but can be used as is or as inspiration for a custom secondary palette.

Web Interactive Colors

All Stanford websites should meet WCAG AA color contrast standards of a minimum 3.0 color contrast ratio for headings/bold text and 4.5 color contrast ratio for paragraph text. To use colors in an accessible way, pair light text on dark backgrounds or dark text on light backgrounds.

Digital red is not a replacement for Cardinal red—it can be used as an accent color on digital communications to add energy and emphasis. The light version can be used for interactive elements over dark backgrounds for contrast. The dark version can be used for smaller text over light backgrounds.

Use digital blue for links over light backgrounds, the dark version for link hover/focus states, and the light version for links over dark backgrounds. Do not use these shades of blue in contexts other than links.

Use digital green for things such as form validation, the dark version for link hover/focus states, and the light version for links over dark backgrounds.

Color Related Tools

Color Maps

A SCSS map $su-core-colors is available for core Decanter colors.

$su-core-colors: (
  brand:                        $su-color-cardinal-red,
  brand--bright:                $su-color-digital-red,
  brand--dark:                  $su-color-digital-red-dark,

  bg:                           $su-color-white,
  bg--reverse:                  $su-color-black,

  text:                         $su-color-black,
  text--high-contrast:          $su-color-black-true,
  text--reverse:                $su-color-white,

  link:                         $su-color-digital-blue,
  link--hover:                  $su-color-black,
  link--alt:                    $su-color-digital-red,
  link--alt-hover:              $su-color-black,
  link--reverse:                $su-color-white,
  link--reverse-hover:          $su-color-digital-red-light,

  card-border:                  #e3e3e3,
) !default;

Accessibility

Color is often used in web design for grouping related items, denoting required fields on a form, or distinguishing one piece of text from another, e.g., hyperlinks. Color enhances the aesthetics, usability, and even the accessibility of a website. However, some users have difficulty perceiving color so, when color is used, it must not be the only means of conveying information.

All Stanford Websites and web‐based applications are required to be accessible to its students, faculty, staff and participants in the University’s programs and activities who have disabilities by conforming to WCAG 2.0 Level AA.

If in doubt, you can check the color contrast of colors in Stanford’s palette by using the Stanford Color Contrast Chart tool.

Learn more about colors and accessibility on the Stanford Office of Digital Accessibility (SODA) site

Deprecated Colors:

• $su-color-digital-blue-dark replaces $su-color-blue as the new variable
• $su-color-digital-blue replaces $su-color-bright-blue as the new variable
• $su-color-digital-red replaces $su-color-bright-redas the new variable
• $su-color-archway-dark replaces $su-color-chocolate as the new variable
• $su-color-foggy replaces $su-color-cloud as the new variable
• $su-color-cardinal-red-dark replaces $su-color-dark-red as the new variable
• $su-color-digital-red-light replaces $su-color-vivid-red as the new variable
• $su-color-foggy-dark replaces $su-color-driftwood as the new variable
• $su-color-foggy-light replaces $su-color-fog as the new variable
• $su-color-brown will be removed in Decanter v7
• $su-color-clay will be removed in Decanter v7
• $su-color-gold will be removed in Decanter v7
• $su-color-light-sage will be removed in Decanter v7
• $su-color-mint will be removed in Decanter v7
• $su-color-purple will be removed in Decanter v7
• $su-color-redwood will be removed in Decanter v7
• $su-color-sandhill will be removed in Decanter v7
• $su-color-sandstone will be removed in Decanter v7
• $su-color-light-sandstone will be removed in Decanter v7
• $su-color-sun will be removed in Decanter v7
• $su-color-teal will be removed in Decanter v7
• $su-color-warm-grey will be removed in Decanter v7
• $su-color-cool-grey-75will be removed in Decanter v7