Spending an hour clicking through color swatches and still not loving any combination is a rite of passage for anyone building a website. The good news: color selection has repeatable patterns based on the color wheel, and once you know them, the guessing mostly disappears.
This guide explains the four foundational schemes — complementary, analogous, triadic and monochrome — using concrete hue angles, then covers the 60-30-10 distribution rule and how to check that your text is actually readable.
The Color Wheel: Where Schemes Come From
Hue is what we usually call “color” — red, orange, yellow, green, blue, purple — arranged on a circle called the color wheel. Every classic scheme is a rule about where to place colors on that wheel, measured in degrees. You can read a color’s hue from the H value of its HSL code.
The four foundational combinations and their angles:
| Scheme | Hue angle | Impression | Best for |
|---|---|---|---|
| Complementary | 180° (opposite) | Strong contrast, energetic | Buttons and icons you want noticed |
| Analogous | ±30° (neighbors) | Calm, cohesive | Backgrounds and large surfaces |
| Triadic | 120° apart | Playful but balanced | When you need three colors |
| Monochrome | Same hue, varied lightness | Calm, refined | Layered backgrounds, organizing content |
Angles are guides: On the 360-degree wheel, complementary sits opposite (180°), analogous neighbors (±30°) and triadic colors sit a third of the wheel apart (120°). Nearby hues work just as well — the scheme still holds.
As a concrete example, take a base of blue (hue 210°):
- Complementary: 210 + 180 = 30°, an orange — a blue page with an orange button gets noticed
- Analogous: 180°–240°, teal and blue-violet — useful for separating background from headings
- Triadic: 90° and 330°, green and red-violet as small accents around a blue lead
- Monochrome: the same blue, lighter and darker, to create layered depth
Once the base hue is fixed, the remaining colors fall out of the wheel arithmetically — which is why wheel-based schemes are far less likely to clash than freeform picking.
Practice: Distribution, Contrast and Common Mistakes
The 60-30-10 rule
With three colors in hand, distribute them by area: roughly 60% main, 30% secondary, 10% accent. Backgrounds and large surfaces take the main color, headings and cards the secondary, and buttons or links the accent. Working in the order “background → text → accent” keeps the decisions flowing.
The classic failure is using an accent-strength color over a large area — saturated colors feel increasingly intense as they grow. Shrinking a strong color to a third of the intended area calms the whole page down.
Check text contrast
Once the palette is set, confirm the text is readable. For body-level text, the brightness difference between text and background — the contrast ratio — is recommended at 4.5:1 or higher by the W3C’s WCAG accessibility guidelines. Pale-on-pale combinations fail this easily, so verify the ratio with a contrast checker rather than trusting impressions.
Don't rely on color alone: Marking errors with red only, or required fields by color alone, excludes users whose color vision differs. Pair color with icons, labels or underlines so the information survives for everyone.
Common beginner patterns worth avoiding: multiple high-saturation colors competing for attention, too many colors at once (three beyond white/black/gray is a practical ceiling), and text too close in tone to its background. Wheel-based schemes plus a restrained palette prevent all three.
Generate Palettes with a Tool
Computing hue angles by hand is tedious. The Tools Hub color palette generator takes one base color and instantly produces complementary, analogous, triadic and monochrome palettes, with HEX, RGB and HSL codes ready to copy into CSS or a design tool. Everything runs in your browser and nothing you enter is transmitted.
How to use it (3 steps)
Pick the base color
Open the palette generator and choose the base color with the picker or by HEX code.
Choose the scheme
Select complementary, analogous, triadic or monochrome. When unsure, start with analogous — it is the hardest to get wrong.
Copy the codes
Copy the HEX, RGB and HSL values of the generated colors straight into your CSS or design tool.
Tool mentioned in this article
Color Palette Generator
Complementary, analogous, triadic and monochrome palettes instantly. Copy HEX, RGB and HSL codes — free, in your browser.
When you need a color in a different notation, the color converter switches between HEX, RGB and HSL — and the color conversion guide explains how the formats relate.
Summary
- Schemes come from the color wheel: where colors sit and at what angle
- Complementary (180°) for accents, analogous (±30°) for cohesion, triadic (120°) for balanced trios
- Distribute by area with the 60-30-10 rule
- Keep body text at a 4.5:1 contrast ratio against its background
- Tools Hub’s palette generator builds all four schemes from one base color, free in the browser
Pick one color you like, generate an analogous palette, and build the page atmosphere from there — it is the fastest route to a cohesive result.
FAQ
Should I use complementary or analogous colors?
They serve different purposes. Complementary colors are for elements you want noticed — buttons, warnings, highlights. Analogous colors suit backgrounds and large surfaces. Filling a whole page with complementary pairs gets overwhelming, so the standard approach is analogous for the base with a complementary accent used sparingly.
What is the 60-30-10 rule?
A rule of thumb for distributing color by area: 60% main color, 30% secondary, 10% accent. It is a design heuristic rather than a strict rule, but it tends to produce pages with a clear hierarchy and a cohesive feel, which is why it is such a common starting point.
How do I choose text and background colors?
Aim for a contrast ratio of 4.5:1 or higher between body-level text and its background — the value recommended in the W3C’s WCAG accessibility guidelines. Avoid pale-on-pale combinations, and after finishing the palette, verify the ratio with a contrast checker instead of trusting the screen.
Are there free tools for trying out color schemes?
Yes — the Tools Hub color palette generator creates complementary, analogous, triadic and monochrome palettes from a single base color and lets you copy the HEX, RGB and HSL codes. It requires no sign-up and runs entirely in the browser.
