Translating a brand hex code into rgb() with alpha for a CSS overlay. Converting between HSL and OKLCH while migrating a design system to perceptual color. Reading a pasted rgb(52, 152, 219) from a screenshot tool back into a hex code for your stylesheet. Sanity-checking an OKLCH chroma value (anything above ~0.4 is likely outside the sRGB gamut).

OKLCH lightness uses 0–1, not 0–100. CSS accepts both ( 0.65 or 65% ); this tool accepts either form. Some OKLCH values fall outside sRGB (e.g. high chroma for blue). The tool clamps to displayable sRGB on conversion — the result is approximate, not exact. HSL is not the same as HSV. HSV's "value" is the brightest channel; HSL's "lightness" is the midpoint of the brightest and darkest. They give different numbers for the same colour. Round-tripping isn't always lossless. hex → hsl → hex can shift a single integer due to rounding. For exact reproduction, store hex. Hex and RGB are sRGB by default, not Display P3 or Rec. 2020. If your design tool is in a wide-gamut profile, the same hex looks different.

Convertisseur de Couleur

Convertissez toute couleur entre hex, RGB, HSL et OKLCH. Aperçu en direct, copier en un clic.

Hex

RGB

HSL

OKLCH

Picker

Résultat

What is this for?

Designers and front-end developers shuffle colors between formats constantly — Figma gives you hex, the design tokens spec wants OKLCH, your CSS uses HSL, and the image you grabbed is in RGB. This tool keeps every notation in sync: edit one, the others update live. Includes the modern oklch() format added in CSS Color Module 4 (and supported in all major browsers since 2023), which produces perceptually uniform colors that are far easier to reason about than HSL.

When to use it

Translating a brand hex code into rgb() with alpha for a CSS overlay.
Converting between HSL and OKLCH while migrating a design system to perceptual color.
Reading a pasted rgb(52, 152, 219) from a screenshot tool back into a hex code for your stylesheet.
Sanity-checking an OKLCH chroma value (anything above ~0.4 is likely outside the sRGB gamut).

Format quick reference

Hex — #RRGGBB (or 3-digit shorthand #RGB). Universal, no alpha unless 8-digit (#RRGGBBAA).
RGB — rgb(0–255, 0–255, 0–255). The actual sRGB channel values your screen receives.
HSL — hue (0–360°), saturation (0–100%), lightness (0–100%). Easy to reason about colour families, but lightness is non-perceptual: HSL 50% green looks brighter than HSL 50% blue.
OKLCH — perceptual lightness (0–1), chroma (0–~0.4 in sRGB), hue (0–360°). Two colours with the same L look equally bright; ideal for design systems and accessibility.

Common gotchas

OKLCH lightness uses 0–1, not 0–100. CSS accepts both (0.65 or 65%); this tool accepts either form.
Some OKLCH values fall outside sRGB (e.g. high chroma for blue). The tool clamps to displayable sRGB on conversion — the result is approximate, not exact.
HSL is not the same as HSV. HSV's "value" is the brightest channel; HSL's "lightness" is the midpoint of the brightest and darkest. They give different numbers for the same colour.
Round-tripping isn't always lossless. hex → hsl → hex can shift a single integer due to rounding. For exact reproduction, store hex.
Hex and RGB are sRGB by default, not Display P3 or Rec. 2020. If your design tool is in a wide-gamut profile, the same hex looks different.