API URL Kit
Colour & Design Runs in your browser

Colour Converter — HEX, RGB, HSL, OKLCH & Contrast Checker

Type, paste or pick a colour in any format — HEX, RGB, HSL, HWB, OKLCH, OKLab, HSV, CMYK or a CSS name — and get every other format, ready to copy. The tool also checks WCAG contrast with white and black text, finds the nearest CSS colour name, and builds an evenly spaced scale of tints and shades in OKLCH.

9 input formats WCAG contrast Tints & shades Runs in your browser

Contrast (WCAG 2)

Tints & shades

Evenly spaced in OKLCH lightness, keeping the hue. Click a step to use it.

What Colour Converter does

Paste anything, get everything

#3b82f6, rgb(59 130 246 / 50%), hsl(217 91% 60%), oklch(62% 0.19 260), cmyk(76, 47, 0, 4) or tomato — the format is recognised automatically and every other one appears with its own Copy button.

Contrast you can act on

See the WCAG 2 ratio for white and black text on your colour, and for your colour as text on white and black, with pass or fail for AA, AA large and AAA.

A scale that looks even

Tints and shades from 50 to 950 are spaced in OKLCH lightness, keeping the hue, so every step looks like the same distance apart — unlike HSL, where a yellow and a blue at 50% lightness look nothing alike.

OKLCH done properly

OKLCH can describe colours brighter than a normal screen shows. Those are marked, and brought into range by lowering chroma while keeping lightness and hue — the approach CSS Color 4 recommends — rather than clipping, which shifts the hue.

Nearest CSS name

An exact match shows its CSS name. Otherwise the perceptually closest of the 148 named colours is shown — useful for naming design tokens.

Private and instant

Everything is worked out in your browser. Brand colours for a launch that has not happened yet go nowhere.

Supported formats

The formats and standards this tool works with.

HEXRGBHSLHWBOKLCHOKLabHSVCMYKCSS names

How it works

  1. Enter a colour

    Type or paste it in any format, use the picker, or press Random.

  2. Copy the format you need

    HEX, RGB, HSL, HWB, OKLCH, HSV and CMYK are listed side by side.

  3. Check contrast

    Make sure text on this colour passes WCAG AA for your use.

  4. Build a scale

    Click any tint or shade to make it the current colour.

Cheatsheet

The tokens you reach for most, at a glance.

#rrggbb / #rgbHEX; add two digits (#rrggbbaa) for alpha
rgb(59 130 246 / 50%)Modern CSS; commas and rgba() also accepted
hsl(217 91% 60%)Hue in degrees, saturation, lightness
hwb(217 23% 4%)Hue, whiteness, blackness
oklch(62% 0.19 260)Lightness, chroma, hue — perceptually even
0.5turn / 3.14radHue units other than degrees

How people use it

CSS and design tokens

Move a colour from Figma HEX to modern CSS oklch(), or back to rgb() for older code.

Accessibility reviews

Check that button and link colours meet WCAG AA before they ship.

Palette building

Turn one brand colour into an 11-step scale for backgrounds, borders and hover states.

Print hand-off

Get an approximate CMYK for a brief, as a starting point for the printer's proof.

Frequently asked questions

How do I convert HEX to RGB?

Split the six digits into three pairs and read each pair as a base-16 number from 0 to 255. #3b82f6 is 3b = 59, 82 = 130, f6 = 246, so rgb(59, 130, 246). A three-digit HEX doubles each digit: #abc is #aabbcc.

What is OKLCH and why use it?

OKLCH describes a colour by lightness, chroma (how vivid) and hue, in a space designed so equal steps look equal to the eye. Changing only the L value gives a lighter or darker version that genuinely keeps its hue, which makes it well suited to palettes and themes. Every current browser supports oklch() in CSS.

What contrast ratio do I need?

WCAG 2 AA asks for at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). AAA asks for 7:1 and 4.5:1. The lightest grey that passes AA on white is #767676.

Why is the CMYK value only approximate?

True CMYK depends on the ink, the paper and the printer's colour profile. The simple formula used by most online tools, including this one, is a starting point for a brief — for anything colour-critical, ask the printer for a proof.

What does 'outside the sRGB gamut' mean?

The colour is more vivid than a standard screen can show. The tool shows and converts the closest colour that does fit, with the same lightness and hue but less chroma. Wide-gamut displays can show more, which is why CSS allows such colours at all.

Does contrast account for transparency?

No — contrast is measured on the opaque colour, because the result depends on what is behind it. Flatten the colour onto its real background first. To shrink or clean up images instead, try the image compressor.

Last updated 2026-09-15