Advertisement

Free Online Color Palette Generator

Create complementary, analogous, triadic, and monochromatic palettes from one HEX color.

Click any swatch to copy its HEX value.

Advertisement

About the Color Palette Generator

Starting from one base colour, this generator derives a harmony set using HSL rotation. Pick a colour with the picker or paste a HEX code, choose a scheme, and the swatches appear with both HEX and HSL values. Every swatch is a button that copies its code, and Copy HEX values grabs the whole set as a comma-separated list.

It is aimed at web designers and developers who need a quick, defensible palette for a landing page, brand board, or chart series, and at students learning how hue relationships work.

How to use it

  1. Set the base colour with the picker or type a HEX value. Three-digit shorthand such as #08F is expanded, and the leading hash is optional.
  2. Choose Complementary, Analogous, Triadic, Tetradic, Monochromatic, or Shades and tints.
  3. Press Generate palette to rebuild the swatches, or Random color to start from a random base.
  4. Click any swatch to copy its HEX code, or copy the full list at once.

What each scheme produces

Complementary returns two colours 180 degrees apart. Analogous returns five colours at -40, -20, 0, +20, and +40 degrees of hue. Triadic returns three colours 120 degrees apart, and tetradic four at 90 degree intervals. Monochromatic keeps the hue and saturation and varies lightness across five steps, while Shades and tints produces seven lightness levels from very dark to near white. For the base #0F6FFF, the complementary pair is #0F6FFF and #FF9F0F; the analogous set shifts the hue into neighbouring blues, teals, and violets.

Limitations and privacy

Rotation happens in the HSL colour space, which is not perceptually uniform: colours that are mathematically even can look unevenly spaced. The tool does not check contrast ratios, does not adjust for colour blindness, and cannot export CSS variables, JSON, or an image. Invalid input is rejected with a message rather than silently corrected. There is no history, so saving a palette means copying the codes. All of the maths runs in your browser.

Frequently asked questions

Why are monochromatic palettes all one hue?

That is the definition used here: the monochromatic and shades schemes hold hue and saturation steady and change only lightness.

Can I paste a colour without the hash symbol?

Yes. The parser adds it and accepts both three-digit and six-digit forms before generating.

Are the HEX codes uppercase?

Yes, every value is normalised to six uppercase digits so copied lists stay consistent.

Related tools: Color Converter, Color Picker, Color Contrast Checker.

Sponsored
Find a bug? Report now