Color Converter

Type a colour in any form, HEX, rgb, hsl, hwb, cmyk, oklch, oklab or a CSS name, or pick one, and read it in every other form with a copy button beside each. A lightness scale made in OKLCH gives lighter and darker versions with the hue kept true; the contrast panel gives the WCAG ratio against any background and whether it passes AA and AAA; and a picture dropped on the page gives its main colours to click and load. Everything runs in your browser.

How it works

Color Converter is a web page that does its work on your own device. The file you choose is opened by your browser, changed there and saved from there; it is never sent to a server, so there is no copy of it anywhere to delete, no queue and no waiting for an upload. Most online tools of this kind send your file to their servers and work on it there, and many keep it for a while. This one does not. There is no account, no watermark and no limit on how often you use it, and the result downloads the moment it is ready.

Straight to one job

HEX to RGB · RGB to HEX

One colour, many spellings

A colour on a screen is three numbers, the amount of red, green and blue light, and every format here is a different way of writing those numbers. HEX packs them into six hexadecimal digits, the form stylesheets and design tools have used longest. RGB writes them as decimals from 0 to 255. HSL and HWB describe the same colour by its hue angle and how light, saturated, whitened or blackened it is, which is easier to adjust by hand. All four describe exactly the same colours, the sRGB range that ordinary screens show, and convert back and forth without loss.

OKLCH and OKLAB

OKLCH is the newer way CSS lets you write colours: lightness, chroma and hue in a space built to match how people see, so that two colours with the same L look equally light, and changing the hue does not change the brightness. That is why the lighter-and-darker scale on this page is made in OKLCH: the hue stays true as the colour gets paler or deeper, which an HSL scale does not manage. OKLCH can also name colours brighter than sRGB can show; when you type one, the chroma is reduced until the colour fits the screen, and the page says so.

CMYK is an estimate

Print works by subtracting light with cyan, magenta, yellow and black inks, and no formula turns a screen colour into exact ink percentages: the result depends on the press, the paper and the colour profile. The CMYK shown here is the plain conversion most tools use, good for a starting point and for telling a printer roughly what you mean. For print-ready artwork, convert in the design application with the printer's profile, and check a proof.

Contrast

The contrast ratio follows the WCAG 2 formula, from 1:1 for identical colours to 21:1 for black on white. WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold) and for user interface parts such as borders and icons; level AAA asks for 7:1 for normal text. Type the colour the text will sit on under Against and the badges show which of those the pair meets.

What it does

• HEX, RGB, HSL, HWB, OKLCH, OKLAB, CMYK, legacy rgba and the CSS colour name
• Reads any of those forms, with or without #, commas or percentages, plus alpha
• Lighter and darker steps in OKLCH, click to load
• WCAG 2 contrast ratio against any colour, with AA and AAA badges and a live sample
• Main colours picked out of a photo or logo on your device
• Nearest named colour when there is no exact one
• No upload, no account, no sign-up

Questions

How do I convert HEX to RGB?

Type the HEX code, with or without the #, and read the rgb() line: each pair of hex digits is one channel in base 16, so #1d4ed8 is rgb(29 78 216). Press Copy beside it. Typing an rgb() value gives the HEX the same way.

Which colour forms can I type?

HEX in 3, 4, 6 or 8 digits; rgb() and rgba(); hsl() and hsla(); hwb(); oklch() and oklab(); cmyk() with or without percent signs; any of the 148 CSS colour names; or three plain numbers such as 29 78 216. Commas, slashes and spaces all work.

Is the CMYK exact?

No. There is no exact conversion from a screen colour to ink; the result depends on the press, paper and profile. The figures use the plain formula most tools share, good enough to describe a colour to a printer. Convert in your design software with the printer's profile for print-ready files.

What is OKLCH and why use it?

A newer CSS colour form, lightness, chroma and hue in a space that matches how people see. Colours with the same L look equally light, and the lightness scale here is built in it so shades keep their hue. Colours brighter than a screen can show are pulled into range, and the page says when that happened.

What contrast ratio do I need?

WCAG 2 level AA asks for at least 4.5:1 for normal text, 3:1 for large text (about 24 px, or 19 px bold) and for interface parts like icons and borders; level AAA asks for 7:1 for normal text. Type the background under Against and the badges show what the pair meets.

How does picking colours from a picture work?

The picture is shrunk and its pixels grouped by colour on your device; the biggest groups that are clearly different from each other are shown as chips, up to eight. Click a chip to load that colour. The picture is never uploaded.

Is the colour name exact?

The Name line shows the CSS name only when the colour matches it exactly. Otherwise it shows the nearest named colour, measured in OKLAB, so you have a word for it.

Is it free?

Yes, completely free, with no sign-up.

More

Privacy policy · Support · Changelog