OKLCH Color Mixer

Generate perceptually uniform colors using the modern OKLCH color space with Lightness, Chroma, and Hue controls.

OKLCH Mixer

Perceived brightness (0% = black, 100% = white)
Amount of color (0 = gray, 0.4 = vivid)
Color angle (0-360)
Supported in all modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+).

Palette suggestions

Hue variations

Why OKLCH?

OKLCH is perceptually uniform. Unlike HSL, changing Hue in OKLCH doesn't wildly change perceived lightness. It can also access bright, vivid colors (P3 gamut) that are impossible in sRGB.

Features

  • Perceptually Uniform: Adjusting one value (like Hue) doesn't unexpectedly change others (like Brightness).
  • Gamut Ready: Create vivid colors that exist outside standard sRGB space (on supported displays).
  • Modern CSS: Generates standard CSS oklch() syntax ready for modern web development.
  • Alpha Support: Includes transparency controls.

How to Use

  1. Set Lightness (L): Adjust how bright or dark the color is.
  2. Set Chroma (C): Adjust the intensity or purity of the color.
  3. Set Hue (H): Pick the color tone (red, blue, green, etc.).
  4. Copy: Click the copy button to get the CSS code.