Typography

Text Color

Text color uses the pattern text-{color}-{shade}. Colors include gray, red, sky, blue, emerald and many more; shades run from 50 (lightest) to 950 (darkest).

The color + shade pattern

Pick a color name and a shade number. Lower numbers are lighter, higher numbers are darker. text-gray-500 is a mid gray; text-sky-600 is a solid blue.

Text colors across shades

Example

<div class="space-y-1 font-semibold">
  <p class="text-gray-400">gray-400</p>
  <p class="text-gray-700">gray-700</p>
  <p class="text-sky-600">sky-600</p>
  <p class="text-emerald-600">emerald-600</p>
  <p class="text-red-600">red-600</p>
</div>

💡

For readable body text, gray-600 to gray-800 works well on white. Reserve bright colors for links, badges and calls to action.

Text Color

The color + shade pattern

Related Tailwind Topics