Spectre Variables - Colors

Last Updated : 23 Jul, 2025

Spectre Variables Colors are used to hold a few evergreen colors like red, green yellow, blue, gray, etc. Each color has an individual specific code, we need a variable to hold that color code to use it in the future. 

Spectre Variable Colors use the same method in its file like text-primary variable will hold the primary color for the text. Similarly bg-primary variable will hold the primary color for the background.

We already have an article on Spectre Colors where all the classes(Variable) are well described.

 

Syntax:

  • For text color
<element class="text-colorname">...</element>
  • For background color
<element class="bg-colorname">...</element>

Example 1: In this example, we will use the text variable class.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" 
          href="https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" 
          href="https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" 
          href="https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Spectre Variables - Colors</strong>
        <br>
        <span class="text-primary">Primary Variable Color</span>
        <br>
        <span class="text-secondary">Secondary Variable Color</span>
        <br>
        <span class="text-dark">Dark Variable Color</span>
        <br>
        <span class="text-gray">Gray Variable Color</span>
        <br>
        <span class="text-light">Light Variable Color</span>
        <br>
        <span class="text-success">Success Variable Color</span>
        <br>
        <span class="text-warning">Warning Variable Color</span>
        <br>
        <span class="text-error">Error Variable Color</span>
    </center>
</body>
</html>

Output:

 

Example 2: In this example, we will use the background variable class.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Spectre Variables - Colors</strong>
        <br>
        <span class="bg-primary">Primary Variable Color</span>
        <br>
        <span class="bg-secondary">Secondary Variable Color</span>
        <br>
        <span class="bg-dark">Dark Variable Color</span>
        <br>
        <span class="bg-gray">Gray Variable Color</span>
        <br>
        <span class="bg-light">Light Variable Color</span>
        <br>
        <span class="bg-success">Success Variable Color</span>
        <br>
        <span class="bg-warning">Warning Variable Color</span>
        <br>
        <span class="bg-error">Error Variable Color</span>
    </center>
</body>
</html>

Output:

 

Reference: https://picturepan2.github.io/spectre/utilities/colors.html

Comment

Explore