Media
Typography Scale Ratio Calculator Color Ratio Harmony Calculator Content to White Space Ratio Calculator Image Resolution Aspect Ratio Calculator Screen Aspect Ratio Calculator Video Compression Ratio Calculator Print Aspect Ratio Calculator Font Width to Height Ratio Calculator Pixel Ratio CalculatorDaily Life
Cold Brew Ratio Calculator Food Waste to Consumption Ratio Calculator Lawn Fertilizer Ratio Calculator Recipe Scaling Ratio Calculator Win Loss Ratio Calculator Paint Mixture Ratio Calculator Screen Time Ratio Calculator Work Life Balance Ratio CalculatorColor Ratio Harmony Calculator
Generate mathematically perfect color palettes from a single base color. Pick your harmony type — complementary, triadic, analogous, and more — and this free online color ratio harmony calculator returns every palette color with hex codes and precise color-wheel ratios for your designs.
Generate Your PaletteInteractive Color Ratio Harmony Calculator
Choose a base color and harmony rule to build your palette.
Pick with the swatch or type a hex code like #3d75b0.
How the Color Ratio Harmony Calculator Works
Every harmony is a geometric rule applied to the color wheel — pick a rule, and the math places your colors.
Set Your Base Color
Use the color picker or type any hex code. This is your anchor — usually the dominant brand or background color. The calculator converts it to HSL (hue, saturation, lightness) because harmony math happens on the hue wheel, where colors are angles from 0° to 360°.
Choose a Harmony Rule
Each rule defines fixed angular offsets from your base hue. Complementary adds 180° for maximum contrast; analogous steps ±30° for calm neighbors; triadic spaces three colors evenly at 120°. The geometry guarantees balance no matter which base color you start from.
Get Palette Plus Ratios
Click Generate and you get visual swatches plus each color's hex code, HSL values, and its exact wheel position relative to the base. Copy hex codes straight into CSS, Figma, or your design tokens.
Apply the 60-30-10 Rule
A palette is only half the job — proportion matters. Use roughly 60% dominant color, 30% secondary, and 10% accent. Even a perfect harmony looks chaotic if every color fights for equal attention.
Color Harmony Formulas
Behind every pleasing palette is simple circle geometry. Here is the math this calculator applies.
The Hue Wheel Foundation
new hue = (base hue + offset) mod 360°
Hue is an angle on the color wheel: 0° red, 120° green, 240° blue. Adding an offset and wrapping past 360° lands you on the harmony partner. Saturation and lightness carry over unchanged, so the family resemblance stays strong.
Harmony Offsets Reference
These are the canonical angular ratios designers have used for centuries, from Renaissance painting to Material Design:
Complementary: +180° | Analogous: −30°, +30° | Triadic: +120°, +240°
Split-complementary: +150°, +210° | Square: +90°, +180°, +270° | Tetradic: +60°, +180°, +240°
Hex to HSL Conversion
To do wheel math, the calculator first converts your hex code to HSL. Red, green, and blue (0–255) are normalized to 0–1, then:
max/min of R,G,B → L = (max + min) ÷ 2, S from chroma ÷ (1 − |2L − 1|)
Hue comes from which channel dominates: red-dominant hues cluster near 0°, green near 120°, blue near 240°. After computing partner hues, the process reverses back to hex for your swatches.
Monochromatic Lightness Steps
Monochromatic harmony skips the wheel entirely and varies lightness instead: base lightness ±15 and ±30 points. This yields tints and shades of one hue — the safest possible palette, ideal for minimal interfaces where you want depth without color competition.
Color Harmony Types Compared
Choose your harmony by the mood you need. High-contrast pairs energize; neighboring hues calm.
| Harmony | Colors | Wheel Ratio | Mood | Best For |
|---|---|---|---|---|
| Complementary | 2 | 180° apart | Bold, vibrant | CTAs, sports, alerts |
| Analogous | 3 | ±30° neighbors | Calm, cohesive | Backgrounds, nature themes |
| Triadic | 3 | 120° evenly spaced | Playful, balanced | Illustrations, kids' products |
| Split-Complementary | 3 | 150° + 210° | Strong but refined | Headers with accent pairs |
| Tetradic | 4 | Rectangle: 60°/180°/240° | Rich, diverse | Complex dashboards |
| Square | 4 | 90° evenly spaced | Energetic, even | Data visualization |
| Monochromatic | 5 | One hue, varied lightness | Minimal, elegant | Luxury, editorial, SaaS |
Contrast and Accessibility Quick Guide
Beautiful palettes must also be readable. The WCAG standard measures text contrast as a ratio between 1:1 and 21:1.
| Use Case | Minimum Contrast Ratio | Typical Passing Pair |
|---|---|---|
| Body text (normal) | 4.5 : 1 (WCAG AA) | Dark slate on white |
| Large text (18pt+) | 3 : 1 (WCAG AA) | Medium blue on white |
| Enhanced / AAA body | 7 : 1 (WCAG AAA) | Near-black on white |
| Decorative only | No requirement | Any pairing |
Tip: use your harmony for brand expression, then check text pairings against these ratios before shipping.
Color Ratio Harmony FAQs
Color harmony is the practice of combining colors according to geometric rules on the color wheel so they look intentionally related rather than random. The rules — complementary, analogous, triadic, and others — define fixed angular distances between hues. Because the relationships are mathematical, they work with any starting color.
Analogous and monochromatic harmonies dominate web design because they are calm and hard to get wrong — perfect for backgrounds and large surfaces. Reserve complementary pairs for small, high-energy moments like call-to-action buttons, where maximum contrast draws the eye exactly where you want it.
This calculator outputs every palette color as a hex code automatically. Hex codes are the standard way to specify colors in CSS (e.g., #3d75b0), so you can paste them directly into stylesheets, Figma color styles, or design tokens without any conversion step.
The 60-30-10 rule proportions your palette: 60% dominant color (usually backgrounds), 30% secondary (sections, cards), 10% accent (buttons, highlights). It prevents even a perfect harmony from looking chaotic by giving each color a clear job and visual weight.
You can, but keep one harmony dominant. A common professional pattern: a monochromatic base for the interface plus one complementary accent for interactive elements. Mixing two full harmonies usually creates competition — the eye doesn't know where to rest.
Hue-based harmony alone doesn't guarantee distinguishability for color-blind users — red-green pairs are the classic failure. Always reinforce color with a second signal (icons, labels, patterns) for meaningful distinctions, and verify critical pairs with a color-blindness simulator before launch.
Both use four colors, but square spaces them evenly at 90° intervals while tetradic uses a rectangle (typically 60°, 180°, 240° offsets), pairing two complementary couples. Tetradic gives you a dominant complementary pair plus support colors; square distributes energy evenly, which suits data visualization with four equal series.
The color theory article on Wikipedia covers the historical models from Newton to Itten that these digital harmonies descend from. For hands-on exploration, generate a palette above and then test it in your actual interface — theory guides, but context decides.
Applying Harmony Ratios in Brand Identity
Generating a palette is quick; deploying it across a brand system is where harmony ratios prove their worth. The geometry that makes colors pleasing also makes them systematic — every derived color has a documented relationship to the base.
From Palette to Design Tokens
Convert each harmony color into named tokens: brand-primary (base), brand-accent (complement or triad partner), surface-warm / surface-cool (analogous neighbors). Because offsets are fixed angles, anyone extending the system later can reproduce or expand the palette exactly — no eyeballing required.
Harmony in Data Visualization
Charts stress-test palettes: series colors must be mutually distinguishable at small sizes. Triadic and square harmonies excel here because their even angular spacing maximizes perceptual distance. For more than four series, generate a tetradic base and then create lightness variants of each — hue distinguishes categories, lightness distinguishes sub-series.
Seasonal and Campaign Variants
Need a holiday or campaign theme without rebranding? Keep the harmony type and rotate the base hue: an analogous palette rooted at 210 degrees (blue) becomes a fresh analogous palette at 150 degrees (green) with identical internal relationships. The brand feels seasonal yet unmistakably itself.
Testing Palettes With Real Users
Before committing, render your palette in situ: buttons, alerts, charts, and text pairings. Check contrast ratios for every text combination, simulate common forms of color blindness, and view the palette on both calibrated and cheap displays. A harmony that sings on a designer's monitor must survive the real world.
Key Takeaways
- Start from the base, not the palette: one well-chosen base color plus a harmony rule beats hours of manual swatch hunting.
- Analogous is the safest default for interfaces; complementary pairs are best reserved for small high-energy accents.
- Always proportion with 60-30-10 — even a perfect harmony fails if every color shouts at equal volume.
- Check contrast, not just beauty: run text pairings against WCAG ratios before shipping any palette.