Color Converter (HEX, RGB, HSL)
One color in 13 formats — HEX, RGB, HSL, HWB, OKLCH, LAB, LCH, XYZ, LUV, CMYK — with harmonies, tints and shades and WCAG contrast. Free, in your browser.
You can also type a CSS color name (e.g. rebeccapurple).
Every format
#5b8cffrgb(91, 140, 255)0.3569, 0.549, 1rgb(35.7%, 54.9%, 100%)hsl(222.1, 100%, 67.8%)hsv(222.1, 64.3%, 100%)hwb(222.1 35.7% 0%)oklch(66.23% 0.17859 264.64)lab(59.15% 10.96 -63.39)lch(59.15% 64.33 279.8)color(xyz-d65 0.3174 0.282 0.9838)luv(60.07, -22.27, -101.42)cmyk(64%, 45%, 0%, 0%)lab() and lch() are given on the D50 white point, as CSS Color 4 defines them; XYZ and LUV are on D65, the sRGB one.
Contrast
Similar colors
Color blindness
Color harmonies
Click any swatch to copy its hex.
Variations
🔒 Converted entirely in your browser — nothing is uploaded.
Convert between color formats
Pick a color, or paste a HEX, rgb(), hsl(), hsv()/hsb(),
oklch() or cmyk() value or a CSS color name, and get 13 formats at once:
HEX, RGB, RGB as 0-1 floats, RGB as percentages, HSL, HSV/HSB, HWB, OKLCH, LAB, LCH, XYZ, LUV and CMYK — each row
with its own copy button. R/G/B and H/S/L sliders fine-tune the color, and the swatch sits on a checkerboard so
alpha stays visible. OKLCH (CSS Color 4) is the perceptual format modern design systems like
Tailwind v4 and shadcn ship in. Add an alpha value to produce rgba(), hsla(),
oklch(… / a) and 8-digit HEX; the RGB 0-1, RGB %, HWB, LAB, LCH and XYZ rows carry it too.
Which white point each row uses
lab() and lch() are given on the D50 white point, the way CSS Color 4
defines them — linear sRGB to XYZ D65, Bradford adaptation, then XYZ D50 to Lab. color(xyz-d65 …) and
LUV are on D65, the sRGB white point. The page says which is which, because silently mixing the
two is the classic reason two converters disagree about the same color. CMYK uses the standard formula with no ICC
profile, so treat it as a screen approximation rather than a print proof.
Everything else one color tells you
Under the formats: the contrast ratio against white and black, with WCAG AA and AAA for normal
and large text — a translucent color is composited over the ground first, so the ratio is the one actually seen.
Then the eight nearest named CSS colors as clickable swatches (names that share a hex, like aqua
and cyan, collapse to one), a color-vision preview next to normal vision (protanopia, deuteranopia,
tritanopia and achromatopsia, using the same standard matrix approximation as the image simulator — not a medically
exact model), six harmonies (complementary, analogous, split complementary, triadic, tetradic as the
60°/180°/240° rectangle and square as the even 90°/180°/270° split), and five variation ramps of nine
swatches — tints, shades, tones, hues and temperatures. Tints, shades and tones start at your untouched
color and stop short of flat white, black or grey; hues sweeps 60° either side of it. Click any swatch to copy its
hex. One button opens a table of all 148 CSS color names with preview, hex and R, G, B. Press the
spacebar inside the tool, or use the Random color button, for a new color, and Copy link shares the current color as
?c= in the URL. Everything runs locally in your browser.
Frequently asked questions
Which formats are supported?
You can type or paste HEX (3-, 4-, 6- or 8-digit), rgb()/rgba() in 0-255 or percentages, hsl()/hsla(), hsv()/hsb(), oklch(), cmyk() and CSS color names — and 13 rows update at once: HEX, RGB, RGB 0-1, RGB %, HSL, HSV/HSB, HWB, OKLCH, LAB, LCH, XYZ, LUV and CMYK. HWB, LAB, LCH, XYZ, LUV and the RGB 0-1 row are output only; the RGB % row does read back if you paste it.
Can I convert CMYK to HEX?
Yes — paste a cmyk() value such as cmyk(0%,100%,100%,0%) and get HEX, RGB and HSL back. It uses the standard formula without an ICC profile, so treat it as a screen-matching approximation, not a print-accurate proof.
Does it support OKLCH?
Yes. The oklch() row shows the current color in CSS Color 4 OKLCH, and you can paste an oklch() value to convert it back to HEX/RGB. Because this tool works in sRGB, a wide-gamut OKLCH value is clamped to the nearest sRGB color.
Does it support transparency (alpha)?
Yes — set the alpha slider and it outputs rgba(), hsla(), oklch(… / a) and 8-digit HEX, and the alpha also appears in the RGB 0-1, RGB %, HWB, LAB, LCH and XYZ rows. HSV, LUV and CMYK have no alpha syntax here, so they stay opaque. The preview shows transparency over a checkerboard, and the contrast ratios are measured on the color composited over the background rather than on the raw value.
Can I copy the result for CSS?
Yes — each value has a Copy button ready to paste into your stylesheet.
Does it show LAB, LCH, XYZ, LUV and HWB?
Yes, as five extra rows. lab() and lch() are on the D50 white point that CSS Color 4 defines them on, reached through Bradford adaptation from D65; color(xyz-d65 …) and luv() are on D65, the sRGB white point. Each row says which. LUV has no CSS syntax, so it is printed as a plain luv(L, u, v) triple.
Can I check the contrast of a color here?
Yes. The Contrast section shows the ratio against white and against black, with pass/fail for WCAG AA (4.5:1), AAA (7:1) and the large-text thresholds (3:1 and 4.5:1). If the color is translucent it is composited over that background first, so the number matches what a reader actually sees.
Does it show color harmonies, tints and shades?
Yes. Six harmonies are drawn at once — complementary, analogous, split complementary, triadic, tetradic and square — each starting with your unchanged color and rotating only the hue. Below them are five ramps of nine swatches: tints (toward white), shades (toward black), tones (toward grey), hues (60° either side) and temperatures (cool to warm, your color in the middle). Click a swatch to copy its hex.
Can I see how the color looks to a color-blind viewer?
Yes. Alongside normal vision it previews protanopia, deuteranopia, tritanopia and achromatopsia. It applies the same per-pixel transform the image color-blindness simulator uses — the widely used approximation matrices, plus Rec. 601 luma for achromatopsia. They are approximations for design checks, not medically exact simulations.
Is there a list of all the CSS color names?
Yes. A button opens a table of all 148 CSS named colors with a preview swatch, the name, the hex and the R, G, B values. It is built only when you open it, so it does not slow the sliders down.
Can I share or bookmark a color?
Yes. The color is written into the URL as ?c=, and the Copy link button copies that address. The alpha slider is not part of the link, so a shared color arrives fully opaque.
How do I get a random color?
Click inside the tool and press the spacebar, or use the Random color button. The shortcut is scoped to the tool rather than the whole page, so pressing space elsewhere still scrolls normally.