Color palettes
Quick palettes three ways — random, from a color, or extracted from an image — and, in its own tab, VersaScale: the in-house scale engine that emits full nine-tone 100–900 scales, the structure real interfaces need. Every swatch copies its hex, and palettes export as a hex list or CSS variables.
Quick flat palettes: one swatch per hue, same saturation and lightness. Click a padlock to keep that color across Generate. For full 100–900 scales use the VersaScale tab.
Classic harmony swatches around your color — every press remixes the lightness mix while your base color stays first. Hex (3, 6 or 8 digits) or a CSS color name. Material tonal is deterministic: same seed, same official tones.
Extracts the dominant colors with median cut — 100% in your browser.
Full 100–900 scales with your color at tone 500, 60-30-10 roles and an optional WCAG pass that keeps text readable on the scale's own light and dark backgrounds. Leave the base color empty to generate from the seed instead. How it works, below.
VersaScale
Most palette generators hand you five loose swatches; you cannot build an interface out of five hex codes. VersaScale is VersatilBox's own generation engine, and it does something more specific: for every hue it emits a full nine-tone scale — 100 to 900 — with your color anchored at tone 500, in the 100–900 structure that design systems like Tailwind popularized. It lives in its own tab, deliberately separated from the quick flat-palette modes. Every step below is exactly what it does; the constants are printed from the engine itself.
1 — Seed normalization
Your color is converted to OKLCH with the W3C CSS Color 4 algorithm. OKLCH's L is perceptual, so midpoints taken in L are perceptually even — this replaces the classic "split the gaps by eye" advice with a measurable quantity.
2 — Hue plan (the harmony)
The chosen scheme adds hues at fixed wheel angles. Each hue gets its own full scale.
| Scheme | Wheel angles |
|---|---|
| Monochromatic | base |
| Analogous | −30° · base · +30° |
| Complementary | base · +180° |
| Split complementary | base · +150° · +210° |
| Triadic | base · +120° · +240° |
| Square | base · +90° · +180° · +270° |
3 — The nine-tone scale (100–900)
Tone 500 of the first scale is your color, unmodified. Lightness anchors are fixed at OKLCH L = 0.96 (tone 100, tint-grade) and L = 0.25 (tone 900, text-grade); seeds outside L 0.31–0.9 get pulled-in anchors so the scale stays ordered (the tool warns you). Intermediate tones are perceptual midpoints in OKLCH L, filled in the Refactoring UI order (700, then 300, then 800, then 600, then 400, then 200). Chroma per tone is your seed's chroma times a taper factor — light tints wash out and very dark tones turn neon, so chroma peaks at 500 — and every tone is gamut-mapped to sRGB; at the 8-bit edges the tool verifies the measured lightness and sheds chroma until it lands within 0.02 of the target.
| Tone | Chroma factor | Tone | Chroma factor |
|---|---|---|---|
| 100 | ×0.35 | 500 | ×1 |
| 200 | ×0.55 | 600 | ×0.98 |
| 300 | ×0.75 | 700 | ×0.94 |
| 400 | ×0.9 | 800 | ×0.88 |
4 — Accessibility pass (optional)
With AA or AAA selected, the system guarantees what real interfaces need — the scale's own text pairs, the same guarantee Radix Colors builds into its text steps: tone 700 as text on tone 100 (light UIs) and tone 300 as text on tone 900 (dark UIs) must both reach 4.5:1 (AA) or 7:1 (AAA) on the WCAG 2.2 ratio. Tone 900 darkens (steps of 0.015in OKLCH L, floor 0.1) and tone 100 lightens (steps of0.005, ceiling 0.99); the intermediate tones follow through the midpoints, so both halves of the scale adjust. The pass is deterministic, and because the default anchors are already generous, AA rarely needs to move anything — AAA is the level that visibly tightens the dark and light halves.
5 — Roles (60-30-10)
Scales are labeled for composition: the first is dominant (60%), the second secondary (30%), the rest accent (10%) — the interior-design rule the industry uses to keep palettes balanced.
Seeded random (inside the system)
Leave the base color empty and VersaScale generates its own seed: your seed text is hashed with FNV-1a and fed to a mulberry32 PRNG, so the same seed text always reproduces the same palette. The PRNG picks the hue, base lightness (0.45–0.7) and chroma (0.1–0.25) — ranges chosen so tone 500 works as a button background. The other tabs (random, from a color, from an image) are quick flat palettes outside the system: classic wheel offsets for hues and, for images, the same median-cut extraction the image color picker uses — nothing leaves your browser.
The Material tonal scheme
One from-color option is not VersaScale: choosing Material tonal (M3) runs Google's official material-color-utilities (HCT color space, tones 100–10, Apache License 2.0) on your seed, so you get the exact palette Material You would produce. That library is the only third-party code in this tool, loaded on demand only when the scheme is selected.
Sources and honesty
The standard pieces — OKLCH and gamut mapping (W3C CSS Color 4), contrast ratio and thresholds (WCAG 2.2), the 100–900 scale structure (Refactoring UI), the harmony angles and 60-30-10 (Figma Resource Library) — come from the cited sources. The text-pair guarantee follows Radix Colors, whose text steps are "guaranteed to Lc 60 and Lc 90 APCA contrast on top of a step 2 background from the same scale", and the contrast-first workflow of Adobe's Leonardo, which generates swatches from target ratios. The concrete constants (anchors, chroma taper, random ranges) are VersatilBox design choices made to satisfy those sources' constraints; VersaScale is an opinionated tool, not a W3C standard. Looking forward: Radix measures its guarantee with APCA instead of the WCAG ratio — APCA could be added here as an alternative metric later. Any color can be verified against every notation with the color converter and checked for contrast with the contrast checker.