Color Converter

Q: How do I convert hex to RGB?

Read the pairs: #3b82f6 is 3b, 82 and f6 in base 16 — 59, 130 and 246 in decimal — so the value is rgb(59 130 246). A fourth pair is alpha out of 255. This page does that arithmetic in both directions.

Q: What is OKLCH, and when is it better than HSL?

oklch() states lightness, chroma and hue in a space built so equal steps look equal. hsl() lightness is only geometric — hsl(60 100% 50%) yellow and hsl(240 100% 50%) blue share the 50% figure yet differ sharply in brightness. Prefer OKLCH when lightness must mean one thing at every hue.

Q: Is anything I paste uploaded?

No. Parsing, conversion, gamut mapping and CSV assembly run inside this page; batches beyond 200 KB move to a worker in the same tab. Share links keep state in the URL fragment, which browsers never send to a server.

Paste any CSS color and read every notation at once — HEX, RGB, HSL, OKLCH, LAB and more — entirely on this device.

0 bytes uploaded

Color — any CSS notation

Pick a color

Swatch

LightDark

This browser can't show Display P3 — the value below still converts.

Results

HEX	—
RGB	—
HSL	—
HWB	—
LAB	—
LCH	—
OKLAB	—
OKLCH	—
Display P3	—
CMYK	—
Nearest named	—

0 B · 0 lines

Press ? for shortcuts

Do it offline:$ pastel format hsl '#3b82f6'

How to use it

Paste any CSS color — bare 6-digit hex like 3b82f6 also works — or use the native picker; the detected format is announced.
Read every notation row at once and copy any of them; the swatch renders over a light or dark backdrop.
A color outside sRGB shows its gamut-mapped value behind a badge; the OKLCH and Display P3 rows keep the original coordinates.
Switch to Batch to scan CSS or free text — each occurrence becomes a row in document order — and Download CSV.

Paste one CSS color and read every notation at the same time: hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), Display P3 and a naive CMYK estimate, plus the nearest named color measured in OKLab. Batch mode scans a whole stylesheet and exports CSV. Detection, conversion and gamut mapping happen in this tab — colors are never uploaded.

How it works

Each input is parsed to numbers once, carried through the conversion matrices CSS Color Level 4 defines, and serialized at fixed precision — integers for rgb(), one decimal for lab() and lch(), three for oklab() and oklch() — in the modern space-separated syntax.

Some coordinates have no sRGB equivalent — oklch(0.7 0.32 150) asks for more chroma than the gamut holds. Rather than clipping channels, the page follows the CSS gamut-mapping procedure: chroma is walked down in OKLCH until the color fits, and a badge says the swatch was mapped.

OKLCH's axes are decoupled in Björn Ottosson's OKLab space: rotate the hue and the perceived lightness holds, which hex and hsl() cannot promise — the property that put it in CSS Color Level 4.

Examples

#3b82f6

hex        #3b82f6
rgb        rgb(59 130 246)
hsl        hsl(217 91% 60%)
hwb        hwb(217 23% 4%)
lab        lab(54.6 8.8 -65.8)
lch        lch(54.6 66.4 277.6)
oklab      oklab(0.623 -0.033 -0.185)
oklch      oklch(0.623 0.188 259.8)
display-p3 color(display-p3 0.305 0.503 0.934)
cmyk       cmyk(76%, 47%, 0%, 4%)
nearest    dodgerblue (ΔE 0.036 in OKLab)

Ten notations describing one identical pixel. The cmyk row is device arithmetic, always labeled naive; nearest named colors are ranked by OKLab distance, and dodgerblue sits ΔE 0.036 away.

oklch(0.7 0.32 150)

badge      outside sRGB; showing gamut-mapped value
hex        #00c248
rgb        rgb(0 194 72)
oklch      oklch(0.7 0.32 150)
display-p3 color(display-p3 -0.269 0.79 0.144)

Chroma 0.32 at this hue exceeds sRGB, so the swatch rows carry the mapped color under the badge outside sRGB; showing gamut-mapped value. Display P3 converts the untouched original; its negative channel means even P3 cannot reach this green.

.red-button { background: #ef4444; border-color: rgb(185 28 28); }
.accent { color: var(--brand, #8b5cf6); outline: 2px solid hsl(258 90% 66%); }

3 colors found · 1 var() reference skipped
#ef4444          → oklch(0.637 0.208 25.3)
rgb(185 28 28)   → #b91c1c
hsl(258 90% 66%) → #895af6

Three literals become rows; on the page each carries every notation. The selector .red-button never matches as the color red, and var(--brand, #8b5cf6) is skipped whole, fallback included, with an honest count.

Every example on this page is executed against the same engine that powers the tool, on every build.

Gotchas worth knowing

Bare hex converts only at exactly six digits

3b82f6 without its # parses — a copied hex value usually loses the prefix in transit. Bare fff, ff00 and 12345678 stay refused (too often ids or plain numbers), while #fff, #ff00 and #12345678 convert normally.

4- and 8-digit hex alpha flows into every notation

#3b82f680 carries alpha 128/255, appended to each CSS form as / 0.502 — rgb(59 130 246 / 0.502) — and kept on the hex. Only cmyk stays alpha-free; no print convention has a slot for it.

Out-of-range channels clamp, and say so

CSS clamps rgb(), hsl() and hwb() channels at parse time and this page does the same: rgb(300, -20, 999) converts as rgb(255 0 255), with a chip listing every clamped channel as original → clamped.

The batch scanner reads value tokens, not selectors

Matched: hex runs, the nine color functions, standalone named-color words. red inside .red-button or red.png never counts; var() references are skipped and tallied; url() bodies are ignored; gradients are stepped into. Tokens in comments still match — a heuristic, not a CSS parser.

CMYK here is arithmetic, not color management

The row computes K = 1 − max(R, G, B) from the sRGB values and carries the label naive conversion, not print-accurate on every result. Real print work needs an ICC profile for a specific press.

Common errors

Not a recognized color. Try `#3b82f6`, `rgb(59 130 246)`, or `oklch(0.62 0.19 259)`.: Beyond the three suggestions, hwb(), lab(), lch(), oklab(), named colors and bare 6-digit hex parse too. color() and color-mix() refuse instead of half-converting.
`currentColor` is a context-dependent keyword — it has no fixed color value outside a document.: currentColor, inherit and the other CSS-wide keywords resolve against a real element; any fixed answer would be invented. Paste the computed value from your browser inspector.
Out-of-range channels clamped: r 300 → 255, g -20 → 0, b 999 → 255.: The conversion still runs — rgb(300, -20, 999) lands on rgb(255 0 255), an exact match for the named color fuchsia — but every clamped channel is named with its original value.
Batch input is 1,048,577 characters — larger than the 1,048,576-character (1 MB) limit.: The 1 MB batch cap is a refusal, never a silent truncation. For stylesheet-scale jobs, pastel format hex < colors.txt converts a file of color values line by line.

FAQ

How do I convert hex to RGB?