Most palette tools start from an image. Upload a screenshot, get the dominant colors extracted. That works when you already have a reference. It doesn’t help when you’re starting from zero and need a palette that actually holds together across light and dark contexts, big and small text, interactive and static elements.
The color palette generator at nikl.one/apps/color-palette starts from color theory instead. Pick a harmony mode, adjust base saturation and lightness, lock the swatches you like, regenerate the rest. When you’re done, export as :root CSS custom properties — one click, no fuss.
The harmony modes determine how hues are spread across the five swatches:
- Analogous — 30° steps. Colors that sit next to each other on the wheel. Cohesive, low-tension. Good for product UIs that should feel calm.
- Complementary — base + 180° with tight variations. High contrast between the poles, gentle on the middle swatches. Works when you need a hero color and a foil.
- Triadic — 120° intervals. Three dominant hues, balanced, with smaller fills between them. More dynamic than analogous without the bluntness of complementary.
- Split — splits the complement into two flanking hues at 150° and 210°. Softer than direct complementary, more interesting than analogous.
- Tetradic — four anchors at 90° intervals, plus a fifth between them. Maximum range. Requires discipline to use without chaos.
Each swatch also gets a small independent saturation and lightness nudge from a fixed delta table — the five swatches aren’t clones at different hues, they have slightly different vibrancy. It prevents the “same color, different shirt” problem where every swatch feels like a variation of one decision instead of a considered set.
Lock is the useful part. When you hit generate and something comes out that’s mostly wrong but swatch three is exactly right, lock it. The regeneration leaves locked swatches untouched and rebuilds the rest around them. The math still applies — you’re not overriding anything, just freezing one input.
Space bar generates. No button hunt. Click a swatch to copy its hex. Export CSS copies:
:root {
--palette-1: #2A4FCC;
--palette-2: #3B7AE0;
--palette-3: #6B3CCC;
--palette-4: #8A5AE0;
--palette-5: #2F7AE0;
}Paste directly into your token file and rename. The variable names are intentionally generic — the tool doesn’t know what role each color plays in your system.
What the tool doesn’t do: it doesn’t extract from images, doesn’t check contrast ratios against WCAG thresholds, doesn’t simulate color blindness. Those are real requirements for accessibility work. This tool is scoped to the earlier problem — generating a starting palette that has internal logic — not the validation work that follows.
The keyword I was targeting: color palette generator for developers. The angle: mathematically coherent palettes, instant CSS export, no account. The image-extraction tools have that space covered. This one is for when you’re starting from nothing.