Color Palette Generator

Color harmonies are mathematically-derived color combinations based on the color wheel. Complementary uses opposite colors, analogous uses neighboring colors, triadic uses three evenly-spaced colors, and so on.

Yes. Click any color swatch to copy its HEX value to your clipboard. Each swatch also shows RGB and HSL values.

The tool generates a :root CSS block with custom properties (--color-1, --color-2, etc.) that you can paste directly into your stylesheet.

Yes. All color calculations happen in your browser. Nothing is sent to any server.

Triadic uses three colors evenly spaced at 120° intervals on the color wheel. Tetradic uses four colors at 90° intervals, forming a rectangle on the wheel.

Split-complementary takes the two colors adjacent to the complement of your base color (at 150° and 210°). It offers high contrast with less tension than a straight complementary scheme.

Yes. Click the random button to generate a random base color with well-balanced saturation and lightness, then see it applied to all harmony modes.

Yes. The palette grid adapts to smaller screens and all interactions work on touch devices.