Loading…

How to use Nearest Tailwind Color

Enter a hex value, and the tool finds the closest matching Tailwind CSS color name and shade.

Frequently asked questions

How is the nearest color found?

We compute the CIELAB ΔE distance from your color to every Tailwind shade and return the closest match — perceptually accurate, not just numeric.

Which Tailwind version is used?

The default Tailwind v3 palette of core color families, each with shades 50 through 900.

What does a distance of 0 mean?

A ΔE of 0 means your color is an exact Tailwind color, so you can use its class name directly with no visible difference.

More Color Tools

Color Blend Mode Calculator
Compute multiply, screen, overlay and more blend results of 2 colors
RGB Percentage Converter
Convert HEX to percentage rgb(), 0–1 float and 8-bit integer forms
Color Picker
Pick colors visually and get HEX, RGB, HSL, HSV, CMYK values
Color Format Converter
Convert between HEX, RGB, HSL, HSV, CMYK, LAB and CSS names
Color Contrast Checker
Check WCAG AA/AAA contrast ratios for text and backgrounds
WCAG Color Compliance
Test all WCAG 2.1 text size requirements with pass/fail badges
Color Mixer
Blend two colors with a ratio slider and preview the mix
Tints & Shades Generator
Generate a complete range of tints and shades from any color
Gradient Color Steps
Generate N evenly-spaced colors between two endpoints
Color Harmonies
Generate complementary, triadic and analogous palettes
Random Palette Generator
Generate beautiful random color palettes with one click
Color Opacity / RGBA
Add alpha transparency to any color and get rgba() values

← View all Color ToolsBrowse all 1,100+ tools →