Text Color
newUtilities for controlling the text color of an element.
Contents
Use text color utilities to set text to a specific color. See our the Color System Design
Quick reference
| Class | Properties | |
|---|---|---|
| .text-primary | color: rgb(0, 82, 204) | Aa |
| .text-secondary | color: rgb(82, 67, 170) | Aa |
| .text-success | color: rgb(0, 135, 90) | Aa |
| .text-danger | color: rgb(222, 53, 11) | Aa |
| .text-warning | color: rgb(255, 171, 0) | Aa |
| .text-info | color: rgb(66, 82, 110) | Aa |
| .text-light | color: rgb(250, 251, 252) | Aa |
| .text-dark | color: rgb(9, 30, 66) | Aa |
| .text-blue-50 | color: rgb(222, 235, 255); | Aa |
| .text-blue-75 | color: rgb(179, 212, 255); | Aa |
| .text-blue-100 | color: rgb(76, 154, 255); | Aa |
| .text-blue-200 | color: rgb(38, 132, 255); | Aa |
| .text-blue-300 | color: rgb(0, 101, 255); | Aa |
| .text-blue-400 | color: rgb(0, 82, 204); | Aa |
| .text-blue-500 | color: rgb(7, 71, 166); | Aa |
| .text-green-50 | color: rgb(227, 252, 239); | Aa |
| .text-green-75 | color: rgb(171, 245, 209); | Aa |
| .text-green-100 | color: rgb(121, 242, 192); | Aa |
| .text-green-200 | color: rgb(87, 217, 163); | Aa |
| .text-green-300 | color: rgb(54, 179, 126); | Aa |
| .text-green-400 | color: rgb(0, 135, 90); | Aa |
| .text-green-500 | color: rgb(0, 102, 68); | Aa |
| .text-neutral-0 | color: rgb(255, 255, 255); | Aa |
| .text-neutral-10 | color: rgb(250, 251, 252); | Aa |
| .text-neutral-20 | color: rgb(244, 245, 247); | Aa |
| .text-neutral-30 | color: rgb(235, 236, 240); | Aa |
| .text-neutral-40 | color: rgb(223, 225, 230); | Aa |
| .text-neutral-50 | color: rgb(193, 199, 208); | Aa |
| .text-neutral-60 | color: rgb(179, 186, 197); | Aa |
| .text-neutral-70 | color: rgb(165, 173, 186); | Aa |
| .text-neutral-80 | color: rgb(151, 160, 175); | Aa |
| .text-neutral-90 | color: rgb(137, 147, 164); | Aa |
| .text-neutral-100 | color: rgb(122, 134, 154); | Aa |
| .text-neutral-200 | color: rgb(107, 119, 140); | Aa |
| .text-neutral-300 | color: rgb(94, 108, 132); | Aa |
| .text-neutral-400 | color: rgb(80, 95, 121); | Aa |
| .text-neutral-500 | color: rgb(66, 82, 110); | Aa |
| .text-neutral-600 | color: rgb(52, 69, 99); | Aa |
| .text-neutral-700 | color: rgb(37, 56, 88); | Aa |
| .text-neutral-800 | color: rgb(23, 43, 77); | Aa |
| .text-neutral-900 | color: rgb(9, 30, 66); | Aa |
| .text-purple-50 | color: rgb(234, 230, 255); | Aa |
| .text-purple-75 | color: rgb(192, 182, 242); | Aa |
| .text-purple-100 | color: rgb(153, 141, 217); | Aa |
| .text-purple-200 | color: rgb(135, 119, 217); | Aa |
| .text-purple-300 | color: rgb(101, 84, 192); | Aa |
| .text-purple-400 | color: rgb(82, 67, 170); | Aa |
| .text-purple-500 | color: rgb(64, 50, 148); | Aa |
| .text-red-50 | color: rgb(255, 235, 230); | Aa |
| .text-red-75 | color: rgb(255, 189, 173); | Aa |
| .text-red-100 | color: rgb(255, 143, 115); | Aa |
| .text-red-200 | color: rgb(255, 116, 82); | Aa |
| .text-red-300 | color: rgb(255, 86, 48); | Aa |
| .text-red-400 | color: rgb(222, 53, 11); | Aa |
| .text-red-500 | color: rgb(191, 38, 0); | Aa |
| .text-teal-50 | color: rgb(230, 252, 255); | Aa |
| .text-teal-75 | color: rgb(179, 245, 255); | Aa |
| .text-teal-100 | color: rgb(121, 226, 242); | Aa |
| .text-teal-200 | color: rgb(0, 199, 230); | Aa |
| .text-teal-300 | color: rgb(0, 184, 217); | Aa |
| .text-teal-400 | color: rgb(0, 163, 191); | Aa |
| .text-teal-500 | color: rgb(0, 141, 166); | Aa |
| .text-yellow-50 | color: rgb(255, 250, 230); | Aa |
| .text-yellow-75 | color: rgb(255, 240, 179); | Aa |
| .text-yellow-100 | color: rgb(255, 227, 128); | Aa |
| .text-yellow-200 | color: rgb(255, 196, 0); | Aa |
| .text-yellow-300 | color: rgb(255, 171, 0); | Aa |
| .text-yellow-400 | color: rgb(255, 153, 31); | Aa |
| .text-yellow-500 | color: rgb(255, 139, 0); | Aa |
Basic usage
Setting the text color
Control the text color of an element using the text-{color} utilities.
The quick brown fox jumps over the lazy dog.
<p class="text-blue-500 ...">The quick brown fox ...</p>
Changing the opacity
Control the opacity of an element’s text color using the color opacity utilities.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="text-blue-500 opacity-100">The quick brown fox...</p>
<p class="text-blue-500 opacity-75">The quick brown fox...</p>
<p class="text-blue-500 opacity-50">The quick brown fox...</p>
<p class="text-blue-500 opacity-25">The quick brown fox...</p>
<p class="text-blue-500 opacity-0">The quick brown fox...</p>
Reset color
Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.
The quick brown fox jumps over The lazy dog.
<p class="text-secondary">The quick brown fox jumps over
<a href="#" class="text-reset">The lazy dog</a>
</p>