Tailwind CSS Color Finder

Tailwind Colors Overview

Tailwind CSS ships with preset colors and numeric scales (e.g. red-500, blue-600) for consistent use in class names. This tool lets you browse and query the default Tailwind palette and convert between HEX and Tailwind class names.

Use it to look up colors, confirm the value for a class, or map a design color to the nearest Tailwind shade.

How to Use

Browse Palette

Browse by color name (e.g. red, blue, gray) and scale (50–950); click a swatch to copy the class name or HEX for use in HTML or config.

Value to Class Name

Enter HEX or RGB; the tool finds the closest Tailwind color class (e.g. bg-red-500, text-slate-700) and may show the difference so you can stick to the preset palette when possible.

Class Name to Value

Enter or select a Tailwind color class (e.g. blue-500) to see its HEX/RGB and swatch for comparison with design or external styles.

FAQ

Does it support custom Tailwind theme colors?

If the tool only includes the default palette, custom theme colors come from your project config. If it supports loading a theme, you can look up custom colors and their class names.

What do the scale numbers 50–950 mean?

Larger numbers are darker (50 lightest, 950 darkest); similar to the older 100–900 scale but with extended ends for finer steps.

How is “closest” color matched?

Usually by Euclidean distance in RGB or LAB; the tool picks the Tailwind color with the smallest difference. Exact method may vary by tool.