BBestMint

Tailwind CSS Palette

Browse and copy every Tailwind v3 color step (50 to 950).

A complete reference of Tailwind CSS v3's default palette — 22 color families (slate through rose) across 11 steps each. Click a swatch to copy its hex; click the label to copy the Tailwind class like bg-blue-500.

Common use cases

  • Look up the hex for a Tailwind class without leaving the browser
  • Compare related families (blue vs sky vs cyan) at a glance
  • Copy the Tailwind class name directly into JSX or HTML
  • Build a custom design palette by sampling from official tokens

Frequently asked questions

Which Tailwind version is this?▾
Tailwind CSS v3's default palette, including the 950 step added in 3.3.
Can I copy the Tailwind class instead of hex?▾
Yes — click the bottom row to copy the class name like bg-blue-500. Click the swatch above to copy the hex.
Are these colors customizable in my project?▾
These are the defaults. Your project's tailwind.config.js may override them — always check your local theme.

Related tools

🎨
Color Picker (HEX/RGB/HSL)
Pick a color and copy it as HEX, RGB, HSL or HSV.
🌈
CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
🎨
Color Palette Generator
Generate harmonious color schemes from a base color.
👁
WCAG Contrast Checker
Check color contrast ratios against WCAG AA/AAA accessibility levels.