Color Palette Generators

Fewer than most palettes do. A neutral ramp of eight to twelve steps, one accent with three or four states, and three semantic colors covers the large majority of interfaces. Additional accents should earn their place by carrying a distinct meaning — if two colors mean the same thing, one of them is decoration.

A shade is the color mixed toward black, a tint is mixed toward white, and a tone is mixed toward gray. The distinction matters because the three do different things to chroma: tints and shades both reduce it as they approach the endpoints, while tones reduce it directly at roughly constant lightness. Mixing in OKLab rather than sRGB keeps all three from passing through a muddy midpoint.

Two tests catch most problems. First, run every foreground and background pairing you actually intend to use through a contrast grid. Second, convert the whole palette to grayscale — if two members collapse to the same value, they were distinguished only by hue, and for roughly one in twelve men they were never distinguished at all.

Colors that share something and differ in one dimension. Analogous sets share hue and vary lightness; monochromatic sets share hue and chroma direction; complementary pairs share nothing but sit at a predictable distance. The reliable move is to pick the relationship deliberately rather than sampling until something looks right, because the second approach does not survive being extended to a new component six months later.