Colour converter

HEX, RGB, HSL, OKLCH and CMYK, with contrast alongside.

#2563EBNear Royal Blue

Paste into CSS

Paste into a design tool

Going to print

Contrast as text

Text5.16:1AA body
Text4.06:1AA large only

Colour vision

Typical
Deuteranomaly
Deuteranopia
Protanomaly
Protanopia
Tritanomaly
Tritanopia
Achromatomaly

What colour converter is

A converter restates one colour in other notations — HEX, RGB, HSL, OKLCH, CMYK. The notations are not equivalent in what they let you reason about: two of them describe the screen, one describes a device-dependent print approximation, and only one has a lightness axis that matches perception.

What this tool does that others do not

  • It says which format is for which job

    HEX is the lingua franca and completely opaque — you cannot tell by looking whether two codes share a hue. RGB is what the screen does, and what you need for canvas and image data. HSL is convenient for a quick tweak and wrong for anything systematic. OKLCH is the one with genuinely independent components, so you can change lightness without the hue appearing to shift.

    At an HSL lightness of 50%, yellow has a relative luminance of 0.928 and blue 0.072 — nearly thirteen times apart at the same nominal lightness.

  • Contrast and colour vision alongside the conversion

    The same colour is shown with its measured contrast and its behaviour under simulated colour-vision deficiency, because the reason for converting is usually that you are about to use it somewhere.

  • CMYK labelled as indicative

    Device CMYK conversion without an ICC profile is an approximation, and every web tool performs the same naive conversion. That is stated rather than left for the print shop to discover — for print, convert in software that knows your paper and press.

How to use it

  1. Paste any CSS colour

    Named colours, hex in three, four, six or eight digits, and the functional notations all parse.

  2. Copy the format the destination wants

    OKLCH for a design system or a ramp; RGB for canvas work; HEX for everything that just needs a value.

  3. Glance at the contrast figure

    It is the cheapest sanity check available on a colour you are about to commit to.

Worked example

Real input, real figures.

Why two colours at the same HSL lightness look nothing alike

You give it

hsl(60 100% 50%) and hsl(240 100% 50%).

You get

Relative luminance 0.928 against 0.072 — a factor of nearly 13 at an identical nominal lightness of 50%. In OKLCH the same two colours report lightnesses that actually differ, which is why a ramp built in OKLCH steps evenly and one built in HSL does not.

Against a typical hex-to-RGB converter

AspectThis toolA typical converter
FormatsHEX, RGB, HSL, OKLCH, CMYKHEX, RGB, HSL
GuidanceWhich notation suits which jobNone
CMYKLabelled a naive device conversionPresented as a value
ExtrasContrast and colour-vision behaviour shownConversion only

Guide

Which format for which job

HEX is the lingua franca. Compact, universally understood, and completely opaque — you cannot tell by looking whether two hex codes share a hue.

RGB is what the screen actually does. Useful when you need an alpha channel or are working with canvas and image data.

HSL is readable and convenient for a quick tweak, but its lightness axis does not match perception. A yellow and a blue at 50% HSL lightness differ by about thirteen times in measured luminance.

OKLCH is what you want for anything systematic. Perceptually uniform lightness, so equal steps look equal, and the three components are genuinely independent — you can change lightness without the hue appearing to shift.

CMYK here is a naive device conversion with no ICC profile, which is what every web tool produces. Indicative only.

Questions people ask

Straight answers. Each one links directly: copy the address after opening it.

What is OKLCH and why should I use it?

OKLCH is a perceptually uniform colour space — equal steps in its lightness axis look equal to the eye, which is not true of HSL. That makes it the correct space for building ramps, generating dark-mode variants, and adjusting contrast without shifting the apparent hue. It is supported in every major browser.

Why does my CMYK value not match my printer?

Device CMYK conversion without an ICC profile is an approximation, and every web tool does the same naive conversion. For print, convert in software that knows your paper and press profile. Treat the value here as an indication, not a specification.

Is HSL lightness the same as OKLCH lightness?

No, and this is the most common source of confusion. A yellow and a blue at the same HSL lightness differ enormously in perceived brightness — about thirteen times in measured luminance (0.928 against 0.072). OKLCH lightness corresponds to what you actually see.