Hex to Tailwind Color
Paste a hex color from your design and see which color in Tailwind's default palette is closest, with ready-to-copy class names.
Closest Tailwind color
cyan-700
#007595 (your color: #0e7490, difference 2.4)
Other close matches
bg-[#0e7490] text-[#0e7490] border-[#0e7490]
Frequently asked questions
How does the tool find the closest Tailwind color?
It converts your color and every color in Tailwind's default palette into the CIELAB space, then picks the one with the smallest perceptual difference. That matches how the eye sees color better than comparing raw RGB values.
What if my color is not in the Tailwind palette?
Use an arbitrary value such as bg-[#0e7490]. It works with every color utility and with variants like hover: and dark:. Or generate a full custom scale with the color palette generator and add it to your @theme.
Does this use the Tailwind v4 colors?
Yes. The palette is read from Tailwind v4's own theme, where colors are defined in oklch and converted to hex here, so a few values can differ by a digit from the v3 hex codes you may remember.
How close is close enough to swap in a Tailwind class?
A difference under 2 is practically invisible. Between 2 and 5 is visible side by side but usually fine for UI. Above that, consider an arbitrary value or a custom color.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.