Color Converter
Convert colors between HEX, RGB, HSL, HWB, OKLCH and CMYK with a live contrast check.
Color Converter tool
| HEX | | |
|---|---|---|
| HEX + alpha | Eight-digit hex. Supported everywhere except Internet Explorer. | |
| RGB | | |
| HSL | | |
| HWB | Hue plus whiteness and blackness — easier to reason about for tints and shades. | |
| OKLCH | Perceptually uniform: equal lightness steps look equal. | |
| CMYK | Unmanaged conversion. A print shop will want an ICC profile, not this. | |
| CSS name | |
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Contrast is measured on the colour composited over that background, because a translucent colour has no luminance of its own.
What this tool does
Give it a colour in any notation — hex with three, four, six or eight digits, rgb(), hsl(), hwb(), oklch(), cmyk() or a CSS
keyword — and it shows every other notation at once, with alpha carried through all of them
and a copy button on each row.
Below the conversions is a WCAG contrast panel: the ratio against white and against black, with pass or fail badges for AA and AAA at normal and large text sizes.
Common uses
- Turning a hex value from a design file into the
rgb()triple a canvas API or a shader wants. - Finding out whether a brand colour is legible as body text before it ships.
- Converting a palette to OKLCH so that lightness steps can be generated arithmetically.
- Reading an eight-digit hex from a stylesheet and seeing what the alpha actually is.
A short example
Entering #4f46e5 produces:
rgb(79, 70, 229)
hsl(243.4, 75.4%, 58.6%)
hwb(243.4 27.5% 10.2%)
oklch(0.5106 0.2301 276.97)
cmyk(65.5%, 69.4%, 0%, 10.2%)Its contrast against white is 6.29:1 — comfortably AA for body text, short of AAA — and 3.34:1 against black, which fails AA for normal text. That asymmetry is the whole argument for checking rather than guessing.
Why OKLCH is not just HSL with new units
HSL is a trivial rearrangement of RGB, so its lightness is a geometric artefact rather than a
perceptual one. hsl(60 100% 50%) and hsl(240 100% 50%) claim
identical lightness, but the yellow is blinding and the blue is nearly black. Sort a palette
by HSL lightness and the order will not match what anyone sees.
OKLCH is derived from OKLab, which models cone responses: linear-light sRGB becomes three
LMS channels, each is cube-rooted, and a second matrix produces lightness plus two opponent
axes. This tool implements that path exactly rather than approximating it, which is why
#ff0000 reports L 0.628 and C 0.2577 — the published reference values. The
payoff is that equal steps in L look equal. The cost is that OKLCH describes colours sRGB
cannot display, so vivid values get clamped on the way back.
Worth knowing
CMYK here is the unmanaged formula every web tool uses: it ignores ink, paper and press entirely. Send it to a printer as a starting point, never as a specification — real output needs an ICC profile. The contrast figures use the WCAG 2.x relative luminance formula, whose weakness on dark backgrounds is well documented; APCA, drafted for WCAG 3, models it better but is not yet normative, so conformance still means these numbers. A translucent colour is composited over the backdrop before measuring, because it has no luminance of its own.
Frequently asked questions
What contrast ratio does my text actually need?
WCAG 2.2 success criterion 1.4.3 sets AA at 4.5:1 for body text and 3:1 for large text, where large means 18pt (24px) or 14pt bold (18.66px bold). Criterion 1.4.6 raises AAA to 7:1 and 4.5:1 respectively. Icons, focus rings and input borders are covered by 1.4.11 at 3:1. Disabled controls and pure decoration are exempt from all of them.
What are the extra digits in an eight-digit hex colour?
Alpha, as the final pair: #RRGGBBAA from CSS Color 4, with #RGBA as the four-digit shorthand. It is hexadecimal out of 255 rather than a percentage, so half opacity is 80 and not 50. The trap is Android, which orders the same four channels as #AARRGGBB — paste one of those into a stylesheet and you get the wrong hue and the wrong transparency together.
How do I decide between black and white text over a colour?
Measure the ratio against both and keep the larger; the panel above shows the pair for exactly this. The crossover sits at a relative luminance of about 0.179, well below the halfway point, so a mid-grey already wants black text. The familiar shortcut of thresholding (r*299 + g*587 + b*114)/1000 at 128 is an old NTSC brightness formula applied to gamma-encoded values, and it picks white for greys from roughly 118 to 128 where black scores higher.