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 is a free online tool for working with Tailwind CSS colors and utility classes. Enter a Tailwind color such as indigo-500 to view its HEX, RGB, and HSL values, or enter a color value to find the closest matching Tailwind palette entry. You can also browse the palette visually and select individual shades. This makes the tool useful when converting between design files, CSS values, Tailwind utility classes, and frontend component styles.

How to Use This Tailwind Color Converter

  1. 1
    Enter a Tailwind class or colorType a class such as indigo-500 or enter a HEX/RGB color value.
  2. 2
    Review the conversionThe tool displays the corresponding HEX, RGB, HSL, and closest Tailwind class information.
  3. 3
    Find a nearby Tailwind colorWhen entering a custom color, compare the suggested closest palette value with the original HEX value.
  4. 4
    Browse the paletteExplore the available color families and shades visually and click a swatch to load its values.
  5. 5
    Copy the resultUse the color value or Tailwind class directly in your frontend project.

Frequently Asked Questions

Enter a Tailwind utility color such as indigo-500. The converter identifies the palette entry and displays its corresponding HEX value, along with RGB and HSL representations.
Enter your HEX value and the tool compares it against the available palette colors to identify the closest match. Similar shades may be close to one another, so compare the displayed HEX values before choosing the final class.
The tool covers the standard palette families represented in its color data, including slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose, with the supported shade scale.
The converter compares the entered color with the palette values in RGB space and selects the entry with the smallest calculated distance. This provides a useful numerical approximation, although visual context can still matter.
The color data is based on the standard Tailwind palette represented by this tool. If your project uses Tailwind CSS v4, a customized theme, or modified color tokens, verify the actual values in your project configuration before relying on a match.
Yes. Tailwind utility classes can be used directly in React, Next.js, Vue, and other frontend projects configured with Tailwind CSS. HEX, RGB, and HSL values can also be used where custom CSS is required.

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.