OKLCH is perceptually uniform: equal numeric steps look like equal visual steps. It is the recommended colour space for design tokens and tonal palettes in modern CSS.

Why can an extreme scale stop have lower chroma?

Some OKLCH values fall outside sRGB. The scale reduces chroma at light and dark extremes before conversion instead of clipping channels and silently shifting the hue.

/color local tool

Suggest an improvement

Color Picker & Converter

Tune one color visually, copy modern CSS formats and build a perceptual token scale without leaving the browser.

Local execution receiptinput path disclosedTool content stays out of MonoTools URLs and API requests.

Working input: Browser memory
Cross-tool handoff: Session only · 10 min
URL payload: Never
Export: Explicit action

Verify it: open DevTools Network, clear the log, use the tool, then inspect fetch/XHR requests. Page assets and optional aggregate analytics may use the network; tool input is not included.

Full privacy model

Loading tool...

How to use

01Paste a CSS color, use the native picker or sample the screen when EyeDropper is available.
02Tune hue, saturation and lightness while every output updates instantly.
03Copy one format or export the full perceptual scale as CSS custom properties.

FAQ

Why include OKLCH?: OKLCH is perceptually uniform: equal numeric steps look like equal visual steps. It is the recommended colour space for design tokens and tonal palettes in modern CSS.
Why can an extreme scale stop have lower chroma?: Some OKLCH values fall outside sRGB. The scale reduces chroma at light and dark extremes before conversion instead of clipping channels and silently shifting the hue.

guides