Generate palette

Generate a CSS-ready palette from base HSL values and a selected harmony.

freeworks offlinenothing uploaded
ToolPalette Generator
Input
Output
—

How it works

The base hue, saturation, and lightness generate colours according to analogous, complementary, triadic, or gradient offsets. Every HSL result becomes a hex value after RGB conversion.

  • Five colours and analogous harmony are initial settings.
  • The geometric palette does not optimize contrast or colour-vision accessibility.

Worked example

Analogous Palette
Generate 5 analogous colors based on a blue hue
Input
											Count: 5
Hue: 210
Saturation: 70
Lightness: 50
Harmony: analogous
Output
												#26D980
#26D9D9
#267FD9
#2626D9
#7F26D9

When to use this

Product UIs start themes, charts generate categories, and design exercises compare harmony strategies.

Edge cases

  • A one-colour gradient is a special case rather than a transition.
  • Counts beyond a harmony cycle can repeat hues.
  • Equal HSL lightness does not mean equal perceived brightness.

References