Saved
Random & generators·Pickers

Color Palette Generator

Generate complementary, analogous, triadic, and custom palettes from a base color. Fully client-side — no account, uploads, or remote storage.

Added Apr 18, 2026 · Updated Apr 21, 2026

Input

Result

Enter a value for base color to see your result.

How it works

Generates a harmonious colour palette from a base colour using standard colour theory relationships (complementary, triadic, analogous, etc.). All calculations are done in HSL (Hue, Saturation, Lightness) colour space.

Step by step

  1. 01Pick a base colour using the colour picker.
  2. 02Choose a colour harmony type based on your design needs.
  3. 03The tool converts the colour to HSL and rotates the hue by the harmony's angle.
  4. 04Output is shown as hex codes and CSS custom properties.

Examples

Indigo (#6366f1) — complementary

The complementary colour of indigo (≈239° hue) is found at 239° + 180° = 59° — a golden yellow (slightly desaturated by the algorithm).

Inputs

Base color:
#6366f1
Colour harmony:
complementary

Result

Hex colours:
#6366f1, #f1ee63
Note: Colour harmony is a starting point, not a rule — adjust saturation and lightness to suit your brand.

Related guides

Frequently asked questions

What is a complementary colour?

A complementary colour sits opposite your base colour on the colour wheel (180° away in HSL hue). Complementary pairs create high contrast and visual pop — often used for CTAs against a background.