Color Converter

The color formats

Every format here describes the same thing, a color on screen, in a different way. Some are written for code, some for design tools and one for print.

• HEX writes red, green and blue as two hexadecimal digits each, from 00 to ff: #6366f1. Two more digits add opacity (#6366f180), and #abc is short for #aabbcc.
• RGB gives the same three channels as numbers from 0 to 255: rgb(99, 102, 241).
• HSL is hue (an angle on the color wheel, 0 to 360), saturation and lightness: hsl(238.7, 83.5%, 66.7%).
• HSB, also called HSV, is hue, saturation and brightness. It is what the color pickers in Figma and Photoshop show, but it isn't CSS.
• OKLCH is lightness, chroma and hue in OKLab, a color space built so that equal steps look like equal changes: oklch(58.54% 0.20402 277.12). Tailwind CSS v4 defines its palette in OKLCH. OKLAB is the same space written as two color axes, a (green to red) and b (blue to yellow), instead of chroma and hue.
• LAB and LCH are the older CIELAB space in the same two shapes. CSS measures them against the D50 white point, and so does this converter.
• CMYK is cyan, magenta, yellow and black ink, the way print describes color.

How to use the color converter

1. Type or paste a color into any field. Each field reads every format on this page, so an rgb() value pasted into the HEX field works too, and so do named CSS colors such as rebeccapurple.
2. Or pick a color, and its opacity, with the picker.
3. Every other field updates as you type. A field that can't read your text says so, and goes back to its own value when you leave it.
4. Copy any value with the button beside it.

Below the converter you'll find the closest Tailwind color and the closest named color. Open the named color to see its shades, tints and contrast, or build a full scale for any color in the color shades generator.

Why the values have decimals

Short values often name a slightly different color. For example, hsl(239, 84%, 67%) looks like #6366f1 rounded, but it is #6467f2, one step off on all three channels. Whole-number HSL misses like this for nearly nine colors in ten.

This converter writes just enough decimals for every value to convert back to exactly the color you started with. That holds for all 16.7 million 8-bit colors, in every format:

#6366f1
rgb(99, 102, 241)
hsl(238.7, 83.5%, 66.7%)
oklch(58.54% 0.20402 277.12)
lab(49.05% 30.35 -71.87)

Browsers do their own arithmetic when they draw OKLCH, OKLAB, LAB and LCH, and draw between 0.5% and 1.6% of colors one step off. They do the same with unrounded values, so the decimals cost nothing there.

Colors outside sRGB

OKLCH, OKLAB, LAB and LCH can describe colors that ordinary sRGB screens can't show, such as oklch(70% 0.4 150). When you enter one, the converter says so and converts the color as an sRGB screen draws it, with each channel clipped to its limit. The HEX, RGB, HSL, HSB and CMYK values it writes are always sRGB colors.

The closest Tailwind and named colors

The closest Tailwind color comes from the default palette of Tailwind CSS 4.3: 26 colors in 11 shades each, plus black and white. The converter measures the distance in OKLab, the space that palette was designed in, and says “exact match” when the Tailwind color is your color. The closest named color is one of the 139 named colors with a page on ColorFont.

Frequently asked questions