Most palette tools stop at five pretty swatches. Huely treats those five colors as the input: it expands them into the tonal ramps a design system actually consumes, grades every pair against WCAG contrast, applies them to a real interface, and shows what they look like to someone with color vision deficiency — before you commit them to a codebase. Every calculation runs in your browser. No account, and your colors are never uploaded — see privacy for the one thing that does leave the page.
Twelve schemes — analogous, complementary, split complementary, triadic, tetradic, monochrome, shades, pastel, earthy, neon, random and auto. Lock any swatch and it survives regeneration, anchoring the hue of everything generated around it.
Every color expands into a full lightness ramp, built in OKLCH so the steps are perceptually even. Each step is marked with whether it carries body text safely on light or dark backgrounds, and the step matching your original color is outlined.
Every pair is graded AAA, AA, AA Large or Fail, alongside four checks that decide real interfaces: body text on background, body text on surface, primary on background, accent on background. Failing checks get a one-click fix that moves lightness only, holding hue and chroma, and stops at the smallest change that passes.
The palette applied to an ordinary dashboard. Roles — background, surface, primary, accent, text — are inferred from lightness and chroma, and any of them can be reassigned to see the consequences immediately.
The palette as seen with deuteranopia, protanopia, tritanopia and achromatopsia, using the Machado, Oliveira & Fernandes matrices applied in linear RGB, with automatic warnings for pairs that become indistinguishable.
HEX, CSS custom properties, SCSS, Tailwind config, JSON, SVG and PNG. Toggle between base colors and full ramps, so a five-color palette exports as 55 named tokens. Palettes live in the URL, so any palette is shareable as a plain link.
Yes, it is free, and there is no account. The tool runs entirely in your browser — nothing about your palette is sent to a server.
WCAG 2.2 level AA asks for 4.5:1 for body text and 3:1 for large text (from 24px, or 18.66px bold). Level AAA raises those to 7:1 and 4.5:1. Huely grades every pair in your palette against all four thresholds.
A five-color palette cannot express an interface on its own: you need hover states, borders, disabled text and surfaces. A tonal scale expands one color into steps from 50 (lightest) to 950 (darkest) so those states come from the same hue family instead of being improvised.
HSL lightness is not perceptual, so a ramp built in it bunches up around yellows and blues and looks uneven. OKLCH spaces steps by perceived lightness. Colors that fall outside sRGB are gamut-mapped by reducing chroma while holding hue, because clamping shifts hue and drifts a ramp out of its own family at the saturated end.
Yes — Tailwind config, CSS custom properties, SCSS variables, JSON, plain HEX, plus SVG and PNG images of the palette. Exports cover either the base colors or the complete 50–950 ramps.
In your browser's local storage, on the device you saved them from. They are not uploaded, which also means they are per-browser and are lost if you clear site data. To move a palette between devices, copy its share link — the palette is encoded in the URL itself.