Tailwind Color Search

Tool interface

Closest Tailwind class

—

—

Tailwind CSS color palette — how to use it

The 50–950 scale

Tailwind’s default palette is a consistent scale from 50 (lightest) to 950 (darkest). Picking steps from the same hue keeps contrast and hierarchy predictable across UI.

Backgrounds (50–100)

bg-blue-50 and similar shades work as soft section fills or hover highlights without fighting content.

Borders (200–300)

border-gray-200 / border-slate-300 give quiet dividers that stay out of the way.

Primary actions (500–600)

bg-indigo-500 for primary buttons; pair with hover:bg-indigo-600 for a natural pressed feel.

Text (700–950)

Prefer text-slate-800-style near-blacks over pure #000 for readable, modern body copy.

Why look up HEX?

You often need the hex behind a class like emerald-500 outside Tailwind — Figma, Chart.js, Canvas, or a legacy stylesheet.

  • Design handoff: Match Figma fills to the same Tailwind step.
  • Chart libraries: Pass #10b981 into JS options.
  • Canvas: ctx.fillStyle = '#10b981'.
  • Partial migration: Align one accent in non-Tailwind CSS.

Search by class name (red-500) or paste a HEX to reverse-lookup the closest palette step.

Tip

Paste a Figma hex such as #3b82f6 into the search box — you’ll get blue-500 (or the nearest match) without flipping docs tabs.