Sign in Get started

Tailwind CSS Tutorial · Tailwind Basics · Lesson 4 of 27

Colors

Tailwind's colour palette, shades from 50 to 950, text, background and border colours, and transparency with the slash syntax.

Create a free account to save this page, take notes and track your progress. Sign in

The palette

Tailwind ships with a carefully designed palette. Each colour has shades from 50 (lightest) to 950 (darkest):

Shades of skyTry it yourself
<div class="grid grid-cols-11 gap-1 p-4 text-[10px] text-center">
  <div class="h-12 rounded bg-sky-50"></div><div class="h-12 rounded bg-sky-100"></div>
  <div class="h-12 rounded bg-sky-200"></div><div class="h-12 rounded bg-sky-300"></div>
  <div class="h-12 rounded bg-sky-400"></div><div class="h-12 rounded bg-sky-500"></div>
  <div class="h-12 rounded bg-sky-600"></div><div class="h-12 rounded bg-sky-700"></div>
  <div class="h-12 rounded bg-sky-800"></div><div class="h-12 rounded bg-sky-900"></div>
  <div class="h-12 rounded bg-sky-950"></div>
  <span>50</span><span>100</span><span>200</span><span>300</span><span>400</span><span>500</span>
  <span>600</span><span>700</span><span>800</span><span>900</span><span>950</span>
</div>

Colour names: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, plus black and white (and since v4.2: mauve, olive, mist, taupe). v4 defines them in OKLCH, which gives more vivid colours on modern screens.

Using colours

The same colour names work with many properties: text-, bg-, border-, ring-, outline-, shadow-, accent-, fill-, stroke-, decoration-, placeholder:text-…

Transparency

Add / and an opacity (0 to 100) after any colour:

Opacity with /50 and /75Try it yourself
<div class="relative h-40 bg-linear-to-br from-amber-400 via-orange-600 to-rose-900">
  <div class="absolute inset-x-0 bottom-0 bg-black/50 p-4 text-white">
    <p class="font-semibold">Desert at dusk</p>
    <p class="text-sm text-white/75">Caption on a 50% black overlay</p>
  </div>
  <span class="absolute top-3 right-3 rounded-full border border-white/40 bg-white/20 px-3 py-1 text-xs text-white">Photo</span>
</div>

Choosing shades that work together

A common recipe: light background -50 or -100, border -200, body text gray-600/700, headings gray-900, and buttons -500 or -600 with white text. Check text contrast for accessibility (at least 4.5:1 for body text).

Test yourself

What does bg-blue-500/25 do?

  1. Sets a blue-500 background at 25% opacity
  2. Sets a quarter-width blue box
  3. Mixes blue-500 and blue-25
  4. Nothing; it's invalid
Show answer

Answer: Sets a blue-500 background at 25% opacity

The slash adds an opacity modifier to any colour utility.

Was this page helpful?