Skip to main content

Color system

In this chapter, you learn Tailwind CSS's color palette and how to use colors.

The color palette​

Tailwind CSS provides a rich color palette.

Grayscale​

NameUse
slateCool gray
grayNeutral gray
zincWarm gray
neutralTrue gray
stoneWarm stone

In v4.2, four neutral-leaning mid-tone families (taupe / mauve / olive / mist) were added that behave like grays while having a personality of their own (each with 11 steps from 50 to 950).

Colors​

NameColor
redRed
orangeOrange
amberAmber
yellowYellow
limeLime
greenGreen
emeraldEmerald
tealTeal
cyanCyan
skySky blue
blueBlue
indigoIndigo
violetViolet
purplePurple
fuchsiaFuchsia
pinkPink
roseRose

Shades​

Each color has shades from 50 to 950.

ValueUse
50Lightest (backgrounds)
100Light backgrounds
200Hover backgrounds
300Borders
400Placeholders
500Standard
600On hover
700Active
800Dark
900Darkest
950Deepest (added in v3.3)
<div class="bg-blue-50">Lightest blue</div>
<div class="bg-blue-500">Standard blue</div>
<div class="bg-blue-900">Darkest blue</div>

Text color​

<p class="text-gray-500">Gray text</p>
<p class="text-blue-600">Blue text</p>
<p class="text-red-500">Red text</p>

<!-- Special colors -->
<p class="text-black">Black</p>
<p class="text-white">White</p>
<p class="text-transparent">Transparent</p>
<p class="text-current">Inherit the current color</p>

Background color​

<div class="bg-white">White background</div>
<div class="bg-gray-100">Light gray</div>
<div class="bg-blue-500">Blue background</div>

Border color​

<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Blue border</div>

Opacity​

Color opacity​

In v4, opacity using color-mix() is supported.

<!-- v4: specify opacity with a slash -->
<div class="bg-blue-500/50">50% opacity</div>
<div class="text-black/75">75% opacity</div>

<!-- Arbitrary value -->
<div class="bg-blue-500/[.35]">35% opacity</div>

Overall opacity​

<div class="opacity-50">50% opacity</div>
<div class="opacity-75">75% opacity</div>
<div class="opacity-0">Fully transparent</div>

The oklch color space​

In v4, the oklch color space is adopted, which can express more vivid colors. oklch covers the wider P3 gamut than sRGB, and blue-to-green colors in particular are rendered more vividly.

<!-- Displayed vividly on a P3-capable display -->
<div class="bg-blue-500">oklch blue</div>
Behavior on non-P3 displays

On displays that do not support the P3 gamut (such as older monitors), the browser automatically falls back to an approximate color within the sRGB range. This approximation (gamut mapping) is performed automatically by the browser based on the CSS specification, so you do not need to write a fallback by hand.

Specifying colors with CSS variables​

In v4, you reference a CSS variable using parentheses.

<!-- v4 -->
<div class="bg-(--my-color)">A color from a CSS variable</div>
<div class="text-(--brand-primary)">Brand color</div>

Placeholder color​

<input
  class="placeholder-gray-400"
  placeholder="Gray placeholder"
/>

Ring color (focus ring)​

<button class="focus:ring-2 focus:ring-blue-500">
  Blue focus ring
</button>

Practical examples​

Button color variations​

<!-- Primary -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-sm hover:bg-blue-600">
  Primary
</button>

<!-- Secondary -->
<button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-sm hover:bg-gray-300">
  Secondary
</button>

<!-- Success -->
<button class="px-4 py-2 bg-green-500 text-white rounded-sm hover:bg-green-600">
  Success
</button>

<!-- Danger -->
<button class="px-4 py-2 bg-red-500 text-white rounded-sm hover:bg-red-600">
  Delete
</button>

<!-- Outline -->
<button class="px-4 py-2 border-2 border-blue-500 text-blue-500 rounded-sm hover:bg-blue-50">
  Outline
</button>

Alert messages​

<!-- Info -->
<div class="p-4 bg-blue-50 border-l-4 border-blue-500 text-blue-700">
  <p class="font-bold">Info</p>
  <p>You have a new notification.</p>
</div>

<!-- Success -->
<div class="p-4 bg-green-50 border-l-4 border-green-500 text-green-700">
  <p class="font-bold">Success</p>
  <p>The operation completed successfully.</p>
</div>

<!-- Warning -->
<div class="p-4 bg-yellow-50 border-l-4 border-yellow-500 text-yellow-700">
  <p class="font-bold">Warning</p>
  <p>Caution is required.</p>
</div>

<!-- Error -->
<div class="p-4 bg-red-50 border-l-4 border-red-500 text-red-700">
  <p class="font-bold">Error</p>
  <p>A problem occurred.</p>
</div>

Badges​

<span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full">
  New
</span>
<span class="px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded-full">
  Done
</span>
<span class="px-2 py-1 text-xs font-semibold bg-red-100 text-red-800 rounded-full">
  Urgent
</span>

Gradient backgrounds​

<div class="bg-linear-to-r from-blue-500 to-purple-500 text-white p-8">
  Gradient
</div>

<div class="bg-linear-to-br from-pink-500 via-red-500 to-yellow-500 p-8">
  Three-color gradient
</div>

Accessibility​

Contrast ratio​

Pay attention to the contrast ratio between text and background.

<!-- Good: sufficient contrast -->
<p class="text-gray-900 bg-white">High contrast</p>
<p class="text-white bg-gray-900">High contrast</p>

<!-- Avoid: low contrast -->
<p class="text-gray-400 bg-gray-100">Low contrast</p>

WCAG 2.1 criteria​

  • Normal text: 4.5:1 or higher
  • Large text: 3:1 or higher
  • UI elements: 3:1 or higher

Summary​

  • A rich color palette (26 colors × 11 steps as of v4.2)
  • Apply colors with text-* / bg-* / border-*
  • Specify opacity with /50, etc.
  • More vivid colors with oklch in v4
  • Keep contrast ratio in mind to stay accessible