Color

When to use it

The Color utility is used to apply pre-defined background colors to components, e.g. Section. It provides a way to quickly and consistently apply color schemes across your application.

TIP

Looking for text colors? See the Text utilities.

Variants

All variants follow the pattern .u-color-[colorname] (see examples below).

WARNING

As you may notice, these utilities break the pattern of having two dashes (--) for its modifier (in contrast to e.g. the Text color utility). There is no real reason for not fixing this, other than it's very much work to replace all current implementations.

What it looks like

Code examples

Black / White

<span class="u-color-black">u-color-black</span>
<span class="u-color-white">u-color-white</span>

Blue

<span class="u-color-blue-lightest">u-color-blue-lightest</span>
<span class="u-color-blue-lighter">u-color-blue-lighter</span>
<span class="u-color-blue-base">u-color-blue-base</span>
<span class="u-color-blue-darker">u-color-blue-darker</span>
<span class="u-color-blue-darkest">u-color-blue-darkest</span>

Turquoise

<span class="u-color-turquoise-lightest">u-color-turquoise-lightest</span>
<span class="u-color-turquoise-lighter">u-color-turquoise-lighter</span>
<span class="u-color-turquoise-base">u-color-turquoise-base</span>
<span class="u-color-turquoise-darker">u-color-turquoise-darker</span>
<span class="u-color-turquoise-darkest">u-color-turquoise-darkest</span>
<span class="u-color-turquoise-black">u-color-turquoise-black</span>

Yellow

<span class="u-color-yellow-lightest">u-color-yellow-lightest</span>
<span class="u-color-yellow-lighter">u-color-yellow-lighter</span>
<span class="u-color-yellow-base">u-color-yellow-base</span>
<span class="u-color-yellow-darker">u-color-yellow-darker</span>
<span class="u-color-yellow-darkest">u-color-yellow-darkest</span>

Grey

<span class="u-color-grey-white">u-color-grey-white</span>
<span class="u-color-grey-lightest">u-color-grey-lightest</span>
<span class="u-color-grey-lighter">u-color-grey-lighter</span>
<span class="u-color-grey-base">u-color-grey-base</span>
<span class="u-color-grey-dark">u-color-grey-dark</span>
<span class="u-color-grey-darker">u-color-grey-darker</span>
<span class="u-color-grey-darkest">u-color-grey-darkest</span>

Red

<span class="u-color-red-lightest">u-color-red-lightest</span>
<span class="u-color-red-lighter">u-color-red-lighter</span>
<span class="u-color-red-base">u-color-red-base</span>
<span class="u-color-red-darker">u-color-red-darker</span>
<span class="u-color-red-darkest">u-color-red-darkest</span>

Green

<span class="u-color-green-lightest">u-color-green-lightest</span>
<span class="u-color-green-lighter">u-color-green-lighter</span>
<span class="u-color-green-base">u-color-green-base</span>
<span class="u-color-green-darker">u-color-green-darker</span>
<span class="u-color-green-darkest">u-color-green-darkest</span>

Accessibility notes

The color utilities automatically invert in dark mode, but some values remain the same. Make sure you test your markup in both light and dark mode.