Darnly
Free tools

Color converter: HEX, RGB, HSL and OKLCH

Type any color and see it big, with every other format right below it. See how it looks on white and on black, and copy any format in one click.

Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome

Your color#0593C6
On white
Aa Text
3.50:1
On black
Aa Text
6.00:1

Click any format to copy it

    Adjust with
    %

    More free tools

    See all 89 tools

    How it works

    1. Type or paste a color in any format: #0593c6, rgb(5, 147, 198), hsl(196 95% 40%), oklch(62% 0.13 232), a CSS name like steelblue, or a Tailwind color like sky-500. You can also use the color picker, or pick any color on your screen in Chrome and Edge.
    2. The big swatch shows your color. Next to it you see it on a white page and on a black page, with the contrast ratio for each, so you know if it works for text.
    3. Every other format updates as you type. Click any of them to copy it. Use the sliders to nudge the color in RGB, HSL, HWB, OKLCH or LAB, and the alpha slider to make it see-through.

    Questions

    Which color format should I use in my CSS?

    Any of them works in every modern browser. Hex is the most common and easiest to paste around. HSL is easy to tweak by hand. OKLCH is the newest: its lightness matches what your eye sees, so it’s the best for building shades, and it’s what Tailwind v4 uses.

    What is OKLCH?

    OKLCH describes a color as Lightness, Chroma (how colorful it is) and Hue (the angle on the color wheel). Unlike HSL, two colors with the same OKLCH lightness really do look equally light. It can also describe very vivid colors that newer screens can show and hex can’t.

    Why does my OKLCH or LAB color say it’s outside what most screens show?

    Some OKLCH and LAB values are more vivid than the sRGB colors that hex, RGB and HSL can describe. We keep your exact value in OKLCH and LAB, and show the closest color every screen can show in the other formats.

    What do the contrast numbers mean?

    They are WCAG contrast ratios. 4.5:1 or more is good for normal text. 3:1 is enough for big text, icons and buttons. Under 3:1 is too faint. To test your color against any background, open it in our contrast checker.

    How do I write a see-through color?

    Move the alpha slider. Hex gets two extra digits (like #0593C680 for 50%), RGB and HSL become rgba() and hsla(), and the others get / 0.5 at the end.

    Is the Tailwind class exact?

    It’s the nearest Tailwind v4 color, measured by how different the two look to your eye. The label tells you how close it is. To see the 3 closest colors side by side, open it in our Hex to Tailwind tool.

    Is anything uploaded?

    No. Everything runs in your browser.