tooloora

Color Converter: HEX, RGB, HSL, OKLCH

Paste any colour in any notation and get every other format at once, plus harmonies, tints and shades. Runs entirely in your browser.

Runs locally — nothing is uploaded

HEX, RGB, HSL, HSV, OKLCH or a CSS colour name. Spacing and capitalisation do not matter.

#4f46e5

Every format at once

  • HEX#4f46e5
  • RGBrgb(79, 70, 229)
  • HSLhsl(243, 75.4%, 58.6%)
  • HSVhsv(243, 69.4%, 89.8%)
  • OKLCHoklch(51.06% 0.2301 276.97)
  • CMYKcmyk(66%, 69%, 0%, 10%)
  • Nameslateblue (closest)

CMYK here is an approximation without a colour profile. For print, the value from your printer's profile wins.

Colour harmonies

Derived from the HSL colour wheel. Click a swatch to use that colour.

Complementary (+180 degrees)

Triad (+120 and +240 degrees)

Analogous (minus 30 and plus 30 degrees)

Tints and shades

Tints

Shades

Everything is calculated locally in your browser. No uploads, nothing stored.

Convert colour codes: every format at once

Enter a colour in any notation, be it HEX, RGB, HSL, HSV, OKLCH or a CSS name, and get all the other formats at the same time, each row copyable on its own. Plus complementary, triad and analogous colours and five tints and five shades. Everything is calculated in your browser; nothing is uploaded.

Which colour format for which job?

FormatTypical useStrength
HEXCSS, design files, ticketsshort, understood everywhere
RGB / RGBAcanvas, SVG, opacitythink directly in channels
HSLquick lightening in an editorhue and lightness separated
HSV / HSBcolour pickers in graphics appsmatches the feel of the sliders
OKLCHdesign systems, colour scalesperceptually even steps
CMYKpre-alignment with your printerapproximation for print

The 148 CSS colour names are convenient but coarse. The converter therefore shows the exact name when one exists and the closest one otherwise, measured in OKLab, because a plain RGB distance does not match what the eye considers similar.

What is OKLCH and why bother?

OKLCH is the polar form of OKLab, a colour space published by Björn Ottosson in 2020 (bottosson.github.io/posts/oklab). Its promise: equal numeric steps look equally large. HSL cannot do that: hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) carry the same lightness number yet look nothing alike in brightness.

In practice that means a 50-to-900 scale built on OKLCH lightness looks even in every hue. In HSL you have to hand-tune each hue.

oklch() is part of CSS Color Module Level 4. According to MDN's browser compatibility data the function has been usable in every major engine since May 2023: Safari 15.4 shipped it in 2022, Chrome 111 and Firefox 113 followed in 2023 (MDN: oklch()).

How are the harmonies built?

From the HSL colour wheel: complementary rotates the hue by 180 degrees, the triad by 120 and 240 degrees, analogous by minus and plus 30 degrees. Saturation and lightness stay untouched. That is classic colour theory and a solid starting point, not a replacement for a human eye.

What are tints and shades for?

They turn one brand colour into a whole palette: lighter tones for surfaces and hover states, darker ones for text and borders. The mix runs linearly towards white or black in five even steps. Clicking a swatch loads that colour into the input field, so you immediately see every format for it.

Where are the limits?

  • CMYK is an approximation. The simple formula knows neither paper nor colour profile. For real print output, your printer's ICC profile is what counts.
  • OKLCH can describe more colours than an sRGB screen shows. If your input sits outside the gamut, the tool clips it to the closest displayable colour and tells you.
  • The eyedropper depends on the browser. The EyeDropper API exists in Chromium-based browsers; in Firefox and Safari we hide the button rather than show a dead control.
  • Semi-transparent colours are emitted as eight-digit HEX. How they actually look depends on what is behind them.

Are my colours readable too?

Pretty is not automatically legible. To find out whether a text-and-background pair meets the WCAG requirements, use the contrast checker. It shows the ratio, the AA/AAA verdict and the closest colour that passes.

Frequently asked questions

Which colour notations does the converter understand?

HEX in three, four, six and eight digits (with or without the hash), rgb() and rgba(), hsl() and hsla(), hsv()/hsb(), oklch(), all 148 CSS colour names, the keyword transparent, and bare number triples such as 255, 136, 0. Both the comma syntax and the modern space syntax with a slash for alpha work, and values out of range are clamped the way a browser would.

Is my colour or any input sent to a server?

No. Every conversion runs as JavaScript inside your browser tab. There is no upload, no API call, no logging and no storage. You can disconnect from the network and the tool keeps working. The eyedropper is a browser API too: the sampled pixel never leaves your device.

Why should I care about OKLCH?

OKLCH is a perceptually uniform colour space: equal steps in lightness or hue look equally large to the eye, which HSL does not manage. HSL yellow at 50% lightness is far brighter than HSL blue at 50%. That makes OKLCH much better for building colour scales and for shifting a brand colour without it changing character. It is part of CSS Color Module Level 4 and works in every current browser.

How exact is the CMYK output?

It is an approximation. Real CMYK depends on paper, ink and an ICC profile, and the naive formula used here knows none of that. Use it as a starting point for a conversation with your printer, never as a print-ready specification.

What happens with colours outside sRGB?

OKLCH can describe colours that a normal sRGB screen cannot show. When you enter such a value the tool clips it to the closest displayable colour and says so. The HEX and RGB output is then an approximation, not the colour you asked for.

Why is the screen eyedropper missing in my browser?

The EyeDropper API is available in Chromium-based browsers (Chrome, Edge, Opera). Firefox and Safari do not implement it, so the button is hidden there instead of showing a control that would do nothing. Everything else works the same.

Related tools

Contrast Checker: WCAG AA & AAAWCAG contrast ratio with AA/AAA verdicts for normal text, large text and UI components.Image Tools — compress, resize, crop & more, all localCompress, resize, crop, round-crop & remove EXIF — 100% in your browser, no upload.QR Code Generator — custom design, logo & branding, PNG + SVGCreate custom QR codes with shapes, gradients, a logo and branding text. PNG & SVG.