Random Color Palette Generator

What this random palette generator does

Press New palette — or the space bar — and this tool builds a fresh set of colors that look good together. You choose how many, from 2 to 10 (five by default), and which harmony they follow. Instead of picking colors at random and hoping they match, it starts from one base hue and derives the rest, so the result is a cohesive palette you can use for a website, slide deck, brand board, illustration, or UI mockup. Each swatch shows its exact hex code, and a single click copies that value to your clipboard so you can paste it straight into CSS, Figma, or any design tool. Use Copy all to grab every hex at once as a comma-separated list, and Copy link to share the palette itself — the URL carries the colors, the locks, the harmony, the base color, all four adjustments, the vision simulation and the export format, so the link opens on exactly what you were looking at.

Seven harmonies, or a base color of your own

Choose analogous, monochromatic, complementary, split-complementary, triad, tetrad or free-style, which rolls a random hue for every swatch after the first. Leave the base color blank and a fresh hue is rolled each time; type a hex such as #3366ff — or use the color picker beside the field — and the palette is built around that color, kept byte for byte rather than quietly rounded through a trip into HSL. Monochromatic holds the single hue and builds a ladder of shades whose step is whatever fits the room on both sides, kept between lightness 6 and 94 so the shades stay distinct instead of piling up on pure white. Asking for one more color hands you one more color: the swatches already on screen are held and only the new ones are rolled. A size outside 2–10 is reported, never silently clamped.

Locks, and the space bar

Every swatch has a lock. A locked color survives every regenerate, and when no base color is set the first locked swatch becomes the color the rest of the palette re-harmonises around — so you can keep the one you like and roll the others until they fit it. The space bar generates a new palette, except while a text field, a select or a button has focus, where it already means something else.

Adjust the whole palette, then check it

Four sliders move every swatch at once: hue (±180°), saturation and brightness (±100 points, applied in HSL), and temperature (±100 — a straight red-up, blue-down trade in sRGB that moves each of those two channels by up to 50 of their 255 steps). Back at zero you get exactly the color that was there, not a value that has been through HSL and back. Turn on Color details and each swatch names its nearest CSS color keyword and prints its rgb() and hsl() values with its contrast ratio on white and on black; the same line is the swatch's tooltip. Color vision repaints the palette the way protanopia, deuteranopia, tritanopia or achromatopsia sees it — only what is painted changes, so the hex codes, the copies and the exports stay the colors you generated. Below that the palette is shown as a small design rather than bare squares: the lightest color becomes the page, the lightest of the rest the card, the darkest the body text and the most saturated of the middle colors the button. The WCAG contrast of that text on that background is measured and printed as a ratio and a level — AAA at 7:1, AA at 4.5:1, AA for large text at 3:1, or below AA — with nothing substituted to make the preview look better than the palette really is.

Nine ways to take it with you

Export as CSS custom properties (--color-1, --color-2…), SCSS variables, a Tailwind config block, JSON, an SVG, a GIMP .gpl palette, plain text, a PNG image, or an Adobe Swatch Exchange .ase file. The seven text formats are shown on the page and can be copied or downloaded as they stand; the PNG and the .ase are binary, so those two come down through Download. Both picture formats draw one 200×240 px block per color with its hex label centred near the bottom, in whichever of white or black reads better on that block.

How the colors are chosen

With no base color a random base hue is picked, then — in the default analogous scheme — each swatch is placed 28° apart around it so neighbouring colors stay related rather than clashing. Saturation is held in a vivid-but-not-harsh range of 62–85% and lightness cycles between 36, 45 and 54 to add depth, keeping the palette balanced. Pinned to a base color that spread is rolled between 18° and 39° instead, because anchoring the same 28° on the same colour would hand you back the hues you already had. Every color is converted to a standard six-digit hex code. The generator is deterministic given its random seed, so the same seed always yields the same palette — that is what makes its logic testable — while a new click reseeds it for a brand-new combination. Nothing about the palette depends on a server; the math runs entirely on your device.