Tool Hub

OKLCH Colour Picker

OKLCH ↔ sRGB/HEX slider conversion

oklch: oklch(70.0% 0.150 240)

hex: #26a9f1

rgb: rgb(38, 169, 241)

CSS
color: oklch(70.0% 0.150 240);

Conversion via OKLab → linear sRGB → sRGB. Out-of-gamut values are clamped.

How to use

  1. Drag the L (lightness), C (chroma), and H (hue) sliders to build a colour.
  2. Alternatively paste an existing oklch(), hex, or rgb value into the reverse input to import a colour.
  3. Read the live swatch and the generated oklch(), hex, and rgb values below the sliders.
  4. Copy the ready-to-use CSS snippet colour: oklch(...) from the output section.
  5. Share the current colour via the copy-link button.

Examples

  • Setting L=0.65, C=0.18, H=250 produces a mid-blue; the tool shows oklch(0.65 0.18 250), its hex #4b78d4, and the equivalent rgb().
  • Pasting #ff6600 into the reverse input fills the sliders with the corresponding OKLCH coordinates.

Verify outputs before using in production. No warranty — see Terms.