Color Palette Generator

// Shuffle, lock, repeat — the loop that actually finds a palette

Nobody picks a palette by reasoning about hue angles. They look at five colors, decide two of them are right, and want the other three replaced. That is the whole loop this page is built around: press space (or the generate button), lock the swatches you want to keep by clicking the padlock on them, and press space again. Locked colors are held exactly as they are while everything else is drawn fresh, so the palette converges on what you meant instead of restarting from nothing each time.

The style dropdown decides what kind of palette gets drawn. Eight of the options are the classical color-theory harmonies — analogous, complementary, triadic, split complementary, tetradic, rectangle, accented analogous, monochromatic — and those read a locked color as their starting point, so pinning a brand color and pressing space gives you the palette that agrees with it rather than a fresh harmony that ignores it. Forty-one more are themed: eras (1950s through Y2K), moods, nature scenes, cultural sets like Bauhaus, art deco and Scandinavian, and materials like brass, denim and patina. Those exist because "give me something that feels like a 70s record sleeve" is a real request and a color wheel cannot answer it. The last two, Cohesive and Chaos, are pure random — one loosely related, one not related at all.

Everything the tool produces is one click away as text. Each color prints in hex, RGB, HSL and OKLCH with its own copy button, and the export row copies the whole palette as CSS custom properties or as JSON. The share link encodes the colors in the URL, so sending a palette to somebody is a paste, not a screenshot.

// Why the colors are generated in OKLCH

Most palette generators work in HSL, and HSL lies about lightness. hsl(60 100% 50%) is a bright yellow and hsl(240 100% 50%) is a dark blue, yet both claim a lightness of 50%. Generate five colors at a fixed HSL lightness and you get a set where the yellow glares and the blue disappears — the palette has no rhythm, and no amount of nudging the hue fixes it.

OKLCH is a perceptual space: its lightness axis tracks how light a color actually looks, and its chroma axis tracks how colorful. Every palette here is drawn as a lightness ramp with a hue rule on top, which is why the results have a usable spread from light to dark rather than five mid-tones in a row, and why the themed styles hold their character across a regeneration.

There is a catch OKLCH brings with it: it can describe colors your screen cannot show. Asking for a vivid green at a high lightness produces coordinates outside the sRGB gamut, and the usual fix — clipping the red, green and blue channels after conversion — quietly changes the hue, so the green you asked for comes back yellower. This tool instead lowers the chroma until the color fits, keeping the hue and lightness you asked for. The palette stays honest about which axis had to give.

// Getting the palette into a project

The CSS export writes a `:root` block of custom properties — `--color-1` onward, one per swatch — which drops straight into a stylesheet and works in every browser. The JSON export is the same colors as an array, for design tokens, a Tailwind config, or anything that reads a file. The PNG is drawn with each hex code burned into its swatch — the format that survives being pasted into a document or a message, where a bare strip of color is useless because nobody can read the values back off it.

The colors themselves are plain hex, so nothing here locks you into a workflow. If you need a shade ramp from one of them, or want to check a text color against a background, take the hex and keep going — this page is a starting point for a palette, not a place to store one.

// fair questions

How do I generate a color palette?

Press the spacebar, or click Generate. To keep a color you like, click the padlock on its swatch first — locked colors stay put while the rest are redrawn, so you can converge on a palette a few colors at a time instead of hoping for a perfect shuffle.

What makes a color palette work together?

Two things: a hue relationship and a spread of lightness. The color-theory styles handle the first (analogous hues sit next to each other, complementary hues sit opposite), and every style here handles the second by drawing the colors along a lightness ramp in OKLCH, so a palette always has light and dark members rather than five colors of the same weight.

Can I lock a color and regenerate the rest?

Yes. Click the padlock on any swatch and it is held exactly as it is through every regeneration, including when you change the style or the number of colors — shrink the palette and grow it back and the locked color returns to its slot. Click the padlock again to unlock. On the color-theory styles, a locked color also becomes the hue the rest of the harmony is built around — as long as it has a hue to work with. Lock a white, a black or a near-grey and the harmony stays random, because there is no hue in it to build on.

Can I export the palette to CSS or JSON?

Both. "Copy CSS variables" gives you a :root block of custom properties ready to paste into a stylesheet; "copy JSON" gives the same colors as an array. Each individual color also copies on its own in hex, RGB, HSL or OKLCH, and the whole palette downloads as a labelled PNG.

Can I share a palette with someone?

Yes — "copy share link" gives you a URL with the colors encoded in it. Opening that link loads exactly that palette. Nothing is stored on a server; the colors travel in the link itself.

Is this palette generator really free?

Yes. No signup, no account, no watermark, and no limit on how many palettes you generate. Everything runs in your browser: the colors are computed on your device and never uploaded. The one time they travel is inside a share link, if you choose to copy one.