All tools
Design tools

Color Palette Generator

Generate complementary, analogous, triadic and tetradic palettes from any base color — export to CSS custom properties, Tailwind config or copy HEX values instantly.

Complementary Analogous Triadic Tetradic CSS export Tailwind export
Get started free Sign in

Free · No credit card · 50 credits/day

Palette harmony types

Complementary

Two colors opposite on the wheel. Maximum contrast — ideal for CTAs and highlights against a dominant background.

Analogous

Three adjacent colors on the wheel. Harmonious and easy on the eye — great for backgrounds and content areas.

Triadic

Three evenly-spaced colors. Vibrant and balanced — good for illustrations, icons and data visualization.

Tetradic

Four colors forming a rectangle. Rich and varied — use one color as dominant and the others as accents.

Monochromatic

Shades and tints of a single hue. Sophisticated and cohesive — the go-to for minimal, modern designs.

CSS & Tailwind export

Export your palette as CSS custom properties (--color-primary: #…) or a Tailwind colors config object — ready to paste.

Frequently asked questions

What is the difference between complementary and analogous colors?

Complementary colors sit opposite on the color wheel (blue and orange) — high contrast, great for CTAs. Analogous colors are adjacent (blue, blue-green, green) — harmonious and calm. Most effective designs use analogous as a base with a complementary accent.

How many colors should a brand palette have?

A well-functioning brand palette has: 1 primary, 1 secondary/accent, 1–2 neutrals (backgrounds, text), and 2–3 semantic colors (success, error, warning). Total: 5–7 colors. More than 7 becomes hard to apply consistently; fewer than 5 can feel flat.

What color format should I use in CSS?

For modern CSS: prefer HSL for readability and easy manipulation, or OKLCH for perceptual uniformity. For compatibility: HEX is universal. Avoid pure RGB in CSS — HSL is easier to reason about when lightening or darkening a color.

What is the 60-30-10 color rule?

60% dominant color (usually a neutral), 30% secondary color (main brand or personality color), and 10% accent (the pop — for CTAs, icons and emphasis). It's a reliable starting point that prevents palettes from feeling chaotic.

Related design tools

More tools for working with color.

Contrast Checker (WCAG)

Check if your palette meets WCAG AA/AAA accessibility contrast ratios.

 Tailwind Color Finder

Find the nearest Tailwind color to any HEX in your palette.

 Color Blindness Simulator

See how your palette looks to users with color blindness.

Build beautiful color systems

Free account. 50 credits per day. Access to 75+ tools instantly.

Create free account →