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.
#820000
$su-color-cardinal-red-dark
Cardinal Red
#8c1515
$su-color-cardinal-red
#b83a4b
$su-color-cardinal-red-light
White
#FFFFFF
$su-color-white
Black
#2e2d29
$su-color-black
Cool Grey
#4d4f53
$su-color-cool-grey
True Black
#000
$su-color-black-true
100% Black
#2e2d29
$su-color-black
90% Black
#43423e
$su-color-black-90
80% Black
#585754
$su-color-black-80
70% Black
#6d6c69
$su-color-black-70
60% Black
#767674
$su-color-black-60
50% Black
#979694
$su-color-black-50
40% Black
#ababa9
$su-color-black-40
30% Black
#c0c0bf
$su-color-black-30
20% Black
#d5d5d4
$su-color-black-20
10% Black
#eaeaea
$su-color-black-10
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.
#014240
$su-color-palo-alto-dark
Palo Alto
#175e54
$su-color-palo-alto
#2d716f
$su-color-palo-alto-light
#017e7c
$su-color-palo-verde-dark
Palo Verde
#279989
$su-color-palo-verde
#59b3a9
$su-color-palo-verde-light
#7a863b
$su-color-olive-dark
Olive
#8f993e
$su-color-olive
#a6b168
$su-color-olive-light
#417865
$su-color-bay-dark
Bay
#6fa287
$su-color-bay
#8ab8a7
$su-color-bay-light
#016895
$su-color-sky-dark
Sky
#4298b5
$su-color-sky
#67afd2
$su-color-sky-light
#006b81
$su-color-lagunita-dark
Lagunita
#007c92
$su-color-lagunita
#009ab4
$su-color-lagunita-light
#d48029
$su-color-poppy-dark
Poppy
#e98300
$su-color-poppy
#f9a44a
$su-color-poppy-light
#c74632
$su-color-spirited-dark
Spirited
#e04f39
$su-color-spirited
#f4795b
$su-color-spirited-light
#fec51d
$su-color-illuminating-dark
Illuminating
#fedd5c
$su-color-illuminating
#ffe781
$su-color-illuminating-light
#350d36
$su-color-plum-dark
Plum
#620059
$su-color-plum
#734675
$su-color-plum-light
#42081b
$su-color-brick-dark
Brick
#651c32
$su-color-brick
#7f2d48
$su-color-brick-light
#2f2424
$su-color-archway-dark
Archway
#5d4b3c
$su-color-archway
#766253
$su-color-archway-light
#544948
$su-color-stone-dark
Stone
#7f7776
$su-color-stone
#d4d1d1
$su-color-stone-light
#b6b1a9
$su-color-foggy-dark
Fog
#dad7cb
$su-color-foggy
#f4f4f4
$su-color-foggy-light
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.
#820000
$su-color-digital-red-dark
Digital Red
#b1040e
$su-color-digital-red
#e50808
$su-color-digital-red-light
#00548f
$su-color-digital-blue-dark
Digital Blue
#006cb8
$su-color-bright-blue
#6fc3ff
$su-color-digital-blue-light
#006f54
$su-color-digital-green-dark
Digital Green
#008566
$su-color-digital-green
#1aecba
$su-color-digital-green-light
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.
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-red
as 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-75
will be removed in Decanter v7