The Color Palette Generator turns one starting hue into a finished set of harmonious colors. You pick a harmony mode and a base hue, and it lays out the partner colors for you: the default view is a complementary pair, blue #428CD7 and orange #D78C42, computed the moment the page loads. Everything runs in the browser, so the palettes you build stay on your device.
Five harmony modes, one slider
The five mode buttons are the whole point of the tool. Complementary gives 2 colors, the base hue and the hue 180 degrees away. Analogous gives 4, at 30 and 60 degrees on one side and 30 degrees on the other. Triadic gives 3, spaced 120 degrees apart. Tetradic gives 4, at 90, 180 and 270 degrees. Split-complementary gives 3, at 150 and 210 degrees. The hue slider runs from 0 to 360 and defaults to 210, a medium blue, and every offset wraps around the wheel, so a base of 340 in analogous mode produces hues at 340, 10, 40 and 310.
Fixed saturation and lightness, 65 and 55
There are no sliders for saturation or lightness, because both are constants: every color the tool outputs is computed at 65 percent saturation and 55 percent lightness, and only the hue changes, from mode to mode and as you drag the slider. That keeps every color in the palette at the same visual weight, so the set reads as one family rather than a random assortment. The conversion itself is the standard HSL to hex algorithm, and the result is always a 7-character uppercase hex code such as #428CD7.
The palette updates live
There is no Generate button. The palette is recomputed every time you click a mode button or move the slider, so the swatches track your input with no intermediate step. Click tetradic and you immediately get four swatches instead of two; nudge the hue by a few degrees and every swatch shifts in the same direction. That makes exploring fast: you can sweep the whole wheel in seconds and stop wherever the set looks right.
The randomize button
The dice button picks a whole-number hue between 0 and 359, jumps the slider to it, and keeps whatever mode you already chose, then the palette recomputes exactly as if you had dragged the slider there yourself. It is a quick way to shake off a color you keep circling back to: roll a few times until a base hue clicks, then fine-tune by hand with the slider.
Copying colors, one at a time or all at once
Clicking any swatch copies that single hex value to your clipboard, for example #8C42D7 from the analogous set at hue 210. The Copy All button instead copies the whole palette as a comma-separated list, like #428CD7, #D78C42 for the default complementary pair. Values are always uppercase six-digit hex, which pastes directly into CSS, design files, or a chat message without any reformatting.
Why the label on a swatch flips between white and dark
Each swatch shows its hex value on hover, in white or near-black text depending on how light the background is. The check is a simple luminance score: the red, green and blue channels are weighted 0.299, 0.587 and 0.114, and if the score is strictly greater than 186 the label uses dark text, otherwise white. That is a fast brightness heuristic, not a WCAG contrast ratio: it keeps the label legible, but it does not tell you whether text on that color would pass accessibility thresholds.
What the tool keeps, and where to go next
Nothing is stored and nothing leaves your browser; the mode and the hue live only on the page, and a reload resets the tool to complementary mode at hue 210. When you have a palette you like, put it to work: use the Color Converter to turn the hex values into rgb() or hsl() for your stylesheet, run the foreground and background pairings through the WCAG Color Contrast Checker before committing them to text, and hand the set to the CSS Gradient Generator if you want to stretch it into a banner. For the full method behind those contrast checks, the contrast checker guide walks through the four thresholds step by step.