Color Converter – HEX, RGB, HSL, OKLCH, Lab and CMYK

Color formats compared

HEX	RGB	HSL	OKLCH
`#ff6600`	`rgb(255 102 0)`	`hsl(24 100% 50%)`	`oklch(69.58% 0.2043 43.49)`
`#3b82f6`	`rgb(59 130 246)`	`hsl(217.2 91.2% 59.8%)`	`oklch(62.31% 0.188 259.81)`
`#10b981`	`rgb(16 185 129)`	`hsl(160.1 84.1% 39.4%)`	`oklch(69.59% 0.1491 162.48)`
`#64748b`	`rgb(100 116 139)`	`hsl(215.4 16.3% 46.9%)`	`oklch(55.44% 0.0407 257.42)`

HEX is compact and universal. Use it for design handoff and older tools.
RGB maps directly to screen channels. Modern CSS writes it with spaces and a slash for alpha: rgb(255 102 0 / 50%). The comma form rgba(255, 102, 0, 0.5) still works everywhere.
HSL is easy to tweak by hand (rotate the hue, lower the saturation), but its lightness is not perceptual.
OKLCH is the best choice for design systems: equal lightness looks equally light, and changing chroma doesn’t shift the hue. It can also express colors beyond sRGB.
Lab and LCH are the older CIE perceptual spaces. They are used in print and photo software. Blues drift toward purple in LCH, which OKLCH fixes.

Using modern color syntax in CSS

CSS

:root {
  --brand: oklch(62% 0.19 260);
  /* Lighter and darker variants keep the same hue */
  --brand-hover: oklch(from var(--brand) calc(l - 0.08) c h);
  --brand-muted: oklch(from var(--brand) l calc(c * 0.4) h);
}

.button {
  background: var(--brand);
  /* Fallback for very old browsers goes first */
  border-color: #3b82f6;
  border-color: color-mix(in oklch, var(--brand), black 20%);
}

Relative color syntax (oklch(from …)) and color-mix() are supported in all current browsers. Converting colors in JavaScript? culori and Color.js implement the same CSS Color 4 math as this tool:

JavaScript (culori)

import { formatHex, oklch, parse } from 'culori';

oklch('#3b82f6');            // { mode: 'oklch', l: 0.623, c: 0.188, h: 259.8 }
formatHex(parse('hsl(24 100% 50%)'));  // '#ff6600'

Picking text colors for these backgrounds? Use the contrast checker to test them against WCAG AA and AAA.

Frequently asked questions

How do I convert HEX to RGB?

Split the six hex digits into three pairs and convert each pair from base 16 to decimal: #ff6600 is ff, 66, 00, which is 255, 102, 0, so rgb(255 102 0). Three-digit hex doubles each digit first: #f60 is #ff6600. An optional fourth pair (or fourth digit) is the alpha channel.

What is OKLCH and why use it?

OKLCH describes a color by lightness (L, 0–100%), chroma (C, roughly 0–0.4) and hue (H, 0–360°). Unlike HSL, its lightness matches what people perceive: blue and yellow at the same L look equally bright. That makes it reliable for generating palettes, hover states and accessible color pairs. All current browsers support oklch() in CSS, and Tailwind CSS 4 defines its palette in OKLCH.

Why is HSL lightness misleading?

HSL is a simple transformation of RGB, not a model of perception. hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) have the same 50% lightness, but yellow is far brighter: its contrast against white is 1.07:1, blue’s is 8.59:1. Use OKLCH or Lab when lightness has to mean something.

What does “out of sRGB gamut” mean?

OKLCH, Lab and LCH can describe colors more saturated than a standard sRGB screen can show. Wide-gamut displays (most recent phones and Macs, Display P3) show more of them. When you enter such a color, the converter shows the nearest sRGB color in the other formats and warns you. In CSS, the browser does the same mapping automatically.

Is the CMYK value accurate for print?

It is the simple formula conversion, useful as a starting point. Real print colors depend on the printer, ink and paper, and are converted with an ICC color profile such as FOGRA39 or GRACoL. Ask your printer for their profile if exact color matters.

Tints and shades (OKLCH, 50–950)

Color formats compared

Using modern color syntax in CSS

Frequently asked questions