Color palette generator

Generating your first palette

Press the spacebar anywhere on the page (or the Generate button) and five new colors appear. Keep pressing until something catches your eye, then lock it:

1. Click lock on any swatch you want to keep. Locked swatches survive every new roll.
2. Press the spacebar again. Only the swatches without a lock change, and new hues are worked out relative to your first locked color, so the newcomers fit what you kept.
3. Use + and − to go from 2 up to 10 colors.
4. Made a roll you regret? Undo steps back through the last 30 palettes.
5. Click a HEX code on a swatch to copy it.

Your palette is saved in this browser automatically, so a refresh will not lose it. Copy share link encodes the colors in the URL (for example ?p=1C1B18-FAF8F3-D9481C-0F766E-F2B33D) for sending to someone else.

Choosing a rule

The Rule menu decides how hues relate to each other:

Rule	What it does	Good for
Surprise me	Picks one of the rules below at random each roll	Exploring
Analogous	Neighbouring hues within about 80°	Calm, natural, low-risk brands
Monochromatic	One hue at different lightness and chroma	Dashboards, minimal sites
Complementary	A hue and its opposite	Strong call-to-action contrast
Split complementary	A hue plus the two neighbours of its opposite	Contrast with less tension
Triadic	Three hues 120° apart	Playful, illustrative work
Tetradic	Four hues 90° apart	Rich schemes; needs one dominant color

If you want to see these relationships drawn on a wheel and move them by hand, the interactive color wheel is the better tool.

How the generator avoids "five colors at the same brightness"

Random HSL colors tend to cluster in a bright, saturated middle band. Put five of them next to each other and nothing stands out; put text on any of them and it is hard to read.

This generator works in OKLCH instead, a color space where the first number (lightness) matches how bright a color looks to people. On each roll it spreads the swatches across a lightness range from about 0.30 to 0.94, so you nearly always get something dark enough for text, something light enough for a background and a few mid-tones for accents. Chroma (colorfulness) is chosen once per roll and varied slightly per swatch, and it is reduced on the lightest swatch so backgrounds do not glow.

Each swatch also shows the better of white or near-black text on it, with the WCAG contrast ratio. Anything at 4.5:1 or above is safe for body text.

Reading the interface preview

The small mock-up next to the export panel paints a page header, a headline, body text, a button and a tag with your palette, using simple rules:

• the lightest color becomes the page background;
• the darkest becomes the header bar and text;
• the most colorful becomes the button;
• the second most colorful becomes the tag.

It is crude on purpose. If the preview looks wrong, the palette is usually missing a clear light or dark color. Lock what you like and roll again. For full control over which color does which job, move to the website color scheme builder.

Exporting

Choose a format from the menu and press Copy code.

• CSS variables writes :root { --terracotta: #C8553D; ... }. Variable names come from the nearest color names, so your stylesheet reads like English.
• Tailwind v4 @theme gives a block for your main CSS file. With it, classes such as bg-terracotta work straight away.
• Tailwind v3 config gives an object for theme.extend.colors in tailwind.config.js.
• SCSS, JSON and W3C design tokens ($type and $value, the format Tokens Studio and Style Dictionary read) are there too.
• Download PNG saves a 1200 × 630 swatch card with codes and names, handy for client emails.

If you need a full 50 to 950 shade ramp for one of the colors, paste it into the Tailwind color generator.

A workflow that works

1. Roll until you find one color you love. Lock it.
2. Switch the rule to Analogous or Split complementary and roll for companions.
3. Make sure you have one very light and one very dark color. If not, add a swatch and roll just that one.
4. Check your text pairings in the contrast checker; its palette matrix tests every pair at once.
5. Run the palette through the color blindness simulator if color alone carries meaning in your design (chart series, status colors).

FAQ

Is the randomness really random?

Yes. Hues and lightness come from crypto.getRandomValues, the browser's cryptographic random number source, not a predictable pseudo-random sequence.

Can I start from my own colors?

Yes. Open the tool with your colors in the address bar, like /color-palette-generator?p=0F766E-F2B33D, then lock them and generate the rest. The color wheel and palette from image can also send colors here.

Why does the spacebar not work while I am typing?

The shortcut is ignored when focus is in a text field, menu or button, so you can still type spaces and press buttons normally.

Can I use the palettes commercially?

Yes. Colors cannot be owned, and anything you make here is yours to use without credit.