Color Converter

Type any colour into the converter below — a CSS keyword, HEX, RGB, HSL, HWB, CMYK or NCol — and it returns every other format at once, including oklch(). As a rule of thumb in 2026: use HEX for handoff, OKLCH for design tokens and anything you generate tints and shades from, and treat the CMYK values as a rough screen preview rather than print‑ready numbers.

How to use it

• Type or paste a value into the field. Everything updates as you type — there is no submit button.
• Accepted input includes CSS colour keywords (rebeccapurple), HEX (#3366ff or #36f), rgb(), hsl(), hwb(), cmyk() and NCol.
• Use the colour well next to the field if you would rather pick a colour visually.
• Alpha is preserved. Enter rgba(255, 0, 0, 0.5) and the RGB, HSL, HWB and OKLCH rows all come back with the alpha component.
• If the value cannot be parsed, the table hides and an error message appears — usually a stray unit or a missing #.

HEX, RGB, HSL and OKLCH compared

All four describe the same colour. Here is #3366ff, the converter’s default, in each one, with what each format is good for.

Converting HEX to RGB by hand

Split the six digits into three pairs and read each pair as a base‑16 number. For #3366ff: 33 is 3 × 16 + 3 = 51, 66 is 6 × 16 + 6 = 102, and ff is 15 × 16 + 15 = 255, so the colour is rgb(51 102 255). A three‑digit code doubles each digit: #36f is #3366ff. To go back, write each channel as two hex digits.

Which colour format should I use in CSS in 2026?

Short version: HEX to hand a colour to someone, OKLCH to work with it.

• HEX — fine as a value, useless as a thing you edit. You cannot reason about a hex string, but everyone can paste one.
• RGB — use it when something else hands you channels: a canvas, an image picker, an API response.
• HSL — readable, and still fine for a one‑off value. Do not build a design system on it, for the reason in the table below.
• OKLCH — the default for design tokens, palettes and any programmatic lightness or chroma change. Interoperable across browsers since May 2023 and Baseline widely available since November 2025, so it needs no caveat now.
• color-mix() — reach for it before writing a tint generator by hand, and mix in a perceptual space: color-mix(in oklab, var(--brand) 80%, white) rather than in srgb, which goes muddy in the middle.
• color(display-p3 …) — only for brand colours sRGB genuinely cannot reach, and always with an sRGB value first so the cascade has something to fall back to.
• Relative colour syntax — rgb(from var(--brand) r g b / 50%) is genuinely useful, but it is the one feature here still at Baseline newly available, so treat it as an enhancement.

Why HSL breaks palettes and OKLCH does not

In HSL, L is lightness relative to other colours of the same hue, not lightness as your eye perceives it. So six colours that all claim to be 50% lightness are nothing of the sort:

That is why a palette built by stepping HSL lightness produces shades that look uneven, and why swapping the hue of a token can silently destroy its contrast. Step OKLCH L instead and the ramp looks as even as it measures.

Wide‑gamut colour, safely

Most current phones and laptops have Display‑P3 screens, which reach saturated reds and greens sRGB cannot. Declare the sRGB value first and override it only where the display can show the difference:

:root { --brand: #51bc56; }                  /* sRGB fallback, always first */

@media (color-gamut: p3) {
  :root { --brand: color(display-p3 0.32 0.73 0.34); }
}

Both the color() function and the color-gamut media feature are Baseline widely available, so this pattern is safe to ship. Without a fallback the browser will gamut‑map your colour to something you did not choose.

What each format actually is

RGB — an additive model: red, green and blue light combined in different amounts. It is how screens physically work, which is why it underlies every other screen format here.

HEX — the same RGB channels written as three pairs of hexadecimal digits. #ff0000 is rgb(255 0 0). A fourth pair adds alpha.

HSL — hue, saturation and lightness. Far easier to read than HEX, and the reason it stayed popular; just be aware its lightness is not perceptual.

HWB — hue, whiteness and blackness. A cylindrical model like HSL, but expressed as “this hue, with this much white and black mixed in”, which matches how people mix paint. It arrived with CSS Color 4 and so has always been space‑separated: hwb(194 0% 0% / 0.5). Commas inside hwb() are a parse error, which is why this converter emits the space‑separated form.

OKLCH — lightness, chroma and hue in the Oklab perceptual space. The headline property is that its L corresponds to lightness as the eye sees it, so two colours with the same L really do look equally light regardless of hue.

CMYK — a subtractive model for print: cyan, magenta, yellow and key (black) ink on paper. CSS does define a device-cmyk() function, but no browser implements it, and CMYK numbers only mean something alongside a specific printer, ink and paper profile. Treat the values here as a preview and send your printer an ICC profile, not these numbers.

NCol — “natural colours”, a notation from W3Schools that names a hue with a letter and a percentage distance from it. It is a teaching device rather than a web standard: it appears in no CSS specification and no browser parses it.

Colour contrast: converting doesn’t change it

A colour has the same contrast whichever format you write it in, because contrast is worked out from the colour itself, not the notation. WCAG 2.2 calculates it from the relative luminance of the two colours, giving a ratio between 1:1 and 21:1. The thresholds most audits test against are:

For example, #3366ff on white is about 4.7:1, so it just passes for body text. UX Pickle’s own green, #4fba54, is about 2.5:1 on white: fine for a large shape, too light for text. OKLCH helps you predict this, since a lower L means a darker colour, but an L difference is not a contrast ratio, so check the actual pair. WCAG 3 is still a W3C Working Draft and its contrast method is not decided yet, so the WCAG 2.2 ratios above remain the ones to meet.

Related tools

• Colour scheme generator — build a full palette around the colour you have just converted.
• CSS gradient generator — turn two of these colours into a gradient with the CSS to go with it.
• Random colour generator — for when you need a starting point rather than a specific value.
• All design tools — the rest of the set.

Once a palette is in place, the thing worth checking is that it still works where it matters — on small controls, in both states of a toggle button, and against your body text. A free audit of your site will report the contrast failures a palette introduces once it is actually in use.