🎨

Color Palette Generator (HSL Harmony)

Generate harmonious palettes from a base color using HSL color theory. 6 standard schemes: Monochromatic, Analogous, Complementary, Triadic… + 10 shades & tints.

All tools

Base color

Scheme

Show shades & tints (10 steps)

Palette

Shades & tints

Generate harmonious palettes from a base color using HSL color theory. Great for design systems, branding, UI mockups. 6 standard schemes.

Color theory basics

The color wheel divides 360° into hues. Two colors are harmonious when they sit in a mathematical relationship on the wheel.

6 standard schemes

Monochromatic: one hue, varying lightness. Safe, minimal — great for clean UIs.
Analogous: 3-5 adjacent colors (±30°). Calm, natural — perfect for serene landing pages.
Complementary: 2 opposing colors (180°). High contrast, attention-grabbing — for CTAs and alerts.
Split-complementary: 3 colors — base + two neighbors of the opposite. Softer than complementary but still bold.
Triadic: 3 colors 120° apart. Balanced and vibrant — great for game UIs and kids' apps.
Tetradic: 4 colors 90° apart. Rich but tricky — keep one color dominant.

Shades & Tints

The tool also generates 10 lightness steps from the base color (like Tailwind 50-900):

Tints: mixed with white → lighter. Use for backgrounds, hover states.
Shades: mixed with black → darker. Use for text, dark mode.

You can use these as a design-system scale: --brand-50 → --brand-900.

Practical tips

60-30-10 rule: 60% primary, 30% secondary, 10% accent. Don't use 4 equal tetradic colors.
Brand color: pick one strong color (analogous to your logo) as primary. Keep the rest neutral.
Verify contrast: pair text + bg → check with the Color Contrast Checker to pass WCAG.
Designer tools: Adobe Color, Coolors, Paletton. This tool is the quickest option when devs need a palette fast.