Huely/Palettes
Eighteen five-color palettes for interface, brand and editorial work. Each one states how many of its ten color pairs clear WCAG AA for body text and how many pairs collapse under color vision deficiency — measured with the same code as the rest of this site, not asserted. Open any of them in the builder to get tonal ramps and design tokens.
"n of 10 pairs clear AA" — five colors make ten unordered pairs, and this counts how many of them reach 4.5:1, the WCAG 2.2 AA threshold for body text. A higher number means more freedom: you can put more of these colors on top of each other without a second thought.
A count of 4 or 5 is normal and healthy for a five-color palette — most palettes contain colors of deliberately similar lightness, and those pairs are never meant to carry text. What matters is which pairs pass, which is what the builder shows as a grid.
Color-blind collisions counts pairs that are clearly distinguishable in normal vision but merge under deuteranopia, protanopia, tritanopia or achromatopsia. Zero is the goal. One or two is workable as long as those two colors never carry meaning on their own — see the simulator for which pairs they are.
Five colors are a starting point, not a system. Real interfaces need hover states, borders, disabled text, dividers and surfaces, and improvising those per component is how a codebase ends up with forty near-identical greys.
Open any palette above in the builder and each color expands into a 50–950 tonal ramp, built in OKLCH so the steps are perceptually even. A five-color palette becomes 55 named tokens, exportable as CSS custom properties, SCSS, a Tailwind config or JSON.
Yes. Color values are not copyrightable, and these are offered for any use, commercial included, with no attribution required.
By running each palette through the same functions that power the tools on this site: WCAG 2.x relative-luminance contrast for the pair counts, and the Machado, Oliveira and Fernandes matrices applied in linear RGB for the color vision simulation. They are measurements, not editorial judgements.
Five is the smallest set that covers the roles a page needs — background, surface, primary, accent and text — without forcing one color to do two jobs. You can add or remove colors once a palette is open in the builder.
That is what the "Open in builder" link does. The palette loads into the workspace where you can lock the colors you want to keep, regenerate the rest, and repair any pair that fails contrast.
Start with Signal Blue for a light interface or Midnight Dashboard for a dark one. Both keep their neutrals and their accent well separated in lightness, which is the property that makes dense screens readable.