ToolKit

03 / DEVELOPER

Color Converter

Translate any color between HEX, RGB, HSL and the modern OKLCH color space, with a live swatch preview.

  • HEX
  • RGB
  • HSL
  • OKLCH

How to use

  1. 1Paste a color in any supported notation — HEX (#RGB or #RRGGBB), rgb(), hsl(), or oklch().
  2. 2All four format cards update simultaneously, and the swatch shows the parsed color.
  3. 3Switch between modern and legacy CSS notations as needed.
  4. 4Copy any line to grab that representation.

Frequently asked questions

Why include OKLCH?

OKLCH is a perceptually uniform color space — equal numeric distances feel like equal visual distances. It's increasingly used for design systems and dark mode palettes.

Are out-of-gamut OKLCH values handled?

When converting to sRGB-only formats (HEX, RGB, HSL), values outside sRGB are clipped to the gamut. For accurate work, pair this tool with a real color-management pipeline.

What's the difference between rgb(91, 149, 232) and rgb(91 149 232)?

Both are valid CSS — one uses commas (legacy), one uses spaces (modern). We accept either and emit the modern syntax.

Is alpha (transparency) supported?

Yes — paste any of `#5b95e880`, `rgb(91 149 232 / 0.5)`, `hsl(214 75% 63% / 50%)`, etc.

Why does my OKLCH conversion take a moment on first use?

We load the precise conversion library only when needed, keeping the rest of the site small. Subsequent conversions are instant.

Related tools