What the schemes actually do
Every scheme here converts the base to HSL, adds a fixed number of degrees to the hue and converts back, holding saturation and lightness where they were. Complementary adds 180 and gives you the strongest available contrast in hue. Split complementary takes 150 and 210, which keeps most of that tension while dropping the vibration you get from two saturated opposites sitting next to each other. Analogous stays within 60 degrees either side and reads as calm because the eye barely registers the shift as a change of color at all. Triadic and tetradic space three or four hues evenly around the wheel and are difficult to use at full saturation without something looking like a toy.
Because saturation and lightness are held constant, the output is the theoretical version of each scheme rather than a finished palette. Real palettes almost never keep every color at the same saturation. The usual working method is to take the hues from here, then push the accent up in saturation, pull the supporting colors down, and let the neutral come from the darkest step of the nine-step scale rather than from pure grey.
Reading the contrast figures
Under each swatch are two WCAG ratios: the color against white text and against black text. Body text needs 4.5:1, large text needs 3:1, and 7:1 is AAA. The label on the swatch itself is drawn in whichever of the two wins, which is why some swatches flip from white to black lettering partway along a scale — that is the crossover at a background luminance near 0.179 doing its job.
The pattern worth noticing is that mid-lightness saturated colors frequently fail both. A vivid mid orange or mid green often sits between 3 and 4.5 against both white and black. There is no text color that rescues it; the background has to move.
The nine-step scale
Design systems that number colors 100 through 900 are describing a lightness ramp with a fixed hue. The steps here are lightness 95, 88, 78, 65, 50, 40, 30, 20 and 12, which spaces them roughly evenly in perceived terms rather than in raw numbers. In practice the 100 and 200 steps become backgrounds and hover states, 500 and 600 become buttons and links, and 700 through 900 become text and borders on light surfaces.
Holding saturation constant across a ramp is the part real systems break. Very light and very dark steps usually need saturation pulled down to avoid looking chalky at the top and muddy at the bottom, and hue is often rotated a few degrees toward warm at the dark end. Treat the ramp as scaffolding.
Copying it out
The CSS block at the bottom declares every generated color as a custom property on :root. Paste it above your own styles and reference the names — color: var(--shade-700), background: var(--shade-100). For a dark theme, the conventional move is to keep the same property names and redefine only the values inside a media query or a theme attribute, so nothing downstream has to know which theme is active.
One caveat on the wheel itself: this is the HSL wheel, which is what CSS and every browser use. Traditional color theory taught with paint uses the RYB wheel, where the complement of blue is orange rather than yellow. Neither is wrong, they are different models, but if a palette from here disagrees with what an art class taught you, that is the reason.
Questions people ask
Why do all six schemes look the same for my grey?
Because hue is meaningless at zero saturation. Grey has no position on the color wheel, so adding 180 degrees to its hue returns the same grey, and so does adding 120 or 90. The tool warns when saturation is under 8% for exactly this reason. If you want a grey family with some life in it, give it a few percent of saturation in the base — a blue-grey at S 8% and a warm grey at S 6% both read as neutral but hold together far better than pure #808080 across a nine-step ramp.
Can I paste an eight-digit hex with alpha?
You can paste it but the last two digits are ignored, and the palette comes back fully opaque. Alpha is not a property of the color so much as of the compositing, and every derived swatch would inherit an opacity that means something different against each backdrop. Generate the opaque palette here and apply transparency in CSS where you need it, with the color-mix function or an rgba value.
How many colors should a palette actually have?
Fewer than the generator hands you. A workable interface palette is typically one brand hue with a full lightness ramp, one neutral ramp, and two or three semantic colors for success, warning and error. The complementary and triadic outputs here are useful for finding those semantic hues or a single accent, not for populating an entire product. If you use six hues at full saturation, nothing on the page has priority over anything else.
Is my color uploaded to generate the palette?
No. The hue arithmetic, the HSL conversions and the contrast ratios all run in the page. Nothing about the color leaves the browser, and the tool works with the network disconnected.