Color to Tailwind

Find the nearest Tailwind CSS color class for any hex color — instant match across the full v3 palette.

Hex Color: #22d3eeBest Match: cyan-400Match Distance: 0.0RGB: 34, 211, 238

Presets:

Color picker

Hex value

Best match:cyan-400

#	Class	Hex	Distance
1	cyan-400	#22d3ee	0.0
2	sky-400	#38bdf8	32.7
3	cyan-500	#06b6d4	48.0
4	teal-400	#2dd4bf	48.3
5	sky-500	#0ea5e9	50.4

How does Tailwind color matching work?

Each Tailwind color class maps to a specific hex value. This tool finds the closest match by calculating the Euclidean distance in RGB space between your input color and every entry in the Tailwind v3 palette. The result gives you the class name you can use directly in your HTML (e.g. bg-sky-500, text-teal-400). A distance of 0 means an exact match. The top 5 matches are shown so you can pick the shade that looks best in context. All processing happens in your browser.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Finding the closest utility class to a designer-supplied hex colour.
Deciding whether a brand colour is close enough to a palette shade to reuse it.
Replacing arbitrary colour values in a codebase with palette classes.
Seeing which shades sit either side of your colour before choosing one.
Checking whether an arbitrary value is needed at all.

Frequently Asked Questions

How is the nearest Tailwind colour found?: By comparing your colour against every entry in the default palette and taking the smallest distance. The palette is a fixed set — 22 hues at 11 shades each — so the answer is always an exact palette member rather than an approximation of one.
What do the shade numbers mean?: Lightness, from 50 as the lightest to 950 as the darkest, with 500 as the base hue. The scale is deliberately non-linear so adjacent steps stay visually distinct at both ends, which a plain lightness ramp does not achieve.
What if no palette colour is close?: Use an arbitrary value: `bg-[#1a2b3c]`. That is the supported escape hatch and it compiles like any other class. Forcing a brand colour onto the nearest palette entry is the mistake — the palette is a default, not a constraint.
Should I extend the palette or use arbitrary values?: Extend it when the colour appears more than a couple of times, so it gets a name and a shade ramp and can be changed in one place. Arbitrary values are right for one-offs; a codebase full of them has a design system living in string literals.
Did the palette change between Tailwind versions?: Yes — v4 moved the default palette to OKLCH, which shifts some values slightly and makes the ramps more perceptually even. A hex match computed against the v3 palette is therefore close but not identical to the v4 one for the same class name.

Common errors and gotchas

Treating the nearest class as identical, when the distance may be visible side by side.
Matching a brand colour approximately where exactness is contractually required.
Assuming the palette is stable, since it has changed between major Tailwind versions.
Ignoring contrast requirements, since the nearest shade may fail a ratio the original passed.
Reaching for an arbitrary value before checking whether a palette shade is close enough.