Palette Generator
Generate a 5-color harmony palette from a single base color, using real hue-rotation math in HSL space — not a random shuffle or a fixed lookup table.
Click a swatch to lock it (stays put on regenerate) or press Space to reroll every unlocked color.
How it works
Starting from your base color's hue, saturation, and lightness, the generator rotates the hue by fixed offsets to produce related colors that stay harmonious by construction: an analogous pair at ±30° (colors that sit close together on the wheel and read as a cohesive family), a complementary color at 180° (the strongest possible contrast pair), and two triadic colors at 120°/240° (evenly spaced, high-contrast but less jarring than a single complement). Saturation and lightness are held constant across all five so the palette reads as one coherent set rather than five unrelated colors that happen to share a rotation. This fixed-offset approach is a deliberate simplification of a much larger space of palette-generation techniques — algorithmic palette tools can also vary saturation/lightness per step, sample from a curated image, or use perceptual color-difference targets in Lab/OKLCH space instead of raw HSL degrees, each producing a different character of result from the same starting color.
Worked example
From a base teal at HSL(180°, 60%, 45%): analogous partners land at 150° and 210° (a sea-green and a sky-blue-leaning teal), the complementary sits at 0° (a matching-intensity red), and the triadic pair lands at 60° and 300° (a golden yellow-green and a magenta-purple) — five colors that share saturation and lightness but span the full hue wheel in a structured, not-random pattern. Starting instead from a warm, low-saturation base like HSL(30°, 35%, 55%) (a muted terracotta) produces a noticeably gentler set: the same rotation offsets land at hues that are individually just as saturated, but because the base saturation was already modest, the whole resulting palette reads as earthy and restrained rather than the vivid, high-energy result the teal example produced — a useful reminder that the harmony math is hue-agnostic, but the character of the output still depends heavily on where you start.
When to use this tool
Use this when you're starting a new project or brand and need a complete, coherent five-color starting point from a single hex you already like, rather than picking five colors by eye one at a time. Building a category-axis palette for a chart or dashboard is another common reason to reach for it — the guaranteed even hue spacing of the triadic and complementary steps tends to keep data-visualization categories from blurring together the way five arbitrarily chosen colors sometimes do. If you only want pairing suggestions for one specific named CSS color rather than a full independent palette, the per-color /combinations/ pages or the Goes-With Generator give a more targeted two-to-five-color result built around that one anchor color specifically.
Precision & accuracy
Hue rotation is computed with floating-point precision internally and only rounded to whole-degree HSL values for display and hex conversion, so the five generated colors are reproducible every time for the same input and offsets — the main source of visual 'imprecision' isn't the math but the fixed ±30°/120°/180° offsets themselves, which are a color-theory convention, not a tunable parameter in this version of the tool. Because saturation and lightness are copied verbatim from the base color into all five outputs, an unusually extreme base (very low saturation, or lightness near 5% or 95%) can produce triadic/complementary partners that look nearly identical to each other despite being 120° apart in hue — an expected consequence of how little visual difference hue makes at the very dark or very light ends of the lightness range, not a flaw in the rotation math.
FAQ
What harmony rule does this use?
An analogous-plus-complementary-plus-triadic spread around your base hue in HSL space — five colors total, all derived by rotation, not lookup.
Why does my palette look muted or oversaturated?
Saturation and lightness are inherited from your base color and held constant across all five results — pick a base color at your target intensity first, since the generator varies hue, not intensity.
Can I export the palette as CSS variables?
Yes — use the CSS Variable Exporter tool with this palette's five hex values to get a ready-to-paste custom-property block.
Does the base color always appear in the output palette?
Yes — the base color you enter is always included as the first swatch alongside its four computed relatives, so you always have the original reference point to compare against.
Why do two of my five colors look almost the same?
This happens most often with a very dark or very light base color — at extreme lightness values, different hues become harder for the eye to tell apart even though they're mathematically well-separated in degrees, since lightness dominates the visual signal at those extremes.
Is this the same palette I'd get from the Color Harmonies tool?
Close but not identical in presentation — Color Harmonies shows each classical relationship (complementary, triadic, analogous, split-complementary) as separate labeled groups for comparison, while this tool commits to one combined five-color set; the underlying rotation math for the shared relationships is the same.