How Colour Harmony Types Work
A colour harmony describes a geometric relationship between hues on the colour wheel. The generator supports four types:
- Analogous — colours spaced 20–50° apart on the wheel. They share a common undertone and feel cohesive, making them a safe choice for backgrounds and body content. Weakness: can feel low-energy if every colour is too similar.
- Complementary — pairs a hue with the colour directly opposite it (180°). The contrast creates visual tension that draws attention to focal points — buttons, headers, calls to action. Too much complementary contrast reads as garish; use the secondary colour sparingly.
- Triadic — three hues spaced 120° apart. Lively, balanced, versatile. Works well for brands targeting a younger or more playful audience. Requires careful lightness management to keep one colour dominant.
- Monochrome — a single hue at different lightness and saturation values. The most controlled option. Common in minimal UI design, luxury packaging, and technical documentation.
WCAG Contrast and What AA Pass Means
WCAG (Web Content Accessibility Guidelines) 2.1 defines contrast ratio as (lighter + 0.05) / (darker + 0.05) where each value is the relative luminance of a colour, calculated from linearised RGB channels. Ratios range from 1:1 (identical) to 21:1 (black on white).
- AA normal text — 4.5:1 minimum for body text under 18pt.
- AA large text — 3:1 minimum for text 18pt+ or bold 14pt+.
- AAA — 7:1 for normal text; 4.5:1 for large text. Required for enhanced accessibility.
A palette that passes AA for background–text pairs meets minimum legal requirements for most public-facing web content. The generator checks the first colour (background) against the last (text) and flags the result.
HSL vs. HEX — Reading the Output
HEX codes like #7C4DFF encode red, green, and blue channels in two-digit hexadecimal pairs. They are compact and universally accepted in CSS, design tools, and print software.
HSL (hue, saturation, lightness) is more human-readable for editing. Hue is a 0–360° angle on the colour wheel. Saturation (0–100%) is the intensity from grey to fully vivid. Lightness (0–100%) runs from black through the base colour to white. The generator uses HSL internally to calculate offsets, vibrance, warmth, and contrast adjustments — then outputs the final values as HEX.
The CSS export uses custom properties: --color-background, --color-surface, --color-primary, --color-accent, --color-text. Paste them into :root {} in your stylesheet and reference them with var(--color-primary) anywhere in your CSS.
Common Palette Mistakes
Too many vivid colours. A palette where every hue is fully saturated at similar lightness creates visual noise. Most effective palettes have one or two accent colours and the rest in subdued neutrals.
Poor background–text contrast. Light grey text on white, or yellow text on cream, frequently fail the 4.5:1 ratio threshold. Test every text-on-background combination, not just the primary pairing.
No neutral tones. A palette without near-whites, off-whites, or greys has nowhere to rest the eye. Neutral background and surface colours make accent and primary colours more effective by contrast.
Ignoring the surface colour. Most UIs have three levels: background (page fill), surface (cards, modals, inputs), and content (text, icons). A palette that skips a distinct surface colour forces awkward hacks later.
Quality Score and How to Use It
The generator scores palettes from 35 to 100 using three weighted factors: background-to-text contrast ratio (up to 25 points), primary colour accessibility (up to 20 points), and palette completeness (up to 10 points).
A score of 70+ indicates a workable direction. 85+ means the palette meets WCAG AA standards at primary contrast points and is a solid starting point for production. The score is a directional indicator, not a certified accessibility audit — always test the final implementation against the full WCAG 2.1 criteria for your specific type sizes and use cases.