Color converter

How to use

1. Type or paste a color in the Color field, or tap the swatch to open your system's color picker. Any CSS format works: #651424, #0af, rgb(101 20 36), rgba(101, 20, 36, .5), hsl(348 67% 24%), hwb(…), oklch(…), oklab(…), transparent and the 148 named colors, like tomato or rebeccapurple.
2. The tool shows the same color as HEX, RGB, HSL, HWB and OKLCH. Each row has a copy button.
3. Under Use it in code, pick a format and copy the color as a Tailwind class (bg-[#651424]), a CSS variable or a Tailwind v4 theme token.
4. In the Contrast panel, check whether text in that color is readable on a background. If it fails, the tool suggests the closest shade that passes.
5. Under Tints and shades, tap a swatch to copy its HEX, or copy the whole palette as CSS variables.

Everything is calculated in your browser. Nothing you type is sent or stored.

Which format should I use?

• HEX: red, green and blue in hexadecimal (#rrggbb, plus an optional aa for transparency). The most compact; it shows up in design systems, Figma and emails.
• RGB: the same three channels as numbers from 0 to 255. Useful when you change channels in code, or need rgba() in older code.
• HSL: hue (0–360°), saturation and lightness. Easy to tweak by hand ("same color, lighter"), but lightness doesn't match what the eye sees: a yellow and a blue at l = 50% look very different.
• HWB: hue + how much white + how much black. It's how you mix paint: take the pure color and add white or black.
• OKLCH: perceived lightness (L), chroma (C) and hue (H). The most modern: L follows perception, so changing only the hue keeps contrast similar. It can also describe colors outside sRGB (P3 screens).

All current browsers support all five formats and the space-separated syntax (rgb(101 20 36 / 50%)). Check Legacy syntax if you need the comma form (rgba(101, 20, 36, 0.5)).

Why do some values have decimals?

A HEX color has 8 bits per channel (16.7 million colors). Rounding HSL or OKLCH to whole numbers sometimes lands on a different color. The tool uses the lowest precision that reads back as exactly the same color. That's why hsl(200 100% 50%) shows up clean while other colors get one decimal.

"Out of gamut"

OKLCH can describe colors a regular (sRGB) screen can't show, like oklch(70% 0.4 150). In that case the tool does what browsers do, following the CSS Color 4 algorithm: it keeps lightness and hue and lowers chroma until the color fits. The formats shown are those of the adjusted color.

Contrast: what AA and AAA mean

The WCAG contrast ratio compares the relative luminance of two colors and goes from 1:1 (same color) to 21:1 (black on white). The WCAG 2.2 minimums:

• Normal text: 4.5:1 for AA and 7:1 for AAA.
• Large text (≥ 24 px, or ≥ 18.66 px bold): 3:1 for AA and 4.5:1 for AAA.
• Icons, input borders and chart parts (criterion 1.4.11): 3:1.

WCAG doesn't round: 4.49:1 fails AA. That's why the ratio is truncated to two decimals, never rounded up.

Transparency: WCAG only defines contrast for opaque colors. If the text is transparent, it's composited over the background before the calculation. If the background is transparent, it's composited over white.

Shade suggestion: when the text fails, the tool looks for the closest color that passes. It keeps hue and chroma in OKLCH and changes only lightness, testing darker and lighter shades, and picks the one that changes least. Sometimes no shade gets there (for example, 7:1 on a mid gray). Then the way out is to change the background or use black or white.

Limits of the calculation

• The WCAG 2.x formula is the one laws and accessibility audits require today, but it has known flaws: it tends to overrate contrast for dark colors and ignores font size and weight. The future WCAG 3 is exploring another method (APCA), still a draft.
• Passing contrast doesn't guarantee everyone can read it. Don't rely on color alone to convey information (also use icons and text), and test on the real page.

Tints and shades

Tints mix the color with white and shades with black, in 10% steps. The mix happens in the OKLab space: there, the steps look evenly spaced to the eye and the color doesn't turn "muddy" the way it does when you mix in RGB. Use light tints for backgrounds and highlights and dark shades for text and hover states. Check the contrast of each pair before you use it.

Using it in code

• Tailwind arbitrary value: bg-[#651424], text-[oklch(33.8%_0.113_14.9)]. In Tailwind, spaces inside [...] become _.
• CSS variable: --brand: #651424;, to use with var(--brand).
• Tailwind v4 theme: inside @theme { --color-brand: #651424; } you get the bg-brand, text-brand, border-brand classes and more.

FAQ

Does 8-digit HEX work? Yes. The last two digits are the opacity (80 ≈ 50%). All current browsers support it.

Why doesn't the picker have transparency? The system's native picker only picks opaque colors. Set the opacity with the slider below it, or type an 8-digit HEX or a / alpha value.

Why don't currentColor or lab() work? currentColor, inherit and system colors (Canvas, ButtonText) have no fixed value: they depend on the element or the device theme, so they can't be converted on their own. lab(), lch() and color() aren't converted here yet. In those cases the tool tells you why.

Does it work offline? Once the page has loaded, yes: there are no server calls.