Color Utilities

Table of Contents

Text Color
Link Color
Text Color Sass API
Background Color
Background Color Sass API

Text Color

Utility	Example
text-blue	The quick brown fox jumped over the lazy dog.
text-indigo	The quick brown fox jumped over the lazy dog.
text-purple	The quick brown fox jumped over the lazy dog.
text-pink	The quick brown fox jumped over the lazy dog.
text-red	The quick brown fox jumped over the lazy dog.
text-orange	The quick brown fox jumped over the lazy dog.
text-yellow	The quick brown fox jumped over the lazy dog.
text-green	The quick brown fox jumped over the lazy dog.
text-teal	The quick brown fox jumped over the lazy dog.
text-cyan	The quick brown fox jumped over the lazy dog.
text-primary	The quick brown fox jumped over the lazy dog.
text-secondary	The quick brown fox jumped over the lazy dog.
text-success	The quick brown fox jumped over the lazy dog.
text-info	The quick brown fox jumped over the lazy dog.
text-warning	The quick brown fox jumped over the lazy dog.
text-danger	The quick brown fox jumped over the lazy dog.
text-dark	The quick brown fox jumped over the lazy dog.
text-light	The quick brown fox jumped over the lazy dog.
text-muted	The quick brown fox jumped over the lazy dog.
text-white	The quick brown fox jumped over the lazy dog.
text-black-50	The quick brown fox jumped over the lazy dog.
text-white-50	The quick brown fox jumped over the lazy dog.
text-reset	The quick brown fox jumped over the lazy dog. This sets `color: inherit !important`.

Snippet

<div className="text-blue" href="#1"></div>
<div className="text-indigo" href="#1"></div>
<div className="text-purple" href="#1"></div>
<div className="text-pink" href="#1"></div>
<div className="text-red" href="#1"></div>
<div className="text-orange" href="#1"></div>
<div className="text-yellow" href="#1"></div>
<div className="text-green" href="#1"></div>
<div className="text-teal" href="#1"></div>
<div className="text-cyan" href="#1"></div>
<div className="text-primary"></div>
<div className="text-secondary"></div>
<div className="text-success"></div>
<div className="text-info"></div>
<div className="text-warning"></div>
<div className="text-danger"></div>
<div className="text-dark"></div>
<div className="text-light"></div>
<div className="text-muted"></div>
<div className="text-white"></div>
<div className="text-black-50"></div>
<div className="text-white-50"></div>
<div className="text-reset"></div>

Link Color

Text color utilities applied to anchor tags. These styles will only be output if a text color has hover state styles.

Utility	Example
text-blue	Link to Somewhere
text-indigo	Link to Somewhere
text-purple	Link to Somewhere
text-pink	Link to Somewhere
text-red	Link to Somewhere
text-orange	Link to Somewhere
text-yellow	Link to Somewhere
text-green	Link to Somewhere
text-teal	Link to Somewhere
text-cyan	Link to Somewhere
text-primary	Link to Somewhere
text-secondary	Link to Somewhere
text-success	Link to Somewhere
text-info	Link to Somewhere
text-warning	Link to Somewhere
text-danger	Link to Somewhere
text-dark	Link to Somewhere
text-light	Link to Somewhere
text-muted	Link to Somewhere
text-white	Link to Somewhere
text-black-50	Link to Somewhere
text-white-50	Link to Somewhere

Snippet

<a className="text-blue" href="#1"></a>
<a className="text-indigo" href="#1"></a>
<a className="text-purple" href="#1"></a>
<a className="text-pink" href="#1"></a>
<a className="text-red" href="#1"></a>
<a className="text-orange" href="#1"></a>
<a className="text-yellow" href="#1"></a>
<a className="text-green" href="#1"></a>
<a className="text-teal" href="#1"></a>
<a className="text-cyan" href="#1"></a>
<a className="text-primary" href="#1"></a>
<a className="text-secondary" href="#1"></a>
<a className="text-success" href="#1"></a>
<a className="text-info" href="#1"></a>
<a className="text-warning" href="#1"></a>
<a className="text-danger" href="#1"></a>
<a className="text-dark" href="#1"></a>
<a className="text-light" href="#1"></a>
<a className="text-muted" href="#1"></a>
<a className="text-white" href="#1"></a>
<a className="text-black-50" href="#1"></a>
<a className="text-white-50" href="#1"></a>

Text Color Sass API

The map $text-theme-colors allows generating any number of text color variants. If a key starts with ., # or %, Clay will output it as is, otherwise we will prepend .text- to the key (e.g., .text-primary).

Snippet

$text-theme-colors: (
  'primary': (
    color: $primary !important,
  ),
  '%text-tertiary': (
    color: green !important,
  ),
  '.text-tertiary': (
    extend: '%text-tertiary',
  ),
  '.text-quaternary': (
    extend: '%text-tertiary',
  ),
);

Outputs:

Snippet

.text-primary {
  color: #0b5fff !important;
}

.text-tertiary,
.text-quaternary {
  color: green !important;
}

Background Color

Utility	Example
bg-blue	The quick brown fox jumped over the lazy dog.
bg-indigo	The quick brown fox jumped over the lazy dog.
bg-purple	The quick brown fox jumped over the lazy dog.
bg-pink	The quick brown fox jumped over the lazy dog.
bg-red	The quick brown fox jumped over the lazy dog.
bg-orange	The quick brown fox jumped over the lazy dog.
bg-yellow	The quick brown fox jumped over the lazy dog.
bg-green	The quick brown fox jumped over the lazy dog.
bg-teal	The quick brown fox jumped over the lazy dog.
bg-cyan	The quick brown fox jumped over the lazy dog.
bg-primary	The quick brown fox jumped over the lazy dog.
bg-secondary	The quick brown fox jumped over the lazy dog.
bg-success	The quick brown fox jumped over the lazy dog.
bg-info	The quick brown fox jumped over the lazy dog.
bg-warning	The quick brown fox jumped over the lazy dog.
bg-danger	The quick brown fox jumped over the lazy dog.
bg-dark	The quick brown fox jumped over the lazy dog.
bg-light	The quick brown fox jumped over the lazy dog.
bg-white	The quick brown fox jumped over the lazy dog.
bg-transparent	The quick brown fox jumped over the lazy dog.

Snippet

<div className="bg-blue"></div>
<div className="bg-indigo"></div>
<div className="bg-purple"></div>
<div className="bg-pink"></div>
<div className="bg-red"></div>
<div className="bg-orange"></div>
<div className="bg-yellow"></div>
<div className="bg-green"></div>
<div className="bg-teal"></div>
<div className="bg-cyan"></div>
<div className="bg-primary"></div>
<div className="bg-secondary"></div>
<div className="bg-success"></div>
<div className="bg-info"></div>
<div className="bg-warning"></div>
<div className="bg-danger"></div>
<div className="bg-dark"></div>
<div className="bg-light"></div>
<div className="bg-white"></div>
<div className="bg-transparent"></div>

Background Color Sass API

The map $bg-theme-colors allows generating any number of background color variants. If a key starts with ., # or %, Clay will output it as is, otherwise we will prepend .bg- to the key (e.g., .bg-primary).

Snippet

$bg-theme-colors: (
  'primary': (
    background-color: $primary !important,
  ),
  '%bg-tertiary': (
    background-color: green !important,
  ),
  '.bg-tertiary': (
    extend: '%bg-tertiary',
  ),
  '.bg-quaternary': (
    extend: '%bg-tertiary',
  ),
);

Outputs:

Snippet

.bg-primary {
  background-color: #0b5fff !important;
}

.bg-tertiary,
.bg-quaternary {
  background-color: green !important;
}

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 9, 2025 at 6:15:38 AM

Table of Contents

Text Color
Link Color
Text Color Sass API
Background Color
Background Color Sass API