Color Palette Generator

Build beautiful 5-color palettes from any base color using proven HSL color-theory schemes. Click a swatch to copy its HEX, lock the ones you love, and hit Generate for fresh ideas — everything runs in your browser and nothing is stored.

Click a swatch to copy its HEX. Press Space to generate.

How to use the color palette generator

  1. Pick a base color with the picker, or type a HEX value like #e0457b.
  2. Choose a scheme — Complementary, Analogous, Triadic, Tetradic, Monochromatic, Shades or Random.
  3. Click Generate (or press the space bar) to roll a fresh palette, and lock any swatch you want to keep.
  4. Click a swatch to copy its HEX, or use Copy all for every hex or a CSS variables block.

Palettes are built with HSL color math: the hue is the position on the color wheel, so complementary rotates it 180°, triadic by 120° and tetradic by 90°, while monochromatic and shades vary the lightness of a single hue.

More PAYATE tools

Frequently asked questions

How does the color palette generator work?

Pick a base color and a scheme (Complementary, Analogous, Triadic, Tetradic, Monochromatic, Shades or Random). The tool converts your color to HSL, applies the color-theory math for that scheme, and produces five harmonious swatches — instantly, right in your browser.

What is the difference between the colour schemes?

Complementary uses the opposite hue; Analogous uses neighbouring hues; Triadic and Tetradic spread hues evenly around the wheel; Monochromatic varies lightness and saturation of one hue; Shades keeps the hue and steps the lightness; Random mixes everything for inspiration.

How do I copy the colors?

Click any swatch to copy its HEX value to your clipboard. Use Copy all to grab every hex at once, or switch it to copy a ready-to-paste :root block of CSS variables.

Can I keep a color I like while randomizing?

Yes. Click the small lock on a swatch and it will stay fixed while the rest of the palette is regenerated. Press Generate (or the space bar) to roll a fresh palette around your locked colors.

Is my data sent anywhere?

No. All colour conversion and generation run entirely in your browser — nothing is uploaded to a server and nothing is stored.

What is HSL and why use it?

HSL stands for Hue, Saturation, Lightness. It maps colours onto a wheel, which makes it the natural model for palette math: rotating the hue or stepping the lightness gives predictable, harmonious results that are hard to achieve with raw HEX or RGB.