Color Palette Generator

What is this tool?

A free color palette generator built on actual color theory. Pick a harmony — complementary, analogous, triadic, split-complementary or monochrome — choose a base color, and it derives a balanced five-color palette in HSL space. Lock the swatches you want to keep, regenerate the rest until it clicks, then export the result as CSS custom properties, a Tailwind v4 @theme block, SCSS variables or JSON. Palettes you save are kept in your browser's local storage.

All of the color math runs in your browser — no uploads, no accounts. The one exception is the optional AI assist —off by default — which is this tool's twist:

The AI twist

The AI is strictly opt-in: until you flip the AI assist switch in the tool, the generator is pure, traditional color theory and nothing you do here touches the network. Switch it on and you can type a mood, a scene or a brand vibe — "cozy autumn coffee shop", "cyberpunk night market", "calm fintech dashboard" — and a small language model turns it into a named five-color palette. The model is not a cloud API: it's a compact open-weights model (Qwen 2.5, 3B) running on this website's own server, the same one that playsThe Gatekeeper in the arcade. Your description is the only thing sent, it goes to my machine and no third party, and nothing about you is stored with it.

Because the hardware is a modest CPU, an answer takes a few seconds — and identical prompts are answered from a cache, so asking the same theme twice is instant. Want a different take on the same theme? Just ask again: the tool requests a fresh variation automatically. If it ever tells you the machine is busy, it means someone else's palette is mid-brushstroke — try again in a moment.

The five harmonies, explained

Every harmony is a rule for picking hues on the 360° color wheel. The generator applies the rule, then spreads lightness so the palette has usable dark and light tones:

Hex and HSL in one minute

A hex code like #7c8cff is just three numbers: red 7c, green 8c, blue ff, each 00–ff (0–255). That's how screens think, but it's a poor space for designing — "make it a bit lighter" is math on all three channels at once. HSL — hue (0–360° on the wheel), saturation (0–100%), lightness (0–100%) — matches how people reason about color, which is why every harmony here is computed in HSL and converted back to hex at the end.

Contrast and accessibility

The hex label on every swatch is automatically shown in black or white — whichever has the higher WCAG contrast ratio against that color. When you build with a palette, keep the same idea in mind: body text needs a contrast ratio of at least4.5:1 against its background (WCAG AA), large headlines at least 3:1. A five-color palette with one genuinely dark and one genuinely light color (the generator aims for this) almost always contains a passing text/background pair.

FAQ

Is it free? Yes — free, no sign-up, no limits worth mentioning (the AI has a gentle per-minute rate limit so one visitor can't hog the CPU).

Is anything uploaded? The harmony generator, exports and saved palettes are fully client-side. The AI assist — only if you've switched it on — sends exactly one thing — the theme text you typed — to this site's own server, where a local model answers it. No third-party AI service ever sees it.

Why five colors? It's the working size of most real design systems: a dark tone, a light tone, a dominant, and two accents. Need more? Export the palette and extend a color into a ramp with the Monochrome harmony.

Can I use the palettes commercially? Of course — colors can't be owned. The AI's palette names are generated too, so double-check before trademarking one.