← Tools

Color & Accessibility

Color Palette Generator

Pick a base color and a harmony rule, and build a five-color palette grounded in color theory. Lock the swatches you like, reshuffle the rest, and copy the whole thing out as ready-to-use CSS variables.

Base color
Harmony
:root
 

Click a swatch or its hex to copy that color. Lock the ones you want to keep, then hit Shuffle (or press the spacebar) to roll fresh variations of the unlocked swatches around your base.

About the palette generator

This free tool builds a five-color palette from a base color and a harmony rule. Lock the colors you like, reshuffle the rest, and copy the result out as CSS variables.

Use it at the start of a design, or when a brand needs a supporting set of colors. Starting from a harmony rule keeps the palette coherent instead of guessed.

Worked example: pick a deep blue as the base, choose an analogous rule, lock the two colors you like, and reshuffle until the other three sit well beside them. Then check your text pairings in the contrast checker.

Start a Conversation