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 topColors for Print
Use these colors on print projects.
Primary Brand Colors
Cardinal Red
- Pantone:
- 201C
- CMYK:
- 0,100,65,34
- Pantone:
- 201U
- CMYK:
- 0,95,75,15
White
- Pantone:
- n/a
- CMYK:
- n/a
Cool Grey
- Pantone:
- Cool Gray 11C/U
- CMYK:
- 48,36,24,66
Black
- Pantone:
- Process Black
- CMYK:
- 0,0,0,100
Supporting Colors
Sandstone
- Pantone:
- 427C/U
- CMYK:
- 3,12,34,10
Light Sage
- Pantone:
- 5665C/U
- CMYK:
- 12,3,13,8
Clay
- Pantone:
- 405C/U
- CMYK:
- 23,29,32,67
Cloud
- Pantone:
- 7527C/U
- CMYK:
- 3,4,14,8
Driftwood
- Pantone:
- 401C/U
- CMYK:
- 8,9,14,24
Stone (Legacy)
- Pantone:
- 403C/U
- CMYK:
- 14,18,22,42
Sandhill
- Pantone:
- 465C/U
- CMYK:
- 7,27,55,22
Palo Alto
- Pantone:
- 561C/U
- CMYK:
- 83,16,45,54
Teal
- Pantone:
- 3165C/U
- CMYK:
- 100,12,28,59
Purple
- Pantone:
- 262C/U
- CMYK:
- 57,92,12,56
Redwood
- Pantone:
- 7526C/U
- CMYK:
- 10,78,100,46
Brown
- Pantone:
- 1817C/U
- CMYK:
- 23,84,54,68
Sky
- Pantone:
- 2925C/U
- CMYK:
- 84,21,0,0
Lagunita
- Pantone:
- 3145C/U
- CMYK:
- 100,5,20,22
Mint
- Pantone:
- 334C/U
- CMYK:
- 100,0,60,3
Gold
- Pantone:
- 7511C/U
- CMYK:
- 5,48,93,23
Sun
- Pantone:
- 124C/U
- CMYK:
- 0,27,100,0
Poppy
- Pantone:
- 144C/U
- CMYK:
- 0,52,100,0
Colors for Web & Digital
Use these colors on web and digital projects.
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