Tailwind Color Finder
Find the closest Tailwind CSS color class for any color. Enter a HEX, RGB, or HSL value and instantly discover the matching Tailwind color with its class name.
Closest Tailwind Match
Exact match found!
bg-blue-500text-blue-500border-blue-500#3b82f6Browse Tailwind Palettes
Click a palette name to view all shades
About Tailwind CSS Colors
Tailwind CSS provides a comprehensive color palette with 22 color families, each with 11 shades ranging from 50 (lightest) to 950 (darkest).
This tool helps you find the closest matching Tailwind color for any hex color you provide, making it easy to maintain consistency when integrating custom colors into a Tailwind-based design.
The color difference is calculated using a weighted RGB distance algorithm that approximates human color perception.
FAQ
What Tailwind colors are included?
This tool includes all colors from the default Tailwind CSS palette including slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose.
How is the closest color determined?
The tool calculates the color distance using the CIEDE2000 formula, which measures perceptual color difference. This ensures the suggested color looks visually similar to your input.
Can I see multiple matching options?
Yes, the tool shows the top closest matches ranked by similarity. This helps you choose the best option when multiple Tailwind colors are visually close to your target.