Color Palette Generator

1. Press Spacebar, or the Generate Palette button, to fill all five slots with a new palette.
2. When a color works, click the lock icon on its slot. Locked colors stay put on every later roll.
3. Keep pressing Spacebar. The unlocked slots are regenerated to fit around the colors you have locked.
4. Open the export and copy the palette as CSS variables, SCSS, JSON tokens or plain text.

Spacebar only rolls when the cursor is not in a text field, so typing never triggers a new palette by accident.

Treat rolling as a search. Roll a few times to find a direction, lock the single color you like most, then roll again: new palettes now form around it. Lock one more color at a time. Each lock narrows what the generator can produce, so results converge instead of jumping around, and most sessions end with two or three locks. If a roll breaks the mood, unlock the newest color rather than starting over. When you already have a fixed brand color, the color harmony generator builds schemes from that exact hex.

A generated palette is raw material. An interface needs colors with jobs:

• Primary: links, primary buttons and focus rings. Usually the most saturated color you keep.
• Secondary: tags, secondary buttons and illustrations.
• Accent: the scarce highlight, on roughly 10% of the screen or less.
• Neutrals: backgrounds, borders and text. A gray tinted slightly toward the primary hue, the way slategray leans blue, looks more deliberate than pure gray.
• Semantic colors: red for errors, amber for warnings, green for success, blue for information. Keep them distinct from the primary so a brand-red button is never mistaken for a destructive action.

Each role then needs lighter and darker steps for hover states, backgrounds and text. The Tailwind palette generator expands one color into an 11-step scale.

The CSS export is a :root block with the five colors numbered --color-1 to --color-5; SCSS uses $color-1 and so on, and the JSON tokens list each color's HEX, RGB and HSL for build scripts. Rename the numbered tokens by role after pasting. --color-primary: #6366f1; survives a rebrand, while --indigo becomes wrong the day the brand turns green. Plain text puts each color's HEX, RGB and HSL on one line, handy for a ticket or a handoff note.

A pleasing palette can still be hard to read. Indigo #6366f1 with white text measures 4.46:1, just under the 4.5:1 AA threshold, and WCAG does not round up. Test every pair you plan to use for text in the contrast checker: 4.5:1 for body text, 3:1 for large text and for UI parts such as input borders and icons. Its color blindness simulation also shows whether semantic red and green remain distinguishable.