Colors

Color utilities apply text color or background color using the design system palette. See the Colors reference for hex values, Sass functions, and contrast guidance.

Text Color Classes

Pattern: .util-color-{name}

Swatch	Class	Color
	.util-color-black	Arch Black
	.util-color-red	Bulldog Red
	.util-color-white	Chapel Bell White
	.util-color-glory	Glory Glory
	.util-color-lake	Lake Herrick
	.util-color-hedges	Hedges
	.util-color-olympic	Olympic
	.util-color-sanford	Sanford
	.util-color-field	Herty Field
	.util-color-athens	Athens
	.util-color-stegeman	Stegeman
	.util-color-creamery	Creamery
	.util-color-odyssey	Odyssey
	.util-color-light-gray	Light Gray
	.util-color-gray	Gray
	.util-color-dark-gray	Dark Gray

Background Color Classes

Pattern: .util-background-{name}

Swatch	Class	Color
	.util-background-black	Arch Black
	.util-background-red	Bulldog Red
	.util-background-white	Chapel Bell White
	.util-background-glory	Glory Glory
	.util-background-lake	Lake Herrick
	.util-background-hedges	Hedges
	.util-background-olympic	Olympic
	.util-background-sanford	Sanford
	.util-background-field	Herty Field
	.util-background-athens	Athens
	.util-background-stegeman	Stegeman
	.util-background-creamery	Creamery
	.util-background-odyssey	Odyssey
	.util-background-light-gray	Light Gray
	.util-background-gray	Gray
	.util-background-dark-gray	Dark Gray

Tint Variant Classes

Tinted variants lighten a color by mixing it with white. The class pattern is .util-color-{name}__{level} or .util-background-{name}__{level}.

Dark Colors (30% and 50%)

Swatch	Text Class	Background Class	Color	Tint
	.util-color-sanford__30	.util-background-sanford__30	Sanford	30%
	.util-color-sanford__50	.util-background-sanford__50	Sanford	50%
	.util-color-field__30	.util-background-field__30	Herty Field	30%
	.util-color-field__50	.util-background-field__50	Herty Field	50%

Neutral Colors (30%, 50%, and 75%)

Swatch	Text Class	Background Class	Color	Tint
	.util-color-stegeman__30	.util-background-stegeman__30	Stegeman	30%
	.util-color-stegeman__50	.util-background-stegeman__50	Stegeman	50%
	.util-color-stegeman__75	.util-background-stegeman__75	Stegeman	75%
	.util-color-creamery__30	.util-background-creamery__30	Creamery	30%
	.util-color-creamery__50	.util-background-creamery__50	Creamery	50%
	.util-color-creamery__75	.util-background-creamery__75	Creamery	75%
	.util-color-odyssey__30	.util-background-odyssey__30	Odyssey	30%
	.util-color-odyssey__50	.util-background-odyssey__50	Odyssey	50%
	.util-color-odyssey__75	.util-background-odyssey__75	Odyssey	75%