Design

Color Palette Generator

Free color palette generator. Pick a base color and instantly generate complementary, analogous, triadic, tetradic (square), and monochromatic palettes with copyable hex codes.

YOUR WORKSPACEFree to use. No sign-up.

Base color

Hex

Scheme

—

Pick a color to generate palettes.

Deep dive guides

A LITTLE CONTEXT · 4 MIN READHow Color Harmonies Work

All 3 related guides

How Color Harmonies Work — How the five classic color harmonies work as hue rotations on the color wheel: complementary, analogous, triadic, tetradic, and monochromatic.
Color Picker Explained: From One Click to Every CSS Code — What happens after you pick a color: hex parsing, the 3-digit shorthand rule, the RGB to HSL conversion, and how the coordinating palette is generated.
How Color Blindness Simulation Works — The matrices behind CVD simulation: the eight conditions, why red goes dark under protanopia, and what a simulator can and cannot tell you.

How color palette generator works

A color palette is a set of colors that look good together. This generator builds palettes from a single base color using color theory relationships, so you get harmonious combinations without guessing.

It converts your hex color to HSL (hue, saturation, lightness), then rotates the hue to create related colors: complementary (180°), analogous (±30° and 60°), triadic (120° and 240°), tetradic or square (90°, 180°, 270°), and monochromatic shades (fixed hue, varied lightness). Each is converted back to hex.

Click any swatch to copy its hex code. Use the scheme selector to focus on one palette type, or view all at once. It is handy for web design, branding, illustrations, and any project that needs coordinated colors.

Frequently asked questions

How does the color palette generator work?

It converts your base color to HSL and rotates the hue by fixed angles to create harmonious colors — 180° for complementary, 120° and 240° for triadic, and so on — then converts each back to hex.

What is a complementary color?

The color directly opposite on the color wheel, 180° away in hue. Placed next to each other, complementary colors create strong contrast — for example red and green, or blue and orange.

What is the difference between analogous and triadic?

Analogous colors sit close together on the wheel (within about 60°), giving a calm, unified look. Triadic colors are evenly spaced 120° apart, giving a vibrant but balanced look.

Can I copy the hex codes?

Yes. Click any swatch to copy its hex code to your clipboard. The base color and its HSL values are shown at the top of the result.

Color Palette Generator

Deep dive guides

How color palette generator works

Frequently asked questions

Related tools

CSS Gradient Generator

Color Converter

Hex to RGB Converter

Color Contrast Checker

Color Picker