🎨 Color Palette Generator
Seven harmonies built in HSL, with the contrast ratio and pass/fail on each color — so a palette that cannot carry text is caught now, not during an audit.
Opposite sides of the wheel. Maximum contrast — strong for a call to action against a dominant color, tiring if used in equal amounts.
All five
#2563eb, #86a4e6, #ebad25, #e6c886, #0d3792
Contrast is measured against black and white only. Text in one of your own palette colors on another needs checking as a pair — and a color that fails here will fail everywhere it carries text, which is much cheaper to discover now than during an accessibility audit.
What Color Palette Generator Does
Color harmony is geometry on a wheel. Complementary colors sit opposite each other, triadic ones at the corners of an equilateral triangle, analogous ones side by side — the schemes are rotations of hue, which is why this generator works in HSL: it is the space where those relationships are actually defined. Convert to any other space and the classical relationships stop being simple rotations.
The schemes are a starting point rather than an answer. A complementary pair used in equal amounts is exhausting to look at; the same pair with one color dominant and the other reserved for a call to action is the most reliable interface palette there is. That is a proportion decision, and no generator makes it for you.
What this adds, and what the popular palette tools leave out, is the number that decides whether a palette survives contact with real content: contrast. Every swatch carries its ratio against black and white and says which to use on it. A palette that looks beautiful and fails WCAG is one you will discover has to be rebuilt, usually late, usually after it is already in production.
Contrast is computed the way the guideline defines it — relative luminance in linear light, not a simple brightness average — so the figures match what an accessibility checker will tell you rather than approximating it.
How to Use Color Palette Generator
- Choose a base color using the color picker
- Select a harmony type (complementary, analogous, etc.)
- View the generated palette
- Copy color codes (HEX, RGB, HSL)
- Export the palette for your project
Formula Used by Color Palette Generator
Contrast ratio
(L₁ + 0.05) ÷ (L₂ + 0.05), L = 0.2126·R + 0.7152·G + 0.0722·B in linear light
- L₁, L₂
- the relative luminance of the lighter and darker color
- linear light
- sRGB values are gamma-encoded and must be linearized first, or the answer is wrong
- the weights
- green dominates perceived brightness, which is why green text on white is harder to read than it looks
Worked example
#2563eb, a common interface blue, with white text on it.
- Linearize each channel, then L = 0.2126·R + 0.7152·G + 0.0722·B
- L for #2563eb ≈ 0.1387, L for white = 1.0
- (1.0 + 0.05) ÷ (0.1387 + 0.05)
Result: 5.17:1 — clears 4.5:1, so white body text on that blue passes.
The harmonies, and what they are for
| Scheme | Hue relationship | Character |
|---|---|---|
| Complementary | Opposite, 180° apart | Maximum contrast. Strong for one accent against a dominant color; tiring in equal amounts |
| Analogous | Neighbors, ±30–60° | Calm and cohesive. Needs an accent from elsewhere or it reads flat |
| Triadic | Three points 120° apart | Vivid and balanced; best with one lead and two accents |
| Split complementary | The complement, split ±30° | Most of the tension of complementary with much less clash |
| Tetradic | Two complementary pairs | Richest and hardest to balance — mute all but one |
| Monochromatic | One hue, varying lightness | Always harmonious; hierarchy comes from contrast, not hue |
WCAG contrast thresholds
What the ratio on each swatch has to clear.
| Content | Minimum (AA) | Enhanced (AAA) |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text (18pt, or 14pt bold) | 3:1 | 4.5:1 |
| Interface components and graphics | 3:1 | — |
Source: WCAG 2.2 — Contrast (Minimum)
How to Read Your Result
Pick a dominant color, not five equal ones
The reason generated palettes often look worse in use than on the swatch grid is proportion. A common working rule is roughly 60% of a surface in a dominant neutral or light color, 30% in a secondary, and 10% in the accent. Five colors at equal weight reads as noise whatever the harmony.
A mid-tone that fails both is the trap
Colors around the middle of the lightness range frequently fail against black and white alike — the swatch shows a ratio near 3:1 either way. Those are fine as large blocks or borders and unusable behind body text. Finding that out here is cheaper than finding it out in an audit.
Contrast against black and white is the start, not the end
If you intend to put one palette color on another — a colored button on a colored section — that pair needs checking on its own. The ratios here tell you about text on each color, which covers most uses and not all of them.
Limitations & Accuracy Notes
- Contrast is reported against pure black and pure white only. Pairs of your own colors need checking individually.
- The harmonies are geometric constructions in HSL. They are a reliable starting point, not a design; proportion, context and content do most of the work.
- HSL lightness is not perceptual — two colors at the same L can look very different in brightness, which is exactly why the contrast figure is shown rather than inferred from the lightness value.
- No color-blindness simulation. Palettes that distinguish states by hue alone can be unusable for some viewers regardless of contrast.
- Output is sRGB. Wide-gamut colors in Display P3 or oklch are not generated.
Frequently Asked Questions
What are color harmonies?
What color formats can I copy?
What do the harmony types mean?
How many colors should a palette have?
Does a generated palette meet accessibility requirements?
Why do my colors look different on another screen?
Should I work in HSL rather than hex?
Is anything sent to a server?
References & Further Reading
- WCAG 2.2 — Contrast (Minimum) — The 4.5:1 and 3:1 thresholds and the contrast formula used on each swatch
- WCAG — relative luminance — The linearization step and the channel weights
- MDN — <hsl()> — The color space the harmonies are constructed in, and its limitations