Color Converter
One box for every notation: paste a color exactly as it was sent to you — hex, rgb(), hsl(), oklch(), even a name like crimson — and copy it back in all nine formats at once.
Accepts hex, named colors, rgb, hsl, hwb, hsv, cmyk, lab, lch, oklab, oklch and color(srgb …).
Enter a color to see every format.
One input, nine outputs
Most converters make you declare what format you already have. This one does not care: it parses whatever you paste, renders a live swatch, and prints the color simultaneously as HEX, RGB, HSL, HSV, CMYK, CIE Lab, CIE LCH, OKLab and OKLCH — each row with its own copy button. A single parser normalizes the input, one engine performs all conversions in double-precision floating point, and rounding happens only at the display step, so the nine rows always agree with one another.
A concrete example: the blue #3564c4 is simultaneously rgb(53, 100, 196), hsl(220.3, 57.4%, 48.8%), cmyk(73%, 49%, 0%, 23.1%), lab(43.17 9.96 -56.01) and oklch(52.33% 0.1589 262.61). Five spellings, one color — which spelling you should store depends entirely on what will read it next.
Every input notation this converter accepts
Each example below is (at least approximately) that same mid-blue, so you can compare how the notations spell one color:
| Notation | Example input | Good to know |
|---|---|---|
| HEX | #3564c4 | 3-, 4-, 6- and 8-digit forms; the # is optional for 6-digit codes |
| Named color | crimson | all 148 CSS color keywords, plus transparent |
| rgb() / rgba() | rgb(53 100 196) | channels as 0–255 numbers or percentages; spaces or commas |
| hsl() / hsla() | hsl(220 57% 49%) | hue in degrees; the legacy comma syntax works too |
| hwb() | hwb(220 21% 23%) | a hue mixed with whiteness and blackness |
| hsv() / hsb() | hsv(220 73% 77%) | not part of CSS, but the model most app color pickers use |
| cmyk() / device-cmyk() | device-cmyk(0.73 0.49 0 0.23) | uncalibrated print approximation |
| lab() | lab(43.17 9.96 -56.01) | CIE Lab with the D50 white point, matching Photoshop numbers |
| lch() | lch(43.17 56.89 280.08) | polar Lab: lightness, chroma, hue angle |
| oklab() | oklab(0.5233 -0.0204 -0.1576) | the improved perceptual space from CSS Color 4 |
| oklch() | oklch(52.33% 0.1589 262.61) | polar OKLab — the design-system favorite |
| color(srgb …) | color(srgb 0.208 0.392 0.769) | channels as 0–1 floats |
| color(srgb-linear …) | color(srgb-linear 0.036 0.127 0.552) | linear-light values before gamma encoding |
A survival guide for strings found in the wild: a leading # — or a bare six characters of 0–9/a–f — is HEX; three integers up to 255 are RGB; one degree-like number followed by two percentages is HSL (or HWB when the function name says so); a number up to 100 followed by two signed numbers is Lab; and anything starting with “ok” belongs to the modern perceptual family. When in doubt, paste it here — if it parses, the swatch instantly shows what it was.
Which notation should you use?
- HEX — the most compact and most universally understood form; ideal for config files, SVG attributes and quick handoffs.
- rgb() — mirrors the 0–255 integers that canvas pixel data and most JavaScript graphics APIs expect.
- hsl() — fine for quick manual tweaks (“a bit lighter, a bit less saturated”), but its lightness is not perceptually even across hues, so avoid building ramps on it.
- oklch() — the best default for design tokens, tint/shade ramps and dark-mode logic; requires a browser from 2023 or later.
- lab() / lch() — the classic CIE spaces for print-adjacent work, Delta-E comparisons and matching values from Photoshop.
- oklab() — rectangular coordinates suited to color math such as averaging and gradient interpolation.
- cmyk() — treat as a rough preview only; a real press run needs an ICC-profile-based separation, not a formula.
- hwb() — intuitive when you think like a painter: take a hue, add white, add black.
- hsv() / hsb() — handy when transcribing numbers from the pickers in Figma or Photoshop.
How alpha is written in each notation
| Notation | Alpha syntax | Example |
|---|---|---|
| HEX | a fourth digit pair (or fourth digit) | #3564c480 — about 50% opacity |
| rgb() | legacy fourth value, or modern slash | rgba(53, 100, 196, 0.5) or rgb(53 100 196 / 50%) |
| hsl() | the same two styles as rgb() | hsla(220.3, 57.4%, 48.8%, 0.5) |
| hwb(), lab(), lch(), oklab(), oklch(), color() | slash only | oklch(52.33% 0.1589 262.61 / 50%) |
| Named colors | none — switch to a function form | transparent is the single fully transparent keyword |
Alpha never alters the underlying coordinates; this tool carries it into every output that can express it — 8-digit HEX, rgba(), hsla() and the slash form of the Lab family. HSV and CMYK have no standard alpha notation, so those rows show the opaque base color.
Out-of-gamut input and other fine print
Lab, LCH, OKLab and OKLCH can describe colors beyond sRGB. Enter one and the RGB-family rows (HEX, RGB, HSL, HSV, CMYK) display a gamut-mapped substitute — chroma reduced per CSS Color 4 while lightness and hue hold — together with a visible warning, whereas the Lab-family rows retain your exact figures. CMYK earns an extra asterisk: the value uses the standard uncalibrated formula, a useful ballpark that no printing press will match exactly.
Also worth knowing: as you type, the page writes your color into the URL hash, so copying the address bar hands a colleague a link that reopens this converter preloaded with the same value.
If you always convert the same pair of formats, the focused pages are quicker to reach for — the HEX to RGB converter covers the classic case, and the HEX to OKLCH converter the modern one; both are single-purpose front ends to this same engine. Whichever you pick, processing is 100% in-browser: the colors you paste never leave your machine.
Frequently asked questions
Which color formats can I paste into this converter?
Hex codes (the # is optional for 6-digit values), all 148 CSS color names, rgb(), hsl(), hwb(), hsv()/hsb(), cmyk()/device-cmyk(), lab(), lch(), oklab(), oklch(), color(srgb …) and color(srgb-linear …) — each with alpha wherever the notation allows it.
Are conversions between HEX, RGB and HSL exact?
HEX and RGB are two spellings of identical 8-bit values, so those are always exact. HSL and HSV are computed exactly as well and shown rounded to one decimal place.
How reliable is the CMYK output?
It uses the standard formula shared by virtually every online converter, which assumes idealized inks. Treat it as an approximation — professional print work needs an ICC profile for the specific press and paper.
What happens if I enter a Lab or OKLCH color outside sRGB?
The RGB-family rows show a CSS Color 4 gamut-mapped version and the tool flags the adjustment, while the Lab, LCH, OKLab and OKLCH rows keep your exact input values.
Can I link someone directly to a color?
Yes. The converter writes your input into the URL hash as you type, so anyone opening that URL sees the same color already loaded.
Do the colors I enter leave my device?
No. Every parse and conversion runs in your browser with zero network requests, which also means the tool keeps working without an internet connection.