Color Palette Generator

Palettes from color theory

A harmonious palette is not random; it follows relationships on the color wheel. Starting from one base hue, a generator rotates the hue by fixed angles to find colors that sit well together. Complementary pairs are 180 degrees apart, analogous colors are the near neighbors within about 30 degrees, and a triadic set is three hues spaced 120 degrees apart.

Picking a scheme on purpose

Analogous palettes feel calm and cohesive, which suits backgrounds and large surfaces. Complementary palettes create tension and pop, so they work for a call-to-action against a muted field. A split-complementary scheme softens that contrast by using the two neighbors of the complement instead of the complement itself, which is often more forgiving.

Example

Base:          hsl(210, 70%, 50%)   /* a blue */
Complement:    hsl(30, 70%, 50%)    /* +180 -> orange */
Analogous:     hsl(180, 70%, 50%), hsl(240, 70%, 50%)
Triadic:       hsl(330, 70%, 50%), hsl(90, 70%, 50%)

Working in HSL makes the rotation obvious: only the first number, the hue, changes. Holding saturation and lightness steady keeps the set feeling like one family.

Pitfalls

Equal lightness across hues does not mean equal perceived brightness; yellow at 50 percent lightness looks far brighter than blue at the same value, so a mechanically generated palette can feel unbalanced. Always test a text-and-background pair in the contrast checker, and preview the result in the color blindness simulator so you are not relying on a red-green distinction alone.

FAQ

How many colors should a palette have? A workable UI palette is usually one or two brand hues plus a neutral range and a couple of semantic colors for success and error.

Why do my generated colors look garish? Full saturation reads as cheap on screens. Pull saturation down toward 60-80 percent for most interface colors.

Can I lock one color? Yes, fix your brand hue as the base and let the generator derive the rest around it.