Color Palette Generator (HSL Harmony)

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.