Color Palette Generator

How the schemes are built

Most schemes here are built by converting the base color to HSL — hue, saturation and lightness — and changing its hue by a fixed number of degrees. Saturation and lightness stay the same, so the colors differ mainly in hue.

Monochromatic works differently: it keeps the same hue and saturation while generating several lightness levels from dark to light.

Each swatch shows the same color in three formats: HEX, RGB and HSL. HEX is commonly used in CSS and design tools, RGB describes the red, green and blue channels, and HSL describes the color by hue, saturation and lightness. You can copy any HEX code directly from the palette.

Which scheme to use

• Complementary creates the strongest hue contrast among these schemes, which makes it excellent for one element that must be noticed and difficult across large areas — the two colors fight at equal weight.
• Analogous is calm and cohesive because the colors are neighbours. It has little built-in contrast, so let one dominate and use the others sparingly.
• Triadic is vivid and balanced. Three strong colors in equal amounts is usually too much; one leading with two accents works.
• Split complementary keeps most of the punch of a complementary pairing but is more forgiving, which makes it a good default when a complementary scheme feels too harsh.
• Square gives four colors and two complementary pairs. Plenty of range, and easy to overuse.
• Monochromatic uses one hue, so there is no hue conflict between the colors. The trade-off is that typography and spacing have to do the work the color isn’t doing.

A palette is not an accessibility check

Two colors being related on the wheel says nothing about whether text in one is readable on the other. Complementary colors can have almost identical lightness, which may create strong visual contrast while still producing poor text readability.

Before using any pair for text, run it through the contrast checker. Normal text needs a ratio of 4.5:1 to meet WCAG AA, and a palette built purely from hue rotation frequently misses it.

Why neutral colors produce identical colors

A neutral grey has no meaningful hue. For a pure grey, red, green and blue are equal and saturation is zero, so rotating its hue produces exactly the same color.

The generator says so when it happens. If you want variation from a neutral, monochromatic is the scheme that still works, since it varies lightness rather than hue.

The base color is never altered

The base color is preserved

Converting a hex color to HSL and back can shift it by a unit because RGB values are rounded during the conversion. Here the original base color is kept directly instead of being recalculated, so the base swatch stays faithful to the color the visitor selected or entered.

Frequently asked questions