Color Harmony Calculator | Complementary, Triadic & Palette Generator
Enter any color as hex or RGB and instantly generate six classic color harmony palettes: complementary, analogous, triadic, split-complementary, tetradic, and square. Displays each color as a visual swatch with its hex, RGB, and HSL values. Includes contrast ratios for readability checks and a color blindness simulation overview.
What Is the Color Harmony Calculator | Complementary, Triadic & Palette Generator?
Color harmony describes combinations of colors that are visually balanced based on their positions on the 360° HSL color wheel. The hue component (H) determines color; rotating it by a fixed angle produces harmonious companions. Complementary colors (180° apart) create maximum contrast and vibrance. Analogous colors (±30°) flow naturally together. Triadic (120° spacing) and tetradic (90° spacing) produce balanced multi-color palettes. Monochromatic variations keep the same hue and vary lightness for cohesive depth. The WCAG contrast ratio, computed from relative luminance, measures how readable text is on a given background — a ratio of 4.5:1 or higher satisfies AA-level accessibility.
Formula
Harmony colors at hue H ± offset on the HSL wheel — contrast ratio = (L₁ + 0.05) / (L₂ + 0.05)
How to Use
- 1
Enter a 6-digit hex color code (e.g. #2196F3) or click the color picker
- 2
Alternatively click a preset to load a sample named color
- 3
Click "Generate Color Harmonies" to compute all six palettes
- 4
Each swatch shows hex code, HSL angles, and a label (Base, +120°, etc.)
- 5
Check the WCAG contrast ratios (vs white and black) shown for the base color
- 6
Click any swatch hex to copy it for use in your design tool
Type a hex color or use the color picker, then click Generate Color Harmonies to see all six palette types with hex, RGB, and HSL values per swatch.
Example Calculation
Base: #E53935 (Crimson, hsl(1°, 78%, 56%)). Complementary: #35E5E1 (cyan, hue 1+180=181°). Triadic: #35E591 (green, 121°) and #3535E5 (blue, 241°). Contrast vs white: 4.1:1 (fails AA body text); vs black: 5.1:1 (passes AA). Swap background and text to meet contrast requirements.
Understanding Color Harmony | Complementary, Triadic & Palette Generator
The Six Harmony Types
| Harmony | Hue offsets | Colors | Mood / use case |
|---|---|---|---|
| Complementary | 0°, 180° | 2 | High contrast, bold, vibrant — sport brands, call-to-action buttons |
| Analogous | −30°, 0°, +30° | 3 | Harmonious, natural — landscapes, calming UIs |
| Triadic | 0°, 120°, 240° | 3 | Balanced, vivid — children's design, playful brands |
| Split-Complementary | 0°, 150°, 210° | 3 | High contrast with less tension than complementary |
| Tetradic (Square) | 0°, 90°, 180°, 270° | 4 | Rich variety — requires careful balancing |
| Monochromatic | Same hue, vary L | 5 | Elegant, cohesive — minimal UI, photography |
WCAG Contrast Ratio Guidelines
| Ratio | Level | Applies to | Meaning |
|---|---|---|---|
| ≥ 3:1 | AA Large | Large text (18pt+ or 14pt bold) | Minimum for decorative or large text |
| ≥ 4.5:1 | AA | Normal body text | Minimum for standard accessibility |
| ≥ 7:1 | AAA | Normal body text | Enhanced contrast, maximum readability |
HSL vs RGB vs Hex
- ›Hex (#RRGGBB) is the standard for web CSS and design tools — compact, human-readable for known colors.
- ›RGB (0–255, 0–255, 0–255) maps directly to display hardware. Best for programmatic color mixing.
- ›HSL (Hue 0–360°, Saturation 0–100%, Lightness 0–100%) is the most intuitive for color harmony — rotating hue by a fixed angle gives harmonious colors without complex math.
- ›Hue 0° = red, 60° = yellow, 120° = green, 180° = cyan, 240° = blue, 300° = magenta.
- ›A saturation of 0% gives a neutral grey regardless of hue; lightness 0% = black, 100% = white.
Frequently Asked Questions
What is complementary harmony?
Two colors directly opposite on the color wheel (180° hue difference). They create maximum contrast and visual vibrance — each makes the other appear more intense. Used heavily in sport brands and call-to-action buttons.
When should I use analogous vs triadic colors?
Analogous (±30°) creates a calm, unified palette ideal for backgrounds and nature-themed designs. Triadic (120° apart) is more vibrant and playful — good for illustrations and interfaces that need energy without full complementary clash.
What WCAG contrast ratio do I need?
For normal text: 4.5:1 for Level AA (minimum for most websites), 7:1 for Level AAA (enhanced). For large text (18pt+): 3:1 for AA. The contrast ratios shown in this tool compare your base color against white and black.
Why does my chosen color look different in HSL vs RGB?
RGB is additive (mixing light): (255,0,0) is pure red. HSL is perceptual: H=0° is red, S=100% is fully saturated, L=50% is the mid-tone. The same color can be expressed in both — they are mathematically equivalent transformations.
What is a split-complementary scheme?
Instead of using the exact complementary color (180°), a split-complementary scheme uses the two colors flanking the complement (150° and 210°). This retains strong contrast but is more versatile and easier to balance than a true complementary pair.
You Might Also Like
Explore 360+ Free Calculators
From math and science to finance and everyday life — all free, no account needed.