The arithmetic behind each scheme
Your base colour is converted from hex into HSL — hue as an angle, saturation and lightness as percentages — and every swatch on the page is that conversion with one number changed. The harmonies rotate the hue and leave saturation and lightness untouched. The tint and shade ramp does the opposite: it holds hue and saturation fixed and steps lightness down from 92% to 20% in nine even stops of nine points each.
| Scheme | Hue offsets from the base | What it tends to be used for |
|---|
| Complementary | 0°, 180° | Maximum separation between two colours — an accent against a dominant colour. |
| Analogous | −30°, 0°, +30° | Quiet, low-tension schemes where nothing competes for attention. |
| Triadic | 0°, 120°, 240° | Three-way balance; usually needs one colour to dominate and the other two to be used sparingly. |
| Tetradic | 0°, 90°, 180°, 270° | Two complementary pairs. The hardest to control — four strong colours rarely all belong. |
| Tints & shades | Hue fixed; lightness 92% → 20% | Surfaces, borders, disabled states and text, all provably the same hue. |
The random button works differently: it picks a hue at random but constrains saturation to 55–90% and lightness to 45–60%, then builds a five-colour set from an analogous trio, a desaturated complement, and a near-white tint of the same hue. That shape — several close colours, one opposing accent, one near-neutral — is a more usable starting point than five unrelated colours, and the padlock on each swatch keeps the ones you like while you regenerate the rest.
What HSL gets wrong
Equal lightness in HSL is not equal brightness to your eye. This is the single biggest caveat on this page. Rotate the hue at a fixed lightness of 50% and you get a yellow that looks luminous next to a blue that looks nearly black, because HSL's lightness is a simple arithmetic construct rather than a perceptual measurement — human vision is far more sensitive to green than to blue. So a triadic set generated here will be mathematically even and visually lopsided. Expect to hand-correct the lightness of the yellows and cyans downward, and the blues and violets upward. Colour spaces designed for this, such as OKLCH, hold perceived lightness steady across a hue rotation; HSL never has.
"Complementary" here means the RGB complement, not the painter's one. On the HSL wheel, the opposite of red is cyan. On the traditional artist's wheel used in most colour theory teaching, the opposite of red is green. Neither is wrong, but they are different systems and this tool uses the first. If a scheme feels unlike what you expected from a colour-theory book, that mismatch is usually why.
Nothing here checks contrast. The hex label on each swatch flips between black and white at a lightness of 60%, which is a rough legibility hack and not a contrast calculation — it will happily show you a combination that fails accessibility requirements. Colours are also plain sRGB hex, so there is no wide-gamut or P3 output, and the exports name colours color-1 through color-n in display order rather than by role.
Turning a scheme into a usable palette
Start with a base at moderate lightness — somewhere around 45–60% is why the random generator restricts itself to that band. Because the harmonies inherit the base's lightness exactly, a base picked near white or near black produces a harmony set where every colour is near white or near black and the hue differences barely register.
Then split the work. Harmonies give you a hue relationship, not a design system: pick one hue to carry most of the interface, one accent from the harmony row, and derive everything else — surfaces, borders, muted text, hover states — from the tint and shade ramp of the dominant hue. That is what keeps a palette coherent, and it is the reason the ramp has nine steps rather than three. A common working split is roughly 60% dominant, 30% secondary, 10% accent.
Check text contrast before you commit. A pairing that looks fine on a large monitor can be unreadable at body-text size, and the requirement — 4.5:1 for normal text — is a measurement, not a judgement call. Run each foreground and background pair through the contrast checker and adjust with the ramp rather than by inventing new colours.
One detail about the export buttons: they collect every unique swatch currently on the page, deduplicated, in display order — the full nine-step ramp plus all four harmony rows, not just the five random swatches. That is usually around twenty colours. The CSS and SCSS files are meant as a paste-and-rename starting point; give them semantic names as you go, because --color-7 tells nobody anything six months later. If you are working from a photograph instead of a base colour, the image colour palette extractor quantises the image itself, and the gradient generator takes two of these colours and interpolates between them.