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.
How to use the color palette generator
- Pick a base color with the picker, or type a HEX value like
#e0457b. - Choose a scheme — Complementary, Analogous, Triadic, Tetradic, Monochromatic, Shades or Random.
- Click Generate (or press the space bar) to roll a fresh palette, and lock any swatch you want to keep.
- 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.