Free color harmony generator with complementary, analogous, triadic, tetradic, and split-complementary color palettes. WCAG contrast checking included.
Discover our collection of free online tools for developers, designers, and power users
Select a base color to generate harmonious color palettes
Enter a HEX color code (e.g., #3B82F6) or use the color picker
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.
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.
Colors adjacent on the color wheel. Creates harmonious, natural-looking combinations. Good for backgrounds and subtle color transitions. Generates 5 colors.
Three colors evenly spaced around the color wheel (120° apart). Provides visual contrast while maintaining balance. Generates 3 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.
A base color plus the two colors adjacent to its complement. Offers contrast similar to complementary but with more nuance. Generates 3 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 rule is a guideline for distributing colors in a design:
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%.
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.
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.
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.
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.