Perceptual OKLCH
All scales share the same L values unless you apply a manual correction. Oklab improves perceptual uniformity, but it does not guarantee identical appearance or identical WCAG contrast ratios.
Aligned contrast
Every level targets the same relative luminance Y by adjusting L. Ratios against white and black therefore remain close, with small differences caused by HEX rounding.
Manual corrections are suspended in this mode.
Hue and chroma
The base hue matches the displayed median shade exactly. With 10 shades, this is level 400; with an odd number, it is the single center value.
Two independent curves accelerate or delay the light-to-median and median-to-dark transitions without moving their three reference hues. Setting both curves to zero gives a linear progression on each side.
The chroma curve connects three points with smooth interpolation based on L. Out-of-gamut colors are mapped to sRGB by reducing chroma while preserving L and hue.
This is a conservative method specific to this tool, rather than the complete CSS gamut-mapping algorithm.
Overall saturation
This control proportionally reduces the target HSL saturation, then lowers chroma while preserving OKLCH lightness and hue. An additional check on the rounded HEX value ensures that its HSL saturation does not exceed the chosen cap.
At 100%, the original colors are preserved; at 0%, the output is neutral. Near white or black, HEX steps may require a neutral gray.
Contrast mode accounts for desaturation before the final check. Displayed contrast ratios are always recalculated from the final HEX values.
Text contrast
Ratios are calculated from the displayed HEX values and the selected background.
The AA marker uses 4.5:1 for normal text; 3:1 applies to large text under WCAG conditions.
A ratio alone does not certify an entire interface as accessible.
Levels
With 10 shades: 050, 100, 200…900. An 11th shade adds 950. Larger scales insert intermediate multiples of 50, up to 000–950 at 20 shades.
These labels are names rather than lightness values. You can edit them in chart settings.
Local
No calculation or color scale is sent to a server. Settings are kept in this browser’s local storage when available.
