OKLCH Color Picker

Color picker guide

Pick and convert OKLCH colors

Choose colors with two perceptual, OKLab-based editing models: OKL_rCH for lightness, chroma, and hue, or OKHSV for familiar saturation and value controls. Copy the result as HEX, RGB, HSL, OKLCH, or raw component values. The picker supports alpha transparency and creates sRGB fallbacks for out-of-gamut colors. Color processing happens locally in your browser.

How to use the color picker

1. Choose OKL_rCH for direct control over perceptual lightness, chroma, and hue, or OKHSV for familiar hue-saturation-value controls that stay within sRGB.
2. Select a color with the two-dimensional picker and sliders, or enter exact component values.
3. Compare Previous Color, which keeps the color you started with, against New Color, which shows your current edits.
4. Choose an output format and include an alpha value when needed.
5. Click Copy to clipboard or press C to copy the result.

Input and output formats

The format menu controls how New Color is parsed and how the current color is copied. Switching formats changes its text representation, not the color or its OKL_rCH or OKHSV editing controls.

How OKLab, OKLCH, and OKHSV relate

OKLab models perceived lightness, chroma, and hue more closely than RGB-derived HSV, reducing unexpected shifts in apparent lightness while editing. It uses a lightness axis (L) and two opponent-color axes (a and b). Björn Ottosson derived the model in A perceptual color space for image processing.

OKLCH describes the same OKLab colors with cylindrical coordinates. L remains lightness, C is the distance from the neutral axis, and H is its angle. This makes chroma and hue direct controls; converting between OKLab and OKLCH changes only the coordinates. The tradeoff is an irregular sRGB boundary: some combinations of lightness, chroma, and hue fall outside it.

OKHSV remaps that boundary into an HSV-like cylinder, keeping every control combination in sRGB and maximum saturation at the edge. The familiar shape sacrifices some perceptual uniformity, but hue tracks perception better than in regular HSV. OKHSV is an editing model, not a CSS format. Ottosson derived it alongside OKHSL in Two new color spaces for color picking.

Why does the picker use OKL_rCH?

OKLab has no reference white, making it scale independent across dynamic ranges but less accurate for a fixed-range color picker. OKL_rCH instead uses the L_r estimate proposed by OKLab's author, which follows CIELab lightness more closely and improves control over dark colors without changing chroma or hue.

OKL_rCH is only an editing model. Before output, the picker converts L_r back to standard OKLCH lightness, so CSS oklch() values remain standard. Switching to OKHSV changes the controls, not the output format.

Gamut-aware sRGB fallbacks

OKLCH can describe colors that the picker's sRGB preview and output cannot represent. Clamping red, green, and blue separately can cause large hue shifts, so the picker instead keeps hue fixed and reduces chroma only to the sRGB boundary. This follows the OKLab gamut-clipping method described by Ottosson. Colors changed this way are marked fallback.

Because the renderer and gamut mapping assume sRGB, the picker does not account for wider display gamuts such as Display P3 or Adobe RGB. On these displays, the preview may appear more vivid than intended.

Designed for precise color workflows

Enter exact values or use arrow keys and Vim-style movement for repeatable adjustments; hold Shift for larger steps. Number shortcuts focus pickers and sliders, while C copies the color. Hardware acceleration keeps the high-resolution controls responsive.

OKLCH Color Picker is also available as a native command-line application for conversions in scripts and terminal workflows.

It also powers the OKLCH Color Picker plugin for Neovim, so colors can be selected without leaving the editor.

Frequently asked questions