Darnly
Free tools

Hex to Tailwind: the nearest Tailwind color

Paste any color and see the closest Tailwind colors right next to it, with a bar that shows how close each one is. Copy the class in one click, or the exact value if nothing is close.

Your color#0593C6

    Tailwind
    Use for
    Need the exact color?Tailwind takes any color in square brackets.
    bg-[#0593C6]Make a full scale from this color
    See the numbers
    Tailwind colorValueHexDistance

    Distance is the OKLab difference × 100. Under 1.5 usually looks the same, under 4 is very close, under 8 is close.

    More free tools

    How it works

    1. Paste your color. Hex (#0593c6), rgb(), hsl() and color names all work, or use the color picker. In Chrome and Edge you can also pick any color on your screen.
    2. The preview at the top puts your color next to the 3 closest Tailwind colors. The bar under each one shows how close it is.
    3. Click “Copy class” to copy it, like bg-sky-600. Switch to text or border first if that’s what you need. If nothing is close, copy the exact value instead.

    Questions

    Which Tailwind version should I pick?

    If your CSS file starts with @import "tailwindcss"; and there’s no tailwind.config.js, you’re on v4. If you have a tailwind.config.js or tailwind.config.ts file, you’re on v3. The color names are the same, but v4 changed the exact shades a little, so the closest match can differ.

    How do you decide which color is closest?

    We compare colors in OKLCH (OKLab), a color space built around how people actually see color, so “closest” means closest to your eye, not closest in hex digits. A score under 1.5 usually looks the same side by side.

    What if no Tailwind color is close?

    Use the exact value, like bg-[#1A2B3C]. Tailwind accepts any color in square brackets. If it’s your brand color and you use it a lot, make a full shade scale from it with our Tailwind color generator and add it to your theme.

    Why does the v4 swatch look a bit brighter?

    Tailwind v4 colors are defined in OKLCH and some go beyond what older screens can show. On a wide-color screen they can look richer than their hex code. The hex we show is the nearest one any screen can show.

    Can I share a result?

    Yes. The page address updates as you type, with ?c= for your color. Click “Copy link” and send it to anyone.

    Is anything uploaded?

    No. Everything runs in your browser.