Spectre Background Colors

Last Updated : 21 Mar, 2022

Spectre colors are one of the most useful utilities, there are two types of things where we can use colors. Like we can set colors for the text and we can set colors for the background.

In this article, we will learn about the various classes available for the background, along with understanding how we can set the colors of the background in Spectre by using these classes.

Spectre background Colors Class:

bg-error: This class is used to set the background with the red color.
bg-warning: This class is used to set the background with a yellow color.
bg-success: This class is used to set the background with a green color.
bg-light: This class is used to set the background with white color.
bg-gray: This class is used to set the background with a gray color.
bg-dark: This class is used to set the background with black color.
bg-secondary: This class is used to set the background with a light gray color.
bg-primary: This class is used to set the background with a blue color.

Syntax:

<element class="bg-colorname"> Content </element>

Below example illustrate the Spectre background Colors.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SPECTRE Background Class</title> 
    <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>GeeksforGeeks</h1> 
        <strong>SPECTRE Background Colors Class</strong> 
        <br><br> 
        <p class="bg-error"> 
            Error Background Color 
        </p> 
  
        <p class="bg-warning"> 
            Warning Background Color 
        </p> 
  
        <p class="bg-success"> 
            Success Background Color 
        </p> 
  
        <p class="bg-light"> 
            Light Background Color 
        </p> 
  
        <p class="bg-gray"> 
            Gray Background Color 
        </p> 
  
        <p class="bg-dark"> 
            Dark Background Color 
        </p> 
  
        <p class="bg-secondary"> 
            Secondary Background Color 
        </p> 
  
        <p class="bg-primary"> 
            Primary background Color 
        </p> 
    </center> 
</body> 
  
</html>