Spectre Text Colors

Last Updated : 12 Feb, 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 text color, along with understanding, how we can set the colors of the text in Spectre by using these classes.

Spectre Text Colors Class:

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

Syntax:

<element class = "text-colorName"> Content </element>

Below example illustrates the Spectre Text Colors.

Example:

HTML

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