Tailwind CSS Color Finder

The Tailwind Color Finder takes any hex, RGB, or HSL color and tells you the nearest Tailwind CSS color class. You know the shade you want from a Figma file, a brand guideline, or an existing site, but you need the Tailwind class name to use it in code. Manually scanning Tailwind\u2019s 240+ colors for a visual match is slow and unreliable. This tool computes the perceptual distance in OKLCH or LAB color space and returns the single closest Tailwind color, plus the top 5 alternatives so you can compare options.

Output includes the full Tailwind class prefix for all common utilities — bg-blue-500 for backgrounds, text-blue-500 for text, border-blue-500 for borders, ring-blue-500 for focus rings, divide-blue-500 for dividers. The tool covers the default Tailwind palette (slate, gray, red, orange, yellow, ..., fuchsia, pink, rose × 11 shades each), and toggles let you include/exclude specific color families if you have restricted the palette in your config. Perfect distance match is rare; the tool reports the color distance so you know how close the match actually is. If the distance is large, you probably need to extend Tailwind\u2019s palette with a custom color rather than forcing a poor match.

Finding the \"nearest\" color requires defining distance in color space. Naive RGB Euclidean distance (sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2)) is fast but does not match human perception — colors that look very different can have small Euclidean distance, and vice versa.

The tool uses OKLCH distance by default, which is perceptually uniform: equal distances in OKLCH correspond to equal perceived differences. LAB is an older perceptual space with similar properties.

The comparison loop:
1. Convert input to OKLCH
2. For each Tailwind color (240 entries in default palette), convert to OKLCH
3. Compute Euclidean distance in OKLCH space
4. Sort ascending and return the top N matches

Computation is instantaneous since the Tailwind palette is small and fits in memory.

The Tailwind palette includes:
- Grays: slate, gray, zinc, neutral, stone (5 grayscale families × 11 shades)
- Reds: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose (17 chromatic families × 11 shades)

That\u2019s 22 families × 11 shades = 242 colors, plus white, black, and transparent as edge cases.

Each shade is labeled 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. The 500 shade is typically the \"base\" for each family; 50 is the lightest, 950 the darkest.

The class name format depends on the utility:
- Background: bg-{color}-{shade}
- Text: text-{color}-{shade}
- Border: border-{color}-{shade}
- Ring: ring-{color}-{shade}
- Divide: divide-{color}-{shade}
- Fill (SVG): fill-{color}-{shade}
- Stroke (SVG): stroke-{color}-{shade}

Tailwind v4 adds alpha-inclusive syntax (bg-blue-500/50 for 50% opacity). The tool generates full v3 class names; alpha modifiers are appended manually.

Distance threshold: matches below 5 in OKLCH units are visually very close (most people can\u2019t distinguish). 5-15 is close but perceptible. Above 15 is clearly different — consider extending the palette rather than using the nearest match.

Compared to visually scanning Tailwind\u2019s default color palette cheatsheet, this tool is instant and accurate. Visual scanning is fine for picking from a small range but fails for matching a specific hex input.

Compared to online Tailwind color pickers that show the palette as swatches, this tool is the reverse — you bring the color, the tool finds the class. Swatch browsers are for discovery; this tool is for matching a known target.

Compared to Tailwind\u2019s built-in IntelliSense in VS Code, this tool gives perceptual nearest-color matching, which IntelliSense does not provide. Use IntelliSense for code completion; use this tool for color-to-class translation.