Theme Generator

Pick a color, get a full CSS theme back. No design skills needed — just choose your base and let the tool build the rest.

Putting together a color palette from scratch is one of those things that sounds easy until you're staring at twenty different blues trying to decide which ones actually work together. This tool skips all that guesswork. Pick one base color — any color you like — and it generates 11 CSS custom properties ranging from dark shades to light tints, all derived from that single hue. Everything runs in your browser, so nothing gets uploaded anywhere. It's handy for prototyping a design system, throwing together a quick style guide, testing how a brand color would scale across a full UI, or just exploring what kinds of palettes you can spin out of a single starting point. The output's ready to drop straight into your CSS, so you can go from idea to styled page in a few clicks.

The HSL approach is worth understanding because it explains why the generated palette actually looks cohesive. Hue is the pure color — red, blue, green, whatever you picked. Saturation controls how intense that color feels, from vivid to washed out. Lightness does exactly what it sounds like: how light or dark the color is. By keeping hue and saturation fixed while only shifting lightness, every color in the generated theme shares the same underlying character. That's the difference between a palette that looks intentional and one that looks like you grabbed random hex codes. You get a natural gradient from deep, dark shades (great for text or headers) up to airy, light tints (perfect for backgrounds or subtle borders), all without any color theory degree. The tool handles the math, so you get to focus on picking the right base color and letting the palette build itself from there.