Exact anchor
The rendered six-digit sRGB fallback is placed at the nearest target lightness and remains unchanged.
Back to the color catalog
Perceptual UI scale
Turn one color into a working system.
Enter HEX, RGB, HSL, HWB, OKLCH, or a CSS color name. Hexees keeps your source color as the nearest anchor and builds the surrounding 50–950 steps in OKLCH.
01 / 11 measured steps
A scale you can inspect, not just admire.
Every row exposes its rendered sRGB value, OKLCH recipe, and black or white text ratio. The source fallback is preserved rather than silently replaced.
02 / Interface specimen
See the system do a job.
The preview assigns the generated steps to a canvas, surface, border, text, muted content, and one action. It is a starting composition, not an accessibility guarantee.
COLOR SYSTEM / #663399
Color with a clear hierarchy.
A useful scale separates structure from emphasis before decoration enters the interface.
Review system03 / CSS
Copy all eleven CSS tokens.
The export uses stable 50–950 names and six-digit sRGB fallbacks for broad browser compatibility.
:root {
--color-brand-50: #F9F1FF;
--color-brand-100: #EFE0FF;
--color-brand-200: #DDC3FF;
--color-brand-300: #C19DF1;
--color-brand-400: #A579DB;
--color-brand-500: #8957C0;
--color-brand-600: #663399;
--color-brand-700: #552283;
--color-brand-800: #3D0D65;
--color-brand-900: #270045;
--color-brand-950: #120026;
}04 / Method and limits
Measured, deterministic, and honest about gamut.
OKLCH spacing
Target lightness steps share the anchor hue and scale chroma with a lightness envelope. Out-of-sRGB results use the repository’s CSS Color 4 gamut mapping and are marked.
Pair checks, not compliance
Black and white ratios are calculated for each rendered fallback. Final components still need text, non-text, state, and focus-indicator testing.