Tailwind Colors
Find the closest Tailwind CSS color class for any HEX value, then copy the class or inspect the full scale.
bg-indigo-600About the tailwind colors
Tailwind ships a carefully balanced color palette with named families and numbered shades. This tool compares your HEX color against those palette values and returns the nearest match, including the utility class name you can use in your markup.
For exact brand colors, keep your custom token. For quick UI work, prototypes and systems that already use Tailwind defaults, the closest class is usually the fastest choice.
Frequently asked questions
What Tailwind palette does this use?+
It uses the default Tailwind color families from slate through rose, including the 50 to 950 shade scale.
Will the closest Tailwind color be exact?+
Only if your HEX value exists in the Tailwind palette. Otherwise the tool returns the nearest visual match.
Should I replace brand colors with Tailwind defaults?+
Not always. Use Tailwind defaults for speed and consistency; keep exact brand values when identity accuracy matters.