Skip to content

Main Content

Color

Besides our name and emblems, the most recognizable part of our Identity system is our colors.

Introduction
Must-read guidelines
Colors for Print
Color palette and guidelines
Colors for Web & Digital
Color palette and guidelines

Introduction

Principles for using Stanford colors

Use the identity colors, especially Cardinal Red

Consistently and appropriately using our identity colors is one of the most effective ways to make sure our communication reflects a recognizable Stanford feel. Cardinal Red has been Stanford’s official color since the University’s earliest days, and supporting colors are drawn from our campus architecture and the California landscape. Feel free to combine Identity colors for a unique feel that reflects the personality of your unit.

Don't convert a color from one color space to another

When working with our colors - especially Cardinal Red - start with the correct color space (and source file, where applicable) for your intended medium. Our colors will distort when unintentionally converting between CMYK or RGB/Hex (for example, saving an image for web that contains an embedded .eps version of our emblems). This is especially true for Cardinal Red which can either become too pink or too maroon. Make sure before publishing on the web or at press check that our colors - in particular Cardinal Red - are all the right hue.

Use Pantone (spot color only) or CMYK for externally printed pieces, RGB for documents printed in the office, and HEX for web and digital colors. DO NOT convert between these color spaces. When you embed an .eps version of our emblems, make sure it’s the correct HEX color value BEFORE saving for web or digital.

Use enough contrast for readability

Colors without enough difference between them can blend together and be hard to read. Use at least 3:1 contrast ratio between foreground and background - especially for text. Similarly, take care to comply with accessibility guidelines for colorblindness (such as avoiding some color combinations like red on green). For more information or tools to test color for accessibility, refer to the SOAP website.

Don't rely on color alone

When communicating emphasis or hierarchy, use size, shape, font weight or placement in addition to color. Remember, not everyone will be able to differentiate color by itself.

Back to top

Colors for Web & Digital

Use these colors on web and digital projects.

Web & digital palette

Primary Brand Colors

Cardinal Red

RGB:
140,21,21
Hex:
#8c1515

White

RGB:
255,255,255
Hex:
#ffffff

Cool Grey

RGB:
77,79,83
Hex:
#4d4f53

Black

RGB:
46,45,41
Hex:
#2e2d29

Supporting Colors

Bright Red

RGB:
177,4,14
Hex:
#B1040E

Chocolate

RGB:
47,36,36
Hex:
#2F2424

Stone

RGB:
84,73,72
Hex:
#544948

Fog

RGB:
244,244,244
Hex:
#F4F4F4

Light Sandstone

RGB:
249,246,239
Hex:
#F9F6EF

Sandstone

RGB:
210,194,149
Hex:
#d2c295

Warm Grey

RGB:
63,60,48
Hex:
#3f3c30

Beige

RGB:
157,149,115
Hex:
#9d9573

Light Sage

RGB:
199,209,197
Hex:
#c7d1c5

Clay

RGB:
95,87,79
Hex:
#5f574f

Cloud

RGB:
218,215,203
Hex:
#dad7cb

Driftwood

RGB:
182,177,169
Hex:
#b6b1a9

Stone (Legacy)

RGB:
146,139,129
Hex:
#928b81

Sandhill

RGB:
179,153,93
Hex:
#b3995d

Palo Alto

RGB:
23,94,84
Hex:
#175e54

Teal

RGB:
0,80,92
Hex:
#00505c

Purple

RGB:
83,40,79
Hex:
#53284f

Redwood

RGB:
141,60,30
Hex:
#8d3c1e

Brown

RGB:
94,48,50
Hex:
#5e3032

Sky

RGB:
0,152,219
Hex:
#0098db

Lagunita

RGB:
0,124,146
Hex:
#007c92

Mint

RGB:
0,155,118
Hex:
#009b76

Gold

RGB:
178,111,22
Hex:
#b26f16

Sun

RGB:
234,171,0
Hex:
#eaab00

Poppy

RGB:
233,131,0
Hex:
#e98300

Use the correct red for your situation

Cardinal Red is the primary Stanford brand color. Dark Red and Bright Red are not replacement colors, but can be used with Cardinal Red in appropriate contexts. If you use either of these alternate shades of red, you should always use Cardinal Red for the brand marks and other situations where you want to convey brand identity.

Cardinal Red (Brand)

Always use Cardinal Red for the brand marks and other situations where you want to convey brand identity.

Hex:
#8C1515

Dark Red (Text/links only)

Use Dark Red instead of Cardinal Red for sufficient color contrast on text or links. Don't use Dark Red in other contexts.

Hex:
#820000

Bright Red (Accent)

Bright Red is not a replacement for Cardinal Red but it can be used as an accent color to add energy and emphasis.

Hex:
#B1040E

Link colors

For link colors, use Bright Blue. Hover/active state on link colors should be Blue. As an alternate, use Dark Red as your primary link color with Black as the hover/active color. Do not use these shades of blue in contexts other than links.

Bright Blue (Link)

Bright blue should be used as the link color on light backgrounds.

Hex:
#006CB8

Blue (Link Hover)

Blue should be used for link hover color on light backgrounds.

Hex:
#00548f

Accessible use of color

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. Here are some recommended combinations:

Colors for light themes

Black (Text)

Hex:
#2e2d29

Bright Blue (Link)

Hex:
#006CB8

White (Background)

Hex:
#ffffff

Fog (Background)

Hex:
#F4F4F4

Light Sandstone (Background)

Hex:
#F9F6EF

Colors for dark themes

White (Text)

Hex:
#ffffff

White (Link)

Hex:
#ffffff

Chocolate(Background)

Hex:
#2F2424

Stone (Background)

Hex:
#544948

Image (Background)

Hex:
n/a

Various color contrast checkers are available, including Accessible Colors to check for foreground and background contrast. Use the Chrome extension Color Contrast Analyzer for verifying sufficient readability of text on complex background. There is more information about color contrast on the SOAP website.

Our web templates have been vetted for accessible use of color.

Back to top