Color Palette Generator: Harmony, Not Random Hues

A color palette generator that just spits out random hex codes is almost useless, and I want to say that plainly because it's the trap this exact category of tool falls into constantly. Random colors next to each other usually don't look intentional — they look like a screensaver. The whole point of this tool is that it doesn't generate randomly by default; it generates according to actual color-theory harmony rules, and the difference between those two approaches is most of what makes this tool worth building at all.

Harmony modes are just angles on a color wheel

Underneath the seven harmony modes — random, analogous, complementary, triadic, split-complementary, monochromatic, tetradic — is one shared idea: pick a base hue, then place the other colors at specific angular offsets around the hue wheel, with the exact offsets defining the mode. Complementary is a straight 180-degree pair. Triadic splits the wheel into three even 120-degree steps. Analogous keeps everything within a narrow band next to the base hue for something that reads as naturally cohesive rather than deliberately contrasting. None of this is novel color theory — it's the same relationships a design textbook would teach — the actual engineering work is just making sure the saturation and lightness values chosen alongside each hue don't accidentally undermine the harmony by putting one swatch at a wildly different brightness than the rest.

Locking a swatch was the feature that took the idea seriously

Regenerating a whole new palette from scratch every time is fine for browsing ideas, but it's frustrating the moment you actually like one color in a five-color set and want to keep exploring around it. The lock icon on each swatch exists specifically for that — pin the colors you've already decided you want, regenerate, and only the unlocked slots change. It sounds like a small addition, but it's the difference between a toy that spits out palettes and an actual working tool a designer would return to mid-project, refining one swatch at a time instead of gambling on a fresh full set every click.

Export formats mattered more than I expected going in

I almost shipped this with just a plain hex-code copy button, and I'm glad I didn't stop there. A designer wants a hex list. A frontend developer building the palette into a project wants CSS custom properties. Someone using Tailwind wants it shaped like a Tailwind config object, not a bare list of colors they'd have to hand-format themselves. Building four different copy formats off the same underlying palette data was a small amount of extra code compared to how much friction it removes for whoever's actually going to paste the result into a real project ten seconds later. A tool that generates something nobody can conveniently use isn't really finished, even if the generation part works perfectly.

Export PNG sits alongside all four copy formats for a simpler reason: not everyone pasting a palette somewhere is pasting it into code. A designer dropping a reference palette into a mood board or a slide deck wants an actual image, not a CSS variable block they'd have to render themselves just to look at it. Adding an image export to what's otherwise a purely data-driven tool felt like scope creep the first time I considered it, until I thought about who's actually likely to reach for this and realized "people who want to see it, not just use it in code" is a large and completely reasonable chunk of that audience.

The stepper for changing how many colors are in a palette mattered more than I expected too. Every harmony mode's angle math has to keep working for whatever count someone picks, not just a fixed default, which meant none of the calculations could assume a specific number of swatches going in. Building it parameterized from the start cost a little more than hard-coding a default count and calling it done, and it's the reason someone wanting a simple two-color pairing gets the same quality of result as the default set, instead of a worse-supported edge case nobody bothered to test.

Generating with the keyboard, not just a button

Pressing Space regenerates the palette, without needing to move the mouse back to a Generate button first. That's a small thing but it changes the actual usage pattern — someone exploring options wants to hit generate rapidly, over and over, looking for something that clicks, and forcing a mouse trip back to a fixed button location on every single attempt adds friction that adds up fast over dozens of regenerations. Keyboard shortcuts on a tool like this aren't about power users, they're about not punishing the exact behavior — rapid, repeated regeneration — that the tool is actually designed around.

I thought about extending that further, keyboard shortcuts for switching harmony modes or adjusting the color count, and held off. Space-to- regenerate solves the actual friction I noticed myself hitting; adding five more shortcuts nobody's asked for yet is guessing at a problem that might not exist. It's easier to add a shortcut later once a real pattern shows up than to maintain a pile of them nobody uses.

Where the harmony math still gets a little fuzzy

Tetradic is the one I'm least confident about. Four colors spaced evenly around the wheel is easy to describe and much harder to make consistently look intentional rather than chaotic, because four simultaneous hues leave a lot more room for one of them to clash than a two- or three-color scheme does. I've tuned the saturation and lightness defaults specifically to make tetradic results less harsh than a naive even-spacing would produce, but it's the mode where I most often regenerate a few times before landing on something I'd actually use, which tells me the underlying balancing still has room to improve.

There's also no contrast checking anywhere in this tool yet, which is a real gap for something explicitly aimed at people building UIs. A palette can be harmonious by color-theory standards and still produce a swatch pairing that fails basic text-legibility contrast if someone uses two adjacent generated colors as a foreground and background. That's a genuinely different concern from hue harmony — one is about how colors relate to each other visually, the other is about whether text is actually readable on top of them — and I didn't want to bolt on a half-considered contrast warning just to say the feature exists. It's on the list, done properly, once I have time to do it properly.