Color Palette Generator

Pick a base color and get a harmonious palette in a click — complementary, analogous, triadic and more. Copy any hex or download the whole set as CSS.

🔒 100% private — nothing is uploaded
Harmony

Complementary palette

Two colors opposite each other on the wheel — bold, high-contrast pairings.

Tip: click a swatch to copy its hex, lock 🔒 to keep it when you regenerate, or reroll 🔄 for a fresh variation.

How the palette generator works

Everything is computed live in your browser from color-wheel math — no accounts, no waiting, no data leaving your device.

1

Choose a base color

Use the color picker, type a hex code, or roll a random starting point.

2

Pick a harmony

Complementary, analogous, triadic, tetradic, monochromatic, shades or tints — each derives new colors from your base.

3

Lock, reroll & export

Lock the swatches you love, reroll the rest, then copy the hex codes or export as CSS, JSON or a PNG strip.

What the harmonies mean

The generator converts your base color to HSL (hue, saturation, lightness) and rotates the hue around the 360° color wheel to build each scheme. Complementary uses the opposite hue (+180°) for maximum contrast. Analogous nudges the hue ±30° for calm, cohesive sets. Triadic spaces three hues 120° apart, and tetradic uses four hues 90° apart for rich, balanced schemes.

Monochromatic keeps the hue fixed and varies saturation and lightness. Shades darken your color toward black, while tints lighten it toward white — both are perfect for building UI scales and hover states.

🔒

Private by design. Every color is calculated right here in your browser with plain JavaScript. Nothing is ever uploaded or stored — we never see your palette.

Frequently Asked Questions

What color harmonies can I generate? ▼
Seven schemes from any base color: complementary, analogous, triadic, tetradic, monochromatic, shades and tints. Switching between them instantly rebuilds the palette.
What's the difference between shades and tints? ▼
Shades step your color down toward black, which is great for depth and darker UI states. Tints step it up toward white, ideal for soft backgrounds and highlights.
How are the harmonies calculated? ▼
Your base color is converted to hue, saturation and lightness, then the hue is rotated around the color wheel — for example +180° for complementary or 120° apart for triadic — to derive the matching colors.
How do I set the base color? ▼
Use the color picker, type a 3- or 6-digit hex code, or hit Random to roll a fresh starting point. The palette updates the moment the base changes.
Can I lock a color or reroll just one swatch? ▼
Yes. Every swatch has a lock 🔒 toggle that keeps that color in place when you regenerate, plus a reroll 🔄 button that swaps just that one swatch for a fresh on-theme variation. Locked colors survive rolling a new base or switching harmonies.
Can I export the whole palette? ▼
Yes. Click any swatch to copy its hex, use Copy all hex for the full set, Download CSS for ready-to-use custom properties, Export JSON for a structured data file, or Export PNG to download the five-swatch strip as an image. Every harmony returns a consistent five colors.
Is my data uploaded anywhere? ▼
No. Every color is calculated right here in your browser. Nothing is ever uploaded or stored — we never see your palette.

Related tools

Color ConverterGradient GeneratorContrast CheckerColor Blindness SimulatorColor MixerImage Color Picker