Color utilities#

• Spectre.css
• Utilities
• Color utilities

Color utilities are used for changing colors for text, link and background.This page contains CSS classes to change the text, link and background color.

Demonstration

Available colors#

Spectre.css has CSS classes prefixed with .text and .bg suffixed by the specified color and the following table contains color suffixes for them. If the color shade dark is available then add -dark suffix to the class name, and if has light is available add -light suffix to the class name. For example gray color shade dark is available then to use the text of this color add class .text-gray-dark.

Shades#

<!-- Text dark/light colors -->
<span class="text-dark">text dark color</span>
<span class="text-light bg-dark">text light color</span>

<!-- Link dark/light colors -->
<a class="text-dark" href="#">dark link</a>
<a class="text-light bg-dark" href="#">light link</a>

<!-- Shades -->
<span class="bg-dark">dark bg</span>
<span class="bg-light">light bg</span>

Accent color#

<!-- Text accent color -->
<span class="text-accent">text accent color</span>

<!-- Link accent color -->
<a class="text-accent" href="#colors-accent">accent link</a>

<span class="bg-accent">accent bg</span>

Primary colors#

<!-- Text primary colors -->
<span class="text-primary">text primary color</span>
<span class="text-primary-dark">text primary color dark</span>
<span class="text-primary-light">text primary color light</span>

<!-- Link primary colors -->
<a class="text-primary" href="#colors-primary">primary link</a>
<a class="text-primary-dark" href="#colors-primary">primary link dark</a>
<a class="text-primary-light bg-primary" href="#colors-primary">primary link light</a>

<!-- Primary colors -->
<span class="bg-primary">primary bg</span>
<span class="bg-primary-dark">primary bg dark</span>
<span class="bg-primary-light text-secondary-light">primary bg light</span>

Secondary colors#

<!-- Text secondary colors -->
<span class="text-secondary">text secondary color</span>
<span class="text-secondary-dark">text secondary color dark</span>
<span class="text-secondary-light bg-primary">text secondary color light</span>

<!-- Link secondary colors -->
<a class="text-secondary" href="#">secondary color</a>
<a class="text-secondary-dark" href="#">secondary color dark</a>
<a class="text-secondary-light" href="#">secondary color light</a>

<!-- Secondary colors -->
<span class="bg-secondary text-primary">secondary bg</span>
<span class="bg-secondary-dark text-primary">secondary bg dark</span>
<span class="bg-secondary-light text-primary">secondary bg light</span>

Gray colors#

<!-- Text gray colors -->
<span class="text-gray">text gray color</span>
<span class="text-gray-dark">text gray color dark</span>
<span class="text-gray-light bg-gray-dark p-1 rounded">text gray color light</span>

<!-- Link gray colors -->
<a class="text-gray" href="#colors-gray">gray link</a>
<a class="text-gray-dark" href="#colors-gray">gray link dark</a>
<a class="text-gray-light bg-gray-dark" href="#colors-gray">gray link light</a>

<!-- Gray colors -->
<span class="bg-gray">gray bg</span>
<span class="bg-gray-dark">gray bg dark</span>
<span class="bg-gray-light">gray bg light</span>

Bg colors#

<span class="text-bg">text bg color</span>
<span class="text-bg-dark">text bg color dark</span>
<span class="text-bg-light">text bg color light</span>

<!-- Link bg colors -->
<a class="text-bg" href="#colors-bg">bg link</a>
<a class="text-bg-dark" href="#colors-bg">bg link dark</a>
<a class="text-bg-light bg-gray-dark" href="#colors-bg">bg link light</a>

<!-- Bg colors -->
<div class="bg-bg text-body-font">bg bg</div>
<div class="bg-bg-dark text-body-font">bg bg dark</div>
<div class="bg-bg-light text-body-font">bg bg light</div>

Border colors#

<span class="text-border">text border color</span>
<span class="text-border-dark">text border color dark</span>
<span class="text-border-light">text border color light</span>

<!-- Link border colors -->
<a class="text-border" href="#colors-border">border link</a>
<a class="text-border-dark" href="#colors-border">border link dark</a>
<a class="text-border-light bg-gray-dark" href="#colors-border">border link light</a>

<!-- Bg border colors -->
<span class="bg-border">border bg</span>
<span class="bg-border-dark">border bg dark</span>
<span class="bg-border-light">border bg light</span>

Link colors#

<!-- Text link colors -->
<span class="text-link">text link color</span>
<span class="text-link-dark">text link color dark</span>
<span class="text-link-light">text link color light</span>

<!-- Link link colors -->
<a class="text-link" href="#colors-link">link</a>
<a class="text-link-dark" href="#colors-link">link dark</a>
<a class="text-link-light" href="#colors-link">link light</a>

<!-- Link colors -->
<span class="bg-link">link bg</span>
<span class="bg-link-dark">link bg dark</span>
<span class="bg-link-light">link bg light</span>

Control colors#

<!-- Text control colors -->
<span class="text-disabled">text disabled color</span>
<span class="text-error">text error color</span>
<span class="text-info">text info color</span>
<span class="text-success">text success color</span>
<span class="text-warning">text warning color</span>

<!-- Link control colors -->
<a class="text-disabled" href="#colors-control">disabled link</a>
<a class="text-error" href="#colors-control">error link</a>
<a class="text-info" href="#colors-control">info link</a>
<a class="text-success" href="#colors-control">success link</a>
<a class="text-warning" href="#colors-control">warning link</a>

<!-- Control colors -->
<span class="bg-disabled">disabled bg</span>
<span class="bg-error">error bg</span>
<span class="bg-info">info bg</span>
<span class="bg-success">success bg</span>
<span class="bg-warning">warning bg</span>

Body colors#

<!-- Text body colors -->
<span class="text-body-bg">text body bg color</span>
<span class="text-body-font">text body font color</span>

<!-- Link body colors -->
<a class="text-body-bg" href="#colors-body">body bg color</a>
<a class="text-body-font" href="#colors-body">body font color</a>

<!-- Body colors -->
<div class="bg-body-bg">bg body bg</div>
<div class="bg-body-font">bg body font</div>

Other colors#

<!-- Text other colors -->
<span class="text-code">code color</span>
<span class="text-highlight">highlight color</span>

<!-- Link other colors -->
<a class="text-code " href="#">code color</a>
<a class="text-highlight" href="#">highlight color</a>

<!-- Other colors -->
<span class="bg-code">code bg</span>
<span class="bg-highlight text-warning">highlight bg</span>

• utilities - Previous
  Utilities
• Next - utilities
  Cursors