How the color engine works
You pick one color - the service doesn’t stretch it across the whole interface, it builds 4 independent, ready-to-use palettes around it. Below is the logic behind how they’re assembled and what you can fine-tune by hand.
One color, four different palettes - not shades of one
The core idea of the service: the chosen color plays a different role in each of the 4 palettes, rather than simply becoming the accent at varying saturation. In one palette it’s the accent on a purely neutral gray base. In another - same role, but the base is lightly tinted with its hue, warmer and softer. In the third, it becomes a bold colored background itself, like on bold marketing landing pages. In the fourth - colored text instead of plain black, an editorial technique. In all four, your exact hex code is present without distortion - only the role it plays in the interface changes.
Color harmonies: what angle the companion is picked at
Two of the four palettes - the one where the color becomes the background, and the one where it becomes the text - need a second, matching color. Picking it isn’t random - it’s one of the classic principles from color theory, selectable from the menu above the palettes:
monochromatic— the same hue as the primary color, no shiftanalogous— a neighbor on the color wheel, a safe, related combinationcomplementary— the color directly opposite on the wheel, maximum contrastsplit-complementary— a neighbor of the complementary color, contrasty but softertriadic— a vertex of an equilateral triangle on the wheeltetradic— rarer, but also a balanced scheme
Why OKLCH instead of HEX or HSL
Plain HSL lies about brightness: yellow and blue at the same lightness value look visibly different. Because of this, a rule like “make it 15% darker” looks great on some colors and muddy on others. OKLCH is built so that lightness is perceived the same way by the eye regardless of hue, so the same formula works predictably on any chosen color - both in the archetypes and in the suggestions.
Guaranteed text contrast
Wherever the chosen color becomes the background, the text isn’t picked blindly: the service calculates which color - light or dark - gives enough contrast against that specific background, and uses it. It’s the same principle behind WCAG contrast checking.
Light and dark theme - a separate toggle
The theme isn’t derived from the lightness of the chosen color: a dark primary color doesn’t have to drag the interface into dark mode. A separate toggle handles that - it flips the lightness direction of the background and text without touching the color itself or the chosen archetype.
Manual edits and "locking"
Every role - background, accent, text - can be adjusted with its own picker. As soon as you touch a role by hand, it gets marked with a dot and stops being recalculated automatically when the primary color or theme changes: only what you haven’t touched keeps updating.
Suggestions around a color
While editing any role, three variants of the same color appear under the panel - darker, as-is, and lighter. Only lightness changes; the hue stays the same, so the suggested variants never pull the palette into a different mood.