Color utilities are used for changing colors for text, link and background.
primary color
secondary color
invert color
gray color
default color
success color
warning color
error color
<span class="text-primary">primary color</span>
<span class="text-secondary">secondary color</span>
<span class="text-invert bg-invert">invert color</span>
<span class="text-gray">gray color</span>
<span class="text-default">default color</span>
<span class="text-success">success color</span>
<span class="text-warning">warning color</span>
<span class="text-error">error color</span>
<a class="text-primary" href="#">primary color</a>
<a class="text-secondary" href="#">secondary color</a>
<a class="text-invert bg-invert" href="#">invert color</a>
<a class="text-gray" href="#">gray color</a>
<a class="text-default" href="#">default color</a>
<a class="text-success" href="#">success color</a>
<a class="text-warning" href="#">warning color</a>
<a class="text-error" href="#">error color</a>
primary bg
secondary bg
invert bg
gray bg
success bg
warning bg
error bg
<div class="bg-primary text-light">primary bg</div>
<div class="bg-secondary text-primary">secondary bg</div>
<div class="bg-invert text-invert">invert bg</div>
<div class="bg-gray">gray bg</div>
<div class="bg-success">success bg text-light</div>
<div class="bg-warning">warning bg text-light</div>
<div class="bg-error">error bg text-light</div>