ToolPuma Logo

Tailwind Color Converter

Convert HEX and RGB colors to Tailwind CSS classes.

Enter a hex value to find its closest Tailwind color, or a Tailwind class like red-500.

indigo-500

slate-50

slate-100

slate-200

slate-300

slate-400

slate-500

slate-600

slate-700

slate-800

slate-900

slate-950

gray-50

gray-100

gray-200

gray-300

gray-400

gray-500

gray-600

gray-700

gray-800

gray-900

gray-950

zinc-50

zinc-100

zinc-200

zinc-300

zinc-400

zinc-500

zinc-600

zinc-700

zinc-800

zinc-900

zinc-950

neutral-50

neutral-100

neutral-200

neutral-300

neutral-400

neutral-500

neutral-600

neutral-700

neutral-800

neutral-900

neutral-950

stone-50

stone-100

stone-200

stone-300

stone-400

stone-500

stone-600

stone-700

stone-800

stone-900

stone-950

red-50

red-100

red-200

red-300

red-400

red-500

red-600

red-700

red-800

red-900

red-950

orange-50

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

orange-700

orange-800

orange-900

orange-950

amber-50

amber-100

amber-200

amber-300

amber-400

amber-500

amber-600

amber-700

amber-800

amber-900

amber-950

yellow-50

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

yellow-700

yellow-800

yellow-900

yellow-950

lime-50

What Is a Tailwind Color Converter?

The Tailwind Color Converter translates between hex/RGB colors and Tailwind CSS utility classes. Enter a Tailwind class like red-500 to get its exact hex, RGB, and HSL values, or paste any color to find the closest matching Tailwind palette entry. A browsable, searchable palette of all 22 color families and 11 shades lets you explore the entire default palette visually.

How to Use This Tailwind Color Converter

  1. 1
    Enter a Tailwind class (e.g., indigo-500) or a hex/RGB color.
  2. 2
    View the matched hex, RGB, HSL, and closest Tailwind class name.
  3. 3
    Browse the full palette below and click any swatch to load its color.

Frequently Asked Questions

All default Tailwind CSS color families — slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose — at shades 50 through 950.
The tool computes the squared distance between your color and every palette entry in RGB space and picks the nearest match. Very similar shades can be close, so compare the hex values for the best fit.
The default palette for Tailwind CSS v3 and the standard 50-950 scale. If you use v4 or custom themes, double-check the exact hex values in your own configuration.

Related Color & Design Tools

Color Picker

Pick any color and get its HEX, RGB, and HSL values.

Color Palette Generator

Generate a harmonious color palette from a base color.

Random Color Generator

Generate random colors with HEX, RGB, and HSL values.

Gradient Generator

Create smooth two-color linear gradients instantly.

CSS Gradient Generator

Build linear or radial CSS gradients with color stops.

CSS Box Shadow Generator

Design box shadows and copy the CSS code.

More Color & Design Tools

CSS Border Generator

Style borders with width, style, color, and radius.

CSS Border Radius Generator

Round element corners with live CSS output.

CSS Button Generator

Create styled buttons and copy the CSS code.

CSS Glassmorphism Generator

Make frosted glass style panels with backdrop blur.

CSS Neumorphism Generator

Generate soft UI neumorphism shadows with CSS.

CSS Text Shadow Generator

Add depth to text with custom text shadows.