Palette Generator

Palette Generator builds color palettes from a single base color using established color theory harmony rules. Pick a color, choose a harmony type, and the tool calculates the matching colors on the hue wheel and outputs them as ready-to-use CSS custom properties.

Tool interface

• Base color — a color picker input with the current hex value shown alongside it.
• Harmony — six buttons to switch between palette types: Complementary, Analogous, Triadic, Split-complementary, Tetradic, and Monochromatic.
• Shades slider — visible only for Monochromatic, controls how many tints and shades to generate (3–9).
• Palette — a row of color swatches, each showing the hex value and an individual Copy button.
• CSS variables — a text area with the full palette as --color-1, --color-2, … declarations, ready to paste into any stylesheet.
• Copy copies all CSS variables at once. Clear resets the tool to its defaults.

Tool description

Choosing colors that work well together is one of the more time-consuming parts of designing an interface or a visual. Color theory provides a reliable shortcut: colors that are geometrically related on the hue wheel tend to feel harmonious together. Each harmony type captures a different relationship:

• Complementary pairs two colors directly opposite each other (180° apart). High contrast, energetic.
• Analogous takes three adjacent colors (±30°). Low contrast, cohesive, calm.
• Triadic uses three colors evenly spaced (120° apart). Vivid and balanced.
• Split-complementary takes the base color plus two colors flanking its complement (±30° from 180°). Strong contrast, less tension than pure complementary.
• Tetradic uses four colors in a rectangle on the wheel (90° apart). Rich, complex — works best when one color dominates.
• Monochromatic keeps the same hue and varies only lightness, producing a tint-and-shade scale ideal for backgrounds, surfaces, and text levels.

All output is formatted as CSS custom properties so you can paste them directly into a :root {} block and reference them throughout your stylesheet as var(--color-1) etc.

How to use

1. Click the base color swatch and choose any color using the browser color picker.
2. Select a harmony type with the buttons below.
3. For Monochromatic, drag the Shades slider to choose how many steps to generate.
4. Copy individual hex values using the Copy button on each swatch.
5. Click the main Copy button to copy the whole palette as CSS variable declarations.