Spectre Variables – Colors

Last Updated : 27 Oct, 2022

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/dist/spectre.min.css"> 
    <link rel="stylesheet" 
          href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" 
          href="https://unpkg.com/spectre.css/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/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/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>