Palette Generator

A tool that builds five-color palettes that actually go together, using real color-harmony rules instead of random picks. Each color shows whether text on it is readable, and you can export the whole set as code a developer can paste straight in.

The 43 assertions cover the color math and the shape of the exports, not the interface. There's no color-blindness preview, you can't start from your own brand color, and a palette can't be shared as a link.

Claude Code, about an hour and a half. I set the core: harmony rules, accessibility badges, and exports developers would actually use. Claude Code wrote the color engine and the test suite in one pass, using the same setup as #9 the day before. All the color math lives in one pure module, palette.js, imported by both the page and a 43-assertion verify.mjs.

The page lets you press Space to reroll, lock the colors you like so a reroll skips them, edit any swatch, and click to copy. Every swatch shows its HEX, RGB, and HSL values plus a live contrast rating. Exports come out as CSS variables, a Tailwind config, SCSS, JSON, or an SVG swatch sheet. It saves your last palette and up to twelve more.

Two things broke. The screenshot wrote nothing, because I'd given headless Chrome a relative output path. Then the local server 404'd every page. The real cause: import.meta.url URL-encodes the spaces in this repo's folder name ("100 Projects Claude Code Cowork"), so they turned into %20 and the server couldn't find anything. Wrapping the path in decodeURIComponent fixed it. The design hook also caught me reaching for Fraunces again, and I switched to Bricolage Grotesque.

• A palette generator is a constraint problem, not a randomness problem. Random hues look amateur. The quality comes from fixing a light-to-dark ramp across the five slots and only varying hue and saturation by harmony rule.
• Accessibility contrast is cheap to do right. It's a short formula (black on white comes out to exactly 21:1), and the best text color is just whichever of black or white scores higher. That one number turns a pretty tool into a usable one.
• import.meta.url is URL-encoded. Any local server in a folder with spaces needs decodeURIComponent or it 404s everything.
• The tested core from #9 carried straight over. Push every real function into a module with no page code, and the shipped code is the tested code for free.

This was the second time through the tested core pattern, and it's what told me the pattern was worth keeping. #11 followed the same shape with its QR encoder, and later #75 imported #11's qr.js directly, one of nine code imports between projects recorded in the repo. The %20 fix mattered even more. This repo's folder name has spaces, so every local server after this one needed it. Color tooling came back in #30 and #95.

I'd add color-blindness previews, let people paste a brand hex to build around, and put the palette in the URL so a palette is just a link.