How to convert HEX to RGB, HSL and OKLCH, and which one to paste where

Converting a colour is arithmetic. Deciding which of the results to paste is the part people get wrong, because the notations are not interchangeable in what they let you do afterwards.

Convert a colour with the tool

1. Open the Colour converter and type or paste into the field labelled Any CSS colour. It reads hex with or without the hash, CSS colour names, and rgb(), hsl() and oklch() values. The swatch to the left of the field opens a colour picker if you would rather choose by eye.
2. Check the large swatch underneath. It shows the colour at a size you can judge, with its hex code set in whichever of black or white measures higher against it.
3. Find the group for where the value is going: Paste into CSS, Paste into a design tool, or Going to print. Every row carries a one-line note on when to reach for it.
4. Click a row to copy it. The whole row is the button, and its label changes to “copied”. To take everything at once, press Copy all formats in the bar at the bottom of the page (or the C key), which copies every conversion, one per line.
5. Before committing, read Contrast as text. It gives the ratio of your colour as text on white and on black, labelled “AA body”, “AA large only” or “fails AA”. Beside it, Colour vision shows the same colour as eight swatches: typical vision and seven simulated deficiencies.

One colour in every notation

The tool opens on #2563EB. Here is what it gives for that colour, and where each value belongs.

Notation	#2563EB written as	Paste it into
HEX	#2563EB	Any CSS property; anywhere a plain value is enough
RGB	rgb(37 99 235)	CSS when you need transparency, as rgb(37 99 235 / 50%); canvas and image data
OKLCH	oklch(54.6% 0.215 262.9)	Design tokens, ramps, lighter and darker variants
HSL	hsl(221 83% 53%)	A quick hand tweak, never a system
HEX, no hash	2563EB	Figma, Sketch and Canva colour fields
CSS variable	--color: #2563eb;	A token file
CMYK	cmyk(84% 58% 0% 8%)	A conversation with a printer, not a specification

A colour notation is a way of writing down a colour, not a different colour. Every row above is the same blue. What changes is what the numbers let you reason about: HEX tells you nothing by looking at it, RGB is what the screen does, HSL is easy to adjust by hand, and OKLCH is the one whose lightness axis matches what you see.

That last point deserves one figure rather than a repeat of the full argument. At an HSL lightness of 50%, pure yellow has a relative luminance of 0.928 and pure blue 0.072, nearly thirteen times apart at the same nominal lightness. Why that rules HSL out for anything systematic, and what OKLCH does instead, is covered in OKLCH for designers.

What goes wrong when you convert

Rounded HSL does not come back to the same hex

The converter rounds HSL to whole numbers, as nearly every tool and stylesheet does. That rounding is lossy. Take hsl(221 83% 53%) back to RGB and the red channel works out as 255 × (0.53 − 0.83 × 0.94 ÷ 2) = 255 × 0.1399 = 35.7, which rounds to 36. The original was 37. So #2563EB goes out as HSL and comes back as #2463EB.

Nobody can see a difference of one in the red channel. A token audit that compares strings, or a design file that checks for an exact brand hex, will see it every time. Store the HEX or OKLCH value as the source of truth and treat HSL as a view of it.

Transparency does not survive

Paste an eight-digit hex such as #2563EB80 and every format comes back opaque, because the converter works on the colour and drops the alpha channel. If you need the transparency, add it back in the RGB form, rgb(37 99 235 / 50%), which is what the tool’s note on the RGB row suggests.

CMYK is not a print colour

Device CMYK is a conversion straight from screen RGB to ink percentages with no ICC profile, so it knows nothing about the paper, the press or the inks. The arithmetic is simple enough to check by hand. For #2563EB, black is K = 1 − 235 ÷ 255 = 8%, and cyan is (1 − 37 ÷ 255 − 0.078) ÷ (1 − 0.078) = 84%. Every web converter performs this same naive calculation, so the tool labels it as a starting point. For print, convert in software that knows your paper and press profile.

The notation does not change the contrast

Converting never improves a colour’s legibility. Relative luminance is the WCAG measure of how much light a colour gives off, from 0 for black to 1 for white, and contrast ratios are computed from it. #2563EB has a relative luminance of 0.1532 whichever way you write it. As text on white that is (1 + 0.05) ÷ (0.1532 + 0.05) = 5.17, which the tool shows as 5.16:1 because it truncates rather than rounds, so a ratio just under a threshold never displays as passing. On black it is (0.1532 + 0.05) ÷ 0.05 = 4.06:1: large text only. If a colour fails, the fix is a lightness change, which is what the Contrast checker searches for.

Other ways to do it

For CSS you may not need to convert at all. HEX, rgb(), hsl() and oklch() are all valid CSS colour values, so a value from a design file can usually be pasted as it is.

HEX to RGB is easy by hand, because each pair of hex digits is a number in base 16. For #2563EB: 25 is 2 × 16 + 5 = 37, 63 is 6 × 16 + 3 = 99, and EB is 14 × 16 + 11 = 235. That gives rgb(37 99 235).

OKLCH is not practical by hand. It means linearising each channel, two matrix multiplications and a cube root, which is a job for code. No built-in operating-system method is given here, because we have not verified one that produces all of these notations.

Checking nothing left the page

The conversion runs in the tab, and the colour you enter is written into the address bar after a #. That part of a URL is never sent to the server, which is also why a copied link reopens the same colour. To check, open your browser’s developer tools, choose the Network panel and type a few colours: you will see no request carrying them. The page’s own analytics beacon reports the page path, not the fragment.

Next

Open the Colour converter and paste the colour you are about to commit. If it is going into a system rather than a single rule, the Ramp and token generator turns one OKLCH value into eleven steps with roles assigned by measured contrast.