Colors

The colors that style most Astral elements and components

Text colors

To apply a text color, just append text-* to the color class like this: text-primary

primary color

secondary color

darkcolor

light color

success color

info color

warning color

error color

<p class="text-primary"></p>
<p class="text-secondary"></p>
<p class="text-dark"></p>
<p class="text-light"></p>
<p class="text-success"></p>
<p class="text-info"></p>
<p class="text-warning"></p>
<p class="text-error"></p>
Note our color classes are the text in bold above 👆🏼 .For example text-primary

Other Text colors

text-red-100

text-red-200

text-red-300

text-red-400

text-red-500

text-pink-100

text-pink-200

text-pink-300

text-pink-400

text-pink-500

text-orange-100

text-orange-200

text-orange-300

text-orange-400

text-orange-500

text-yellow-100

text-yellow-200

text-yellow-300

text-yellow-400

text-yellow-500

text-purple-100

text-purple-200

text-purple-300

text-purple-400

text-purple-500

text-indigo-100

text-indigo-200

text-indigo-300

text-indigo-400

text-indigo-500

text-green-100

text-green-200

text-green-300

text-green-400

text-green-500

text-blue-100

text-blue-200

text-blue-300

text-blue-400

text-blue-500

text-light-blue-100

text-light-blue-200

text-light-blue-300

text-light-blue-400

text-light-blue-500

text-brown-100

text-brown-200

text-brown-300

text-brown-400

text-brown-500

text-gray-100

text-gray-200

text-gray-300

text-gray-400

text-gray-500

text-gray-600

text-gray-700

text-gray-800

On this page