Tailwind Color Finder - Find the Closest Tailwind CSS Color
Find the closest Tailwind CSS v3 color classes for any color you choose
Color Tools
Tool
5 Closest Tailwind Colors
indigo-500
#6366f1
Δ 0
indigo-600
#4f46e5
Δ 40
violet-500
#8b5cf6
Δ 42
blue-500
#3b82f6
Δ 49
indigo-400
#818cf8
Δ 49
How to Use
1Use the color picker or type a HEX value
2The tool calculates the Euclidean distance in RGB space to every Tailwind color
3The 5 closest Tailwind colors are shown with their class names and hex values
4Copy the class name directly into your Tailwind project
Frequently Asked Questions
The tool includes the full Tailwind CSS v3 default palette, covering all named colors (slate, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) at all shade steps (50–900).
Closeness is measured by Euclidean distance in RGB color space: sqrt((r1-r2)² + (g1-g2)² + (b1-b2)²). A smaller distance means the colors look more similar.
Yes! When a designer gives you a hex code, this tool lets you quickly find the nearest Tailwind equivalent so you can stay within the design system.