Color Palette Generator
HSL 163, 78, 22
The color palette generator builds a five-swatch palette from one base colour using five harmony rules, analogous, complementary, triadic, tetradic and monochrome. Harmonies are computed by rotating hue in HSL, which is the model every colour-wheel rule assumes, and the output copies as hex codes or CSS custom properties.
How it works
Each rule is a set of hue offsets from the base. Where a rule repeats a hue, the lightness is shifted so no two swatches in a palette are identical.
- Analogous, hues at -60, -30, 0, +30 and +60 degrees. Low contrast, reads as one colour family.
- Complementary, the base and its opposite at 180 degrees, plus lighter and darker steps.
- Triadic, three hues 120 degrees apart, the most balanced of the multi-hue rules.
- Tetradic, two complementary pairs 90 degrees apart. The hardest to use without one colour dominating.
- Monochrome, one hue at five lightness steps from 20 to 94 percent.
HSL is not perceptually uniform. Two hues 30 degrees apart can look far more different in the yellows than in the blues, so a rule that is mathematically even may not look even.
Examples
An analogous palette
Base
#0c6249
Harmony
Analogous
Result
Five swatches spanning hue 105 to 225 degrees, all at the base saturation
The base is a green at roughly hue 165. Analogous offsets of ±30 and ±60 keep everything in the green-to-blue range, which is why the palette reads as one family.
A monochrome palette
Base
#0c6249
Harmony
Monochrome
Result
Five swatches at hue 165, from 20 to 94 percent lightness
Only lightness changes, so this is the palette most likely to give usable text-on-background pairs. The extremes are far enough apart to meet contrast requirements.
Frequently asked questions
Why do two colours the same distance apart look unevenly spaced?
Because HSL is not perceptually uniform. The human eye distinguishes far more steps in the greens and yellows than in the blues, so a 30-degree rotation is a big visual jump in one part of the wheel and barely visible in another. Perceptual models such as OKLCH correct for this; the classical harmony rules are defined in terms of the wheel, so that is what this tool uses.
Do the generated palettes meet accessibility contrast requirements?
No. Harmony rules govern hue relationships, not contrast. Harmony rules say nothing about contrast. An analogous palette can easily produce five colours that all fail against each other. Check any text-on-background pair against a 4.5:1 target before using it.
Which harmony is easiest to use in a real design?
Monochrome or analogous, because a limited hue range is hard to get wrong. Tetradic gives four strong hues and almost always needs one dominant colour with the rest as accents, otherwise it fights itself.
What does the CSS variables option output?
Five custom property declarations named --colour-1 through --colour-5, ready to paste into a :root block. Rename them to something meaningful once you have decided which swatch does what.