Tailwind CSS Color Finder
Color ToolsFind the nearest Tailwind CSS color from any hex or RGB input and get the exact Tailwind class name (bg-blue-500, text-red-400, etc.).. Free, private — all processing in your browser.
Full Tailwind v3 palette — click any swatch to copy its hex
Have a hex color from a design and need the Tailwind class that matches it? Paste the hex and this finds the nearest color in Tailwind's default palette, then hands you the ready-to-use class names: bg-, text-, and border- with the right family and shade. It also lays out the entire Tailwind v3 palette as a grid so you can browse families and copy any swatch's hex with a click.
This is the tool for the gap between a designer's color picker and Tailwind's utility classes. Designs rarely use the exact Tailwind hex values, so "close enough" matters — the finder ranks every one of the 242 palette colors by visual distance to your input and shows you the best fit, telling you whether it's an exact match or just the closest available.
If you need arbitrary exact colors, Tailwind also supports square-bracket values like bg-[#6d8fce]. But snapping to the standard palette keeps your design consistent and your class names readable, which is usually the better call.
Features at a glance
Perceptual distance matching
Uses OKLCH color space for perceptually accurate "nearest color" computation, not naive RGB Euclidean.
Top 5 matches
Returns the single closest plus four runners-up, letting you pick the best visual match from several options.
Full class name generation
Produces Tailwind class names for bg, text, border, ring, divide, fill, and stroke utilities.
Complete default palette
Covers all 22 color families and 11 shades of Tailwind’s default palette.
Family exclusion
Limit matching to specific families if your project uses a restricted palette.
Distance reporting
Shows how close the match actually is so you know whether to accept it or extend the palette.
Multiple input formats
Hex, RGB, HSL, RGBA, or named colors — all parsed automatically.
Client-side only
Brand colors and design tokens stay in your browser.
Using the Tailwind CSS Color Finder
- 1
Enter your color
Paste a hex (#FF6B35), RGB (rgb(255,107,53)), HSL, or color name.
- 2
See nearest matches
The top 5 Tailwind colors appear ranked by perceptual distance, with the closest at top.
- 3
Pick the class utility
Choose background, text, border, ring, or other utility — the tool shows the full class name.
- 4
Copy the class
One-click copy sends the Tailwind class to your clipboard, ready to paste into JSX or HTML.
- 5
Check distance
If the distance is high (>15), consider extending Tailwind with a custom color instead of forcing a poor match.
Common use cases for the Tailwind CSS Color Finder
Design to code
- →Figma to Tailwind: Take a color from a Figma mockup and find the Tailwind class that implements it closest.
- →Brand color audit: Check how close your brand colors are to Tailwind defaults — if close, use defaults; if not, extend.
- →Design system alignment: Verify existing CSS colors map cleanly to Tailwind before refactoring to use utility classes.
Developer workflow
- →Quick class lookup: Know you want "that muted blue" and get the exact Tailwind class without scrolling the palette.
- →Style inspection: Inspect a competitor’s site, grab the brand color, and find the Tailwind equivalent for your own project.
- →Component migration: Port hardcoded CSS colors in an existing codebase to Tailwind classes during a utility-first migration.
Onboarding
- →Learning Tailwind: Newcomers to Tailwind use this tool to bridge the gap between "I know what color I want" and "what class is that".
- →Team communication: Share exact Tailwind class names in code reviews or design discussions rather than approximate descriptions.
- →Code generation: AI or template-based code generation that produces Tailwind can use this tool’s logic for color conversion.
Tailwind CSS Color Finder — examples
Exact match
A Tailwind color found exactly.
#3B82F6
nearest: blue-500 (exact match) class: bg-blue-500 distance: 0
Close match
Input close to but not exactly a Tailwind color.
#FF6B35
nearest: orange-500 (distance 4.2) class: bg-orange-500 alternatives: orange-400, red-400, amber-500
Gray family
A specific gray mapped to nearest Tailwind gray.
#5A6270
nearest: gray-500 (distance 3.8) family: gray or slate-500 (distance 4.1)
Poor match warning
A color far from any Tailwind preset.
#C2F5B0
nearest: lime-200 (distance 18.7) warning: distance >15, consider extending palette with custom color
Full utilities
Multiple class names from one color.
nearest: blue-600
bg-blue-600 text-blue-600 border-blue-600 ring-blue-600 fill-blue-600
How it works
The palette is Tailwind CSS v3's complete default set: 22 color families (slate through rose, including the five gray families) each with 11 shades from 50 to 950, using the exact hex values from the Tailwind documentation. That's 242 colors total.
To find the nearest match, your input hex is converted to RGB and compared against every palette color using a weighted RGB distance — a formula that weights the red, green, and blue differences roughly the way the human eye perceives them, so the "closest" color looks closest rather than just being numerically nearest. The lowest-distance color wins, and if it's essentially identical the tool labels it an exact match.
Class names are generated straight from the matched family and shade, and each swatch's text color is auto-picked (dark or light) based on the swatch's luminance so labels stay readable. It all runs in your browser; nothing is uploaded.
Troubleshooting
⚠Matches the default v3 palette, not your custom theme
If your project extends or overrides Tailwind's colors in the config, the class names here may not exist in your build. Verify against your own theme.colors.
⚠'Nearest' is not always 'exact'
Most design colors aren't Tailwind defaults, so you'll usually get the closest match, not a perfect one. The tool tells you which. For an exact color, use an arbitrary value like bg-[#6d8fce].
⚠Tailwind v4 uses a different palette
v4 moved to OKLCH-based colors with some new hues and shade values. These are the v3 defaults; a v4 project may render slightly different colors for the same class names.
⚠Perceptual matching isn't a color-science guarantee
The distance formula approximates human perception but isn't a full CIEDE2000 calculation. For most UI work it picks the obvious match; for critical brand colors, confirm visually.
⚠Class names must be complete strings
Tailwind's compiler only keeps classes it can find as full strings in your source. Don't build these class names by string concatenation at runtime, or they'll be purged from the CSS.
Tailwind CSS Color Finder — comparisons and alternatives
Tailwind's own documentation shows the palette but won't take a hex and tell you the nearest class — you'd eyeball it. This does the matching for you and gives you copy-paste class names, which is the actual task when you're translating a design into Tailwind utilities.
Note this targets Tailwind v3's default palette. Tailwind v4 ships a wider palette in the OKLCH color space, and any project with a customized theme.colors will differ from these defaults. For a standard v3 setup this maps cleanly; for custom themes, treat the result as a starting point and check against your own config.
Frequently asked questions about the Tailwind CSS Color Finder
▶How do I find the Tailwind class for a specific hex color?
Paste the hex into the finder. It compares your color against all 242 Tailwind v3 palette colors and returns the nearest family and shade (like blue-500), plus ready-to-copy bg-, text-, and border- class names.
▶What if my color isn't an exact Tailwind color?
The tool returns the closest match and labels whether it's exact or approximate. If you need the precise color, Tailwind supports arbitrary values with square brackets, e.g. bg-[#6d8fce].
▶Does this cover Tailwind v4?
It uses Tailwind v3's default palette (22 families x 11 shades). Tailwind v4 introduced an OKLCH-based palette with some different values, so a v4 project may render slightly differently for the same class names.
▶Why are there five different grays?
Tailwind ships slate, gray, zinc, neutral, and stone — each a neutral family with a subtle temperature. Slate leans cool/blue, stone leans warm, and neutral is the most balanced. The finder searches all of them.
▶Can I copy colors straight from the palette?
Yes. The full palette grid is interactive — click any swatch to copy its hex value, or use the class-name chips from a match to copy bg-, text-, or border- utilities.
Additional resources
- Tailwind default colors — Official Tailwind color reference with all default palette values.
- Tailwind customizing colors — How to extend or replace Tailwind’s default palette for custom brand colors.
- OKLCH color space — Interactive OKLCH color picker showing why perceptual color spaces matter for matching.
- Tailwind v4 color changes — Overview of color system changes in Tailwind v4 compared to v3.
- Color difference formulas — Wikipedia article on various color distance formulas including DeltaE and OKLCH.
Related tools
All Color ToolsColor Blindness Simulator
Simulate how colors and images appear to users with protanopia, deuteranopia, tritanopia, achromatopsia, and other color vision deficiencies.
Color Contrast Checker
Check color contrast ratios between foreground and background for WCAG 2.1 AA and AAA compliance with live preview.
Color Converter
Convert between HEX, RGB, HSL, HSV, CMYK, Lab, LCH color formats
Color Name Finder
Find the nearest named color for any hex, RGB, or HSL value from CSS web colors, X11 standard colors, and Pantone approximations.
Color Palette Generator
Generate harmonious color palettes from any base color with complementary, analogous, triadic, and monochromatic schemes.
Color Shades Generator
Generate tints (lighter), shades (darker), and tones (desaturated) from any base color for design systems and UI states.
Learn more
Explore more tools
200+ free tools that run in your browser.
Browse all tools →