HEX → Closest Tailwind Class

How to use

1. Enter a HEX or pick a color.
2. Choose the property prefix (bg / text / border / ring / fill).
3. See the closest Tailwind class with its distance (ΔE).
4. Top 5 alternatives help discussions with designers.
5. Click to copy any class name.

Key features

• Full Tailwind v3 + v4 palette (242 colors)
• OKLCH perceptual distance or RGB Euclidean
• 5 property prefixes (bg / text / border / ring / fill)
• Top 1 + 5 alternatives shown
• One-click copy

Use cases

• Figma mock → Tailwind code — convert designer HEX values
• Brand color matching — find Tailwind equivalent
• Legacy CSS → Tailwind migration — convert existing colors
• Storybook design tokens — leverage Tailwind defaults
• Dark mode pairing — find dark variant of a light color

OKLCH vs RGB distance

OKLCH perceptual distance (ΔE) matches based on human-eye color difference — pink input returns truly pink-looking results. RGB Euclidean sums R·G·B differences, but the same distance can look very different across hues (yellow shifts faster). Use OKLCH for accurate matching, RGB for speed.

FAQ