HEX, RGB, HSL and OKLCH color converter
Convert colors between HEX, RGB, HSL, HSV, OKLCH and CMYK, check WCAG contrast with AA and AAA badges, and build tint and shade scales instantly.
- Runs in your browser
- Nothing you enter is sent
- Free, no account
| Format | Value | Copy |
|---|---|---|
| HEX | #3b82f6 | |
| HEX + alpha | #3b82f6ff8-digit form, #rrggbbaa | |
| RGB | rgb(59, 130, 246) | |
| RGB (CSS 4) | rgb(59 130 246)Space-separated syntax | |
| HSL | hsl(217.2, 91.2%, 59.8%) | |
| HSV / HSB | hsv(217.2, 76%, 96.5%)Used by most colour pickers | |
| OKLCH | oklch(62.31% 0.188 259.81)Perceptually uniform — equal steps look equal | |
| CMYK | cmyk(76%, 47.2%, 0%, 3.5%)Naive conversion, no ICC profile | |
| Oklab L C H | L 62.31% · C 0.1880 · H 259.81° |
Large heading sample
Normal body text at 14 pixels, the size most interfaces actually use for paragraphs.
How to convert a colour
- Type or paste a value in any supported notation, or use the swatch picker.
- Every other format is produced instantly in the table below, each with its own copy button.
- Drag the RGB or HSL sliders to explore nearby colours — the text field stays in sync.
- Set a background colour to get the WCAG contrast ratio and pass or fail badges for each level.
- Click any tint or shade to adopt it as the new working colour.
What each colour space is for
| Space | Model | Best used for |
|---|---|---|
| HEX | Three or four bytes of sRGB | Design handoff, CSS, anywhere compactness matters |
| RGB | Additive red, green, blue | What screens actually emit; canvas and image pixel work |
| HSL | Hue, saturation, lightness | Quick manual tweaks — nudging a hue or dropping lightness |
| HSV / HSB | Hue, saturation, value | The model behind most colour pickers, including Photoshop's |
| OKLCH | Perceptual lightness, chroma, hue | Generating palettes and states that look evenly spaced |
| CMYK | Subtractive cyan, magenta, yellow, key | Print — but only as an approximation without an ICC profile |
Why OKLCH beats HSL for palettes
HSL's "lightness" is a simple arithmetic average of the extremes of the RGB channels, and it does not
match how the eye works. Pure yellow at hsl(60 100% 50%) and pure blue at
hsl(240 100% 50%) claim identical lightness, yet the yellow is blindingly bright and the
blue is nearly black. Build a set of buttons by rotating hue at fixed HSL lightness and some of them
will need white text while others need black.
OKLCH is built on the Oklab model, which was fitted to perceptual data. Equal changes in its L axis look like equal changes in brightness across every hue, so a scale generated by stepping L produces a palette that reads as consistent. That is why CSS Color 4 added it, and why design systems have been migrating.
How WCAG contrast is calculated
Each sRGB channel is divided by 255, then linearised: values at or below 0.04045 are divided by 12.92,
and the rest go through ((c + 0.055) / 1.055)2.4. Relative luminance is then
0.2126R + 0.7152G + 0.0722B — green dominates because human vision is most sensitive to
it. The ratio between two colours is (Llighter + 0.05) / (Ldarker + 0.05),
giving a number between 1:1 and 21:1.
| Requirement | Level AA | Level AAA |
|---|---|---|
| Body text under 18pt (24px) | 4.5:1 | 7:1 |
| Large text — 18pt (24px), or 14pt (18.66px) bold | 3:1 | 4.5:1 |
| Icons, borders and other meaningful UI | 3:1 | — |
| Decorative graphics, logos, disabled controls | Exempt | Exempt |
Passing the ratio is a floor, not proof of legibility. A thin weight at 4.5:1 is still hard to read, and the formula ignores font size, weight and the surrounding layout entirely. Check the sample block above as well as the number.
Transparency
Contrast is only defined between two opaque colours, so a translucent foreground is first flattened onto the background you chose — the same compositing the browser performs. Change the background and the ratio changes, which is exactly the point: a colour at 60% alpha that passes on white can easily fail on a mid-grey card.
About the CMYK figures
The conversion here is the standard device-independent formula with no colour management. Real print output depends on the press, the ink set, the paper and an ICC profile, and a great many sRGB colours — saturated cyans and greens especially — simply cannot be reproduced in CMYK at all. Use these numbers as a starting point for a conversation with your printer, never as final artwork values.
Questions
What is OKLCH and why should I care?
OKLCH is a perceptually uniform colour space: equal changes in lightness or chroma look equally different to the eye. That makes generated palettes and hover states far more consistent than the same maths done in HSL.
How is the contrast ratio calculated?
By the WCAG 2.1 formula: linearise each channel, take the relative luminance, then (L_lighter + 0.05) / (L_darker + 0.05). The result runs from 1:1 to 21:1 and is shown against the AA and AAA thresholds.
What contrast ratio do I need to pass?
AA needs 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) and UI components. AAA needs 7:1 and 4.5:1 respectively. Each threshold gets its own pass or fail badge.
Why does my CMYK value not match my printer?
This uses the naive device-independent conversion with no ICC profile. Real print output depends on ink, paper and profile, so treat the CMYK figures as a starting point and trust a proof for anything that matters.
Does it support alpha?
Yes. Eight-digit hex, rgba() and hsla() all parse, and the alpha channel is preserved across every output format that can express it.