Colors

The theme provides predefined color utilities for backgrounds, text and gray scales.

Background Colors

bg-primary

bg-secondary

bg-success

bg-warning

bg-error

<div class="bg-primary">bg-primary</div>
<div class="bg-secondary">bg-secondary</div>
<div class="bg-success">bg-success</div>
<div class="bg-warning">bg-warning</div>
<div class="bg-error">bg-error</div>

Background Opacity

no opacity

opacity 75

opacity 50

opacity 25

opacity 10

<div class="bg-primary">no opacity</div>
<div class="bg-primary bg-opacity-75">opacity 75</div>
<div class="bg-primary bg-opacity-50">opacity 50</div>
<div class="bg-primary bg-opacity-25">opacity 25</div>
<div class="bg-primary bg-opacity-10">opacity 10</div>

Background Gray Scales

bg-gray-50

bg-gray-100

bg-gray-150

bg-gray-200

bg-gray-250

bg-gray-300

bg-gray-350

bg-gray-400

bg-gray-450

bg-gray-500

bg-gray-550

bg-gray-600

bg-gray-650

bg-gray-700

bg-gray-750

bg-gray-800

bg-gray-850

bg-gray-900

bg-gray-950

<div class="bg-gray-50">bg-gray-50</div>
<div class="bg-gray-100">bg-gray-100</div>
<div class="bg-gray-150">bg-gray-150</div>
<div class="bg-gray-200">bg-gray-200</div>
<div class="bg-gray-250">bg-gray-250</div>
<div class="bg-gray-300">bg-gray-300</div>
<div class="bg-gray-350">bg-gray-350</div>
<div class="bg-gray-400">bg-gray-400</div>
<div class="bg-gray-450">bg-gray-450</div>
<div class="bg-gray-500">bg-gray-500</div>
<div class="bg-gray-550">bg-gray-550</div>
<div class="bg-gray-600">bg-gray-600</div>
<div class="bg-gray-650 text-inverse">bg-gray-650</div>
<div class="bg-gray-700 text-inverse">bg-gray-700</div>
<div class="bg-gray-750 text-inverse">bg-gray-750</div>
<div class="bg-gray-800 text-inverse">bg-gray-800</div>
<div class="bg-gray-850 text-inverse">bg-gray-850</div>
<div class="bg-gray-900 text-inverse">bg-gray-900</div>
<div class="bg-gray-950 text-inverse">bg-gray-950</div>

Text Colors

text-primary

text-secondary

text-success

text-warning

text-error

<div class="text-primary">text-primary</div>
<div class="text-secondary">text-secondary</div>
<div class="text-success">text-success</div>
<div class="text-warning">text-warning</div>
<div class="text-error">text-error</div>

Text Gray Scales

text-gray-50

text-gray-100

text-gray-150

text-gray-200

text-gray-250

text-gray-300

text-gray-350

text-gray-400

text-gray-450

text-gray-500

text-gray-550

text-gray-600

text-gray-650

text-gray-700

text-gray-750

text-gray-800

text-gray-850

text-gray-900

text-gray-950

<div class="text-gray-50">text-gray-50</div>
<div class="text-gray-100">text-gray-100</div>
<div class="text-gray-150">text-gray-150</div>
<div class="text-gray-200">text-gray-200</div>
<div class="text-gray-250">text-gray-250</div>
<div class="text-gray-300">text-gray-300</div>
<div class="text-gray-350">text-gray-350</div>
<div class="text-gray-400">text-gray-400</div>
<div class="text-gray-450">text-gray-450</div>
<div class="text-gray-500">text-gray-500</div>
<div class="text-gray-550">text-gray-550</div>
<div class="text-gray-600">text-gray-600</div>
<div class="text-gray-650">text-gray-650</div>
<div class="text-gray-700">text-gray-700</div>
<div class="text-gray-750">text-gray-750</div>
<div class="text-gray-800">text-gray-800</div>
<div class="text-gray-850">text-gray-850</div>
<div class="text-gray-900">text-gray-900</div>
<div class="text-gray-950">text-gray-950</div>

Raw utility colors for explicit contrast use cases

bg-white

bg-black

text-black

text-white

<div class="bg-white">bg-white</div>
<div class="bg-black text-inverse">bg-black</div>
<div class="text-black">text-black</div>
<div class="text-white bg-black">text-white</div>

Previous: General

← Get started

Next: Utilities

Typography →

Menu