OKLCH Gamut Checker

What Is an OKLCH Gamut Checker?

An OKLCH gamut checker tells you whether a color defined in the OKLCH color space can actually be displayed on a given screen. OKLCH — part of the CSS Color Module Level 4 specification — lets you define colors using perceptually uniform Lightness, Chroma, and Hue values. The problem is that high-chroma OKLCH colors often fall outside the sRGB or even Display-P3 gamut, meaning browsers silently clip them. This tool catches those issues before they reach production and gives you full control over how oklch() values translate to displayable colors.

How to Use This OKLCH Gamut Checker

1. Enter a color — paste a HEX, RGB, oklch(), or oklab() value, or use the color picker.
2. Pick a target gamut — choose sRGB for broad compatibility, Display-P3 for modern wide-gamut screens, or Rec.2020 for HDR workflows.
3. Read the result — the badge shows whether your color is in or out of gamut, and the polar map visualizes chroma limits at the current lightness.
4. Snap if needed — enable gamut snapping and select Clip, Reduce Chroma, or Minimal ΔE00 to bring the color back into range with the smallest perceptual shift.
5. Export — copy CSS variables or download JSON tokens for your design system.

Why Check Color Gamut Before Shipping?

When a browser encounters an out-of-gamut color, it performs its own oklch color gamut mapping — typically by clipping channel values. That silent clipping can shift hue, flatten saturation, or darken a shade in ways you did not intend. Checking gamut ahead of time lets you control the trade-off: you decide whether to reduce chroma, adjust lightness, or accept a minimal ΔE00 compromise, rather than leaving it to the browser's default algorithm.

This matters most when building design-system tokens. A brand blue that looks vivid on a P3 MacBook may render as a duller shade on an sRGB monitor. By running both the sRGB and P3 versions through this checker, you can ship a safe fallback alongside a wide-gamut enhancement using CSS @supports. If you need to verify contrast after snapping, run the final pair through the WCAG contrast checker.

Snap Methods Explained

The tool offers three ways to fix an out-of-gamut color. Clip Values hard-clamps each channel to the displayable range — fast, but it can shift hue noticeably. Reduce Chroma lowers saturation while keeping hue and lightness intact, which is ideal when brand hue must stay locked. Minimal ΔE00 searches for the perceptually closest in-gamut color using the CIEDE2000 formula and usually delivers the best visual match. The ΔE readout tells you exactly how far the snapped color drifts: values under 2 are barely noticeable.

CSS Fallback Pattern

After choosing a gamut-safe value, use an @supports block to serve OKLCH to capable browsers and an RGB fallback to the rest:

.button {
  background: rgb(50 115 220);          /* sRGB fallback */
}
@supports (color: oklch(0 0 0)) {
  .button { background: oklch(0.70 0.12 265); }
}

For broader palette work, expand your base color into a full 50–900 ramp with the Tailwind scale generator, convert between formats using the color converter, or compare candidate hues side by side in Compare Colors.