VOOZH about

URL: https://www.geeksforgeeks.org/css/spectre-colors/

⇱ Spectre Colors - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Spectre Colors

Last Updated : 23 Jul, 2025

Spectre colors is 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 color for the background.

Colors are used to style your component, sometimes we need to color the text or sometimes we need to color the background.

Spectre Colors class:

  • text-colors: This is not the actual class name which will be used "colors" text should be replace with color name like primary, secondary etc. This is used to color the text.
  • bg-colors: This is not the actual class name which will be used "colors" text should be replace with color name like primary, secondary etc. This is used to color the background.

Syntax:

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

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

Below example illustrate the Spectre Colors:

Example:

Output:

👁 Spectre Colors
Spectre Colors

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

Comment