Color Palette Generator

A color palette is a small set of colors chosen to work together — typically a primary color, one or two secondary colors, and one or more accents. Designers assemble palettes for websites, apps, brand identities, illustrations, posters, room interiors, charts, and any other artifact where coordinated color matters. A good palette balances contrast (so elements are distinguishable) with harmony (so the result feels cohesive rather than noisy).

The classical approach to assembling palettes comes from color theory, which models hues as positions on a circular wheel. Several rules describe combinations that tend to look pleasant: a complementary pair sits opposite each other (maximum contrast), a triadic set is three colors 120° apart (balanced and vivid), a tetradic set is four colors at 90° intervals (rich but harder to use), an analogous group is several neighboring hues (calm, naturalistic), and a monochromatic set is one hue at multiple lightness levels (unified, hierarchical). This tool implements all five rules so you can generate any of them with one click.

The Random mode uses a different approach: it picks one base hue and arranges the remaining colors at fixed offsets from it (0°, ±30°, ±60°, ±150°, ±180°, etc.) with a small amount of jitter. The intent is to mimic the way a designer naturally builds a palette — most colors stay in a tight family near the base, with one or two accent colors pulled from across the wheel. Each color also varies independently in saturation and lightness within ranges chosen to avoid muddy or washed-out output. The result is closer to what a designer would put together than uniform random RGB, which produces a lot of unusable color combinations.

Once you have a palette you like, the page’s URL updates automatically to encode the colors as a hash like #a3b2c1-deadbe-c0ffee. This means every palette has a permanent, shareable address — you can bookmark it, send it to a teammate, or paste it into a design doc. The recipient lands in Random mode with all swatches unlocked, free to remix or extend the palette.

For developers and designers who want to use a generated palette directly, the export bar produces output in four formats. The HEX list is the universal lingua franca of color tools and design programs. The CSS custom-properties output drops into a stylesheet’s :root block; the Tailwind snippet plugs into your tailwind.config.js’s theme.extend.colors section; and the JSON array is convenient for scripts, design tokens, and arbitrary tooling. Click any of the four buttons and the palette in your chosen format goes straight to the clipboard.

A common question is whether algorithmic palette generation is better or worse than browsing curated palettes from a library like Adobe Color or Coolors’ trending feed. The honest answer is that they serve different purposes. Curated palettes give you the aesthetic judgment of human designers; algorithmic generation gives you instant variety and a starting point you can tune. The two pair well: regenerate here to find a base palette quickly, then refine it in a more focused tool, or vice versa.

The tool runs entirely in your browser — no colors, no preferences, no clicks are sent anywhere. Generation, harmony math, and clipboard writes are all client-side JavaScript. You can verify this by opening browser dev tools and watching the network tab while you regenerate; nothing fetches.