What color harmony types are available?

Six types: monochromatic (shades of one color), analogous (adjacent colors), complementary (opposite colors), triadic (3 evenly spaced), tetradic/square (4 evenly spaced), and split-complementary (base + 2 adjacent to complement).

Does it check color accessibility?

Yes, each generated color shows a WCAG AA contrast ratio against optimal text color (black or white), with pass/fail indicators.

What color formats are provided?

Each color shows HEX, RGB, and HSL values. Click Copy to copy any color to your clipboard.

Color Harmony Generator

Generate harmonious color palettes using color theory: complementary, analogous, triadic, tetradic, and split-complementary schemes with WCAG contrast checking.

Tool language

Changing language starts a new session. Save your result first.

Choose Harmony

Pick Color

Get Palette

Step 1: Choose Color Harmony Type

Step 2: Choose Your Base Color

Color Picker

Select a base color to generate harmonious color palettes

Enter a HEX color code (e.g., #3B82F6) or use the color picker

Preset Colors

Step 3: Your Generated Palette

#042761

rgb(4, 39, 97)

hsl(217, 92%, 20%)

Contrast: 14.3:1AA ✓

#094fc2

rgb(9, 79, 194)

hsl(217, 91%, 40%)

Contrast: 7.2:1AA ✓

#3b82f6

rgb(59, 130, 246)

hsl(217, 91%, 60%)

Contrast: 3.7:1AA ✗

#9dc0fa

rgb(157, 192, 250)

hsl(217, 90%, 80%)

Contrast: 11.4:1AA ✓

#fefeff

rgb(254, 254, 255)

hsl(240, 100%, 100%)

Contrast: 20.8:1AA ✓

Also Try: Color Contrast Checker

Test any foreground/background pair against WCAG AA and AAA standards with live text preview and accessible suggestions.

♿ Open Contrast Checker →

About This Color Harmony Generator

This color harmony generator creates palettes based on color theory principles. Choose from six harmony types — monochromatic, analogous, complementary, triadic, tetradic (square), and split-complementary — to generate color combinations that work well together. Each generated color shows HEX, RGB, and HSL values along with WCAG AA contrast ratio checking.

Pick a base color using the color picker or hex input, select a harmony type, and the palette generates automatically. Copy individual colors or the entire palette with one click.

Color Harmony Types Explained

Complementary Colors

Colors directly opposite each other on the color wheel. Creates high contrast combinations useful for call-to-action buttons and elements that need to stand out. Generates 2 colors.

Analogous Colors

Colors adjacent on the color wheel. Creates harmonious, natural-looking combinations. Good for backgrounds and subtle color transitions. Generates 5 colors.

Triadic Colors

Three colors evenly spaced around the color wheel (120° apart). Provides visual contrast while maintaining balance. Generates 3 colors.

Tetradic (Square) Colors

Four colors arranged in a square on the color wheel (90° apart). Provides the most variety in a single palette. Best when one color dominates. Generates 4 color combinations.

Split-Complementary Colors

A base color plus the two colors adjacent to its complement. Offers contrast similar to complementary but with more nuance. Generates 3 colors.

Monochromatic Colors

Different lightness levels of the same hue. Creates cohesive, unified palettes. Good for minimalist designs and establishing visual hierarchy. Generates 5 colors.

The 60-30-10 Color Rule

The 60-30-10 rule is a guideline for distributing colors in a design:

60% — Dominant color (backgrounds, large areas)
30% — Secondary color (content areas, supporting elements)
10% — Accent color (buttons, highlights, calls-to-action)

This creates visual hierarchy and prevents color overload. Use monochromatic or analogous palettes for the 60-30 split, and a complementary accent for the 10%.

Frequently Asked Questions

How do I choose the right color harmony?

Complementary for high contrast (buttons, CTAs), analogous for subtle harmony (backgrounds), triadic for vibrant variety, tetradic for complex designs with 4 color combinations, and monochromatic for elegant simplicity.

What does the WCAG AA contrast check mean?

Each color shows whether it meets the WCAG AA standard for text contrast (minimum 4.5:1 ratio). Colors marked "AA ✓" provide sufficient contrast for readable text against optimal black or white backgrounds.

Can I use these colors in CSS?

Yes. Each color is provided in HEX (e.g., #3B82F6), RGB (e.g., rgb(59, 130, 246)), and HSL (e.g., hsl(217, 91%, 60%)) formats. Click "Copy" to copy any value to your clipboard for use in CSS, design tools, or code.

How does the tetradic (square) palette work?

The tetradic harmony places 4 colors at equal 90° intervals on the color wheel, forming a square. This gives you 4 color combinations with maximum variety. For best results, use one color as dominant and the others as accents.

Loading tool...

How to Use

1
Choose Harmony Type
Select from six color harmony types: monochromatic, analogous, complementary, triadic, tetradic, or split-complementary.
2
Pick Base Color
Use the color picker, type a hex code, or select a preset color as your starting point.
3
Copy Colors
Copy individual color values or the entire palette. Colors are shown in HEX, RGB, and HSL formats.

Share this tool:

Color Contrast Checker

Check WCAG AA and AAA contrast ratios for foreground/background color pairs.

Try Color Contrast Checker →

CSS Gradient Generator

Create beautiful CSS gradients with visual editor and export CSS.

Try CSS Gradient Generator →

Color Converter

Convert between color formats including RGB, HEX, HSL, CMYK, and more. Professional color converter with color names, brightness analysis, and contrast ratios for designers and developers.

Try Color Converter →

Frequently Asked Questions

What color harmony types are available?: Six types: monochromatic (shades of one color), analogous (adjacent colors), complementary (opposite colors), triadic (3 evenly spaced), tetradic/square (4 evenly spaced), and split-complementary (base + 2 adjacent to complement).
Does it check color accessibility?: Yes, each generated color shows a WCAG AA contrast ratio against optimal text color (black or white), with pass/fail indicators.
What color formats are provided?: Each color shows HEX, RGB, and HSL values. Click Copy to copy any color to your clipboard.

Step 1: Choose Color Harmony Type

About This Color Harmony Generator

Pick a base color using the color picker or hex input, select a harmony type, and the palette generates automatically. Copy individual colors or the entire palette with one click.

Color Harmony Types Explained

Complementary Colors

Colors directly opposite each other on the color wheel. Creates high contrast combinations useful for call-to-action buttons and elements that need to stand out. Generates 2 colors.

Analogous Colors

Colors adjacent on the color wheel. Creates harmonious, natural-looking combinations. Good for backgrounds and subtle color transitions. Generates 5 colors.

Triadic Colors

Three colors evenly spaced around the color wheel (120° apart). Provides visual contrast while maintaining balance. Generates 3 colors.

Tetradic (Square) Colors

Four colors arranged in a square on the color wheel (90° apart). Provides the most variety in a single palette. Best when one color dominates. Generates 4 color combinations.

Split-Complementary Colors

A base color plus the two colors adjacent to its complement. Offers contrast similar to complementary but with more nuance. Generates 3 colors.

Monochromatic Colors

Different lightness levels of the same hue. Creates cohesive, unified palettes. Good for minimalist designs and establishing visual hierarchy. Generates 5 colors.

The 60-30-10 Color Rule

The 60-30-10 rule is a guideline for distributing colors in a design:

60% — Dominant color (backgrounds, large areas)

30% — Secondary color (content areas, supporting elements)

10% — Accent color (buttons, highlights, calls-to-action)

This creates visual hierarchy and prevents color overload. Use monochromatic or analogous palettes for the 60-30 split, and a complementary accent for the 10%.

Step 1: Choose Color Harmony Type

Step 2: Choose Your Base Color

Step 3: Your Generated Palette

Also Try: Color Contrast Checker

Popular Use Cases

About This Color Harmony Generator

Color Harmony Types Explained

Complementary Colors

Analogous Colors

Triadic Colors

Tetradic (Square) Colors

Split-Complementary Colors

Monochromatic Colors

The 60-30-10 Color Rule

Frequently Asked Questions

How do I choose the right color harmony?

What does the WCAG AA contrast check mean?

Can I use these colors in CSS?

How does the tetradic (square) palette work?

How to Use

Related Tools

Color Contrast Checker

CSS Gradient Generator

Color Converter

Frequently Asked Questions

Explore More Tools

Design Tools

Tailwind Color Palette

CSS Gradient Generator

Color Contrast Checker

Converters

Base64 Converter

Binary Converter

Unit Converter

Color Converter

Timestamp Converter

Step 1: Choose Color Harmony Type

Step 2: Choose Your Base Color

Step 3: Your Generated Palette

Also Try: Color Contrast Checker

Popular Use Cases

About This Color Harmony Generator

Color Harmony Types Explained

Complementary Colors

Analogous Colors

Triadic Colors

Tetradic (Square) Colors

Split-Complementary Colors

Monochromatic Colors

The 60-30-10 Color Rule

Frequently Asked Questions

How do I choose the right color harmony?

What does the WCAG AA contrast check mean?

Can I use these colors in CSS?

How does the tetradic (square) palette work?