Scheme Generator

How to create a color scheme

1. Pick or paste a base color, or hit Random base to start from a surprise.
2. Choose a harmony: complementary, analogous, triadic, tetradic, monochromatic or split.
3. Read the matching colors the generator builds from your base.
4. Switch the readout to HEX, RGB or HSL, then copy one color or export all as CSS variables.

What is a color scheme?

A color scheme is a set of colors chosen by a rule of harmony rather than at random. You set one base color and the generator places the others at fixed positions on the color wheel, so they always relate to your starting color instead of clashing with it.

What are the color harmony types?

Each harmony is a different rule for where the other colors sit relative to your base on the wheel. The six here cover almost every real need:

Which color scheme should I use?

If you are unsure, analogous is the safest: neighbouring colors rarely clash, which is why so much web design leans on it. Reach for complementary when one element must stand out, like a call-to-action button, and monochromatic when you want a refined, understated look from a single hue. Triadic and tetradic give the most color but need a dominant base and small accents to stay under control.

How do I export a scheme to CSS?

• Switch the format toggle to HEX, RGB or HSL so the values match your stylesheet.
• Hit Copy CSS vars to get a ready-to-paste block of --color-1 through --color-5.
• Or click any single swatch to copy just that one value.
• Need tints and shades of a scheme color? Send it to the Shades Generator.

Why colors clash and how a scheme fixes it

Colors clash when their hues sit at awkward, unrelated angles on the wheel and fight for attention at similar saturation. A scheme removes the guesswork by locking the other colors to deliberate angles from your base, so the relationship is intentional. If two colors still feel off, nudge the base in the HSL picker or drop the saturation of the accent rather than abandoning the harmony.