CSS Color Palette & Picker Tool
Pick one base color and get a full, usable palette back — tints, shades, and a matching accent — each swatch with its hex, rgb, hsl, and a ready CSS custom property.
Click any swatch to copy that color's code in the format above.
What a color harmony actually generates
Tints and shades keep your base color's hue and saturation and shift only its lightness, up and down in steps, to build a usable light-to-dark ramp for a single hue. Analogous, complementary, and triadic palettes instead rotate the hue itself around the color wheel — 30° steps for analogous, 180° for a direct complementary pair, and 120° steps for a triadic trio — to give you colors that relate to each other by geometry, not guesswork.
Using the generated color code
Every swatch is available as a hex code, an rgb() function, an hsl() function, or a ready-made CSS custom property — copy the whole palette as a :root block of variables to drop straight into a stylesheet.
Worked example: one violet, seven shades
Starting from the default base color #7c5cf0 on the Tints & shades setting, the generator writes seven custom properties:
:root {
--shade-1: #220b75;
--shade-2: #3611bb;
--shade-3: #562dec;
--shade-4: #7c5cf0;
--shade-5: #b4a2f6;
--shade-6: #ede8fd;
--shade-7: #f0ecfd;
}
The base color has a hue of 253°, saturation of 83%, and lightness of 65%. Each shade keeps the hue and saturation and shifts only the lightness, by −40, −25, −10, 0, +15, +30, and +45 percentage points, clamped to a range of 4% to 96%. The base lands in the middle as --shade-4. The last step would be 110%, so it's capped at 96%, which is why --shade-7 sits very close to --shade-6.
The contrast columns matter if you plan to put text on these colors. WCAG asks for at least 4.5:1 for normal body text and 3:1 for large text. The base color clears 4.5:1 against white by a small margin (4.52:1), and the two lightest shades are too pale to carry white text but work well as backgrounds for dark text.
The default shades with contrast ratios
| Variable | Hex | Lightness change | Contrast on white | Contrast on black |
|---|---|---|---|---|
| shade-1 | #220b75 | −40 | 15.30:1 | 1.37:1 |
| shade-2 | #3611bb | −25 | 10.74:1 | 1.95:1 |
| shade-3 | #562dec | −10 | 7.04:1 | 2.98:1 |
| shade-4 | #7c5cf0 | 0 (base) | 4.52:1 | 4.65:1 |
| shade-5 | #b4a2f6 | +15 | 2.22:1 | 9.44:1 |
| shade-6 | #ede8fd | +30 | 1.20:1 | 17.56:1 |
| shade-7 | #f0ecfd | +45 (capped) | 1.16:1 | 18.12:1 |
Frequently asked questions
What makes colors 'harmonious' rather than random?
Harmonious palettes are built from consistent relationships on the color wheel — complementary (opposite hues), analogous (adjacent hues), or triadic (evenly spaced hues) — rather than picking hues independently, which is why this generator builds new palettes from those relationships.
Should I use HSL or hex values in my CSS?
Both render identically — it's purely a workflow preference. HSL (hue, saturation, lightness) is often easier to adjust by hand, since nudging just the lightness value keeps a color's hue and intensity consistent while hex requires recalculating all three channels.
How do I check if my palette has enough contrast for text?
A foreground/background pair needs a contrast ratio of at least 4.5:1 for normal text to meet WCAG AA accessibility guidelines. It's worth checking your palette's actual text/background pairings against that ratio, not just eyeballing brightness.
Can I lock one color and regenerate the rest of the palette around it?
That depends on the specific generator, but the underlying idea — fixing a brand color and deriving the rest of the palette's hues, tints, and shades from it — is exactly how most professional color systems are built, rather than picking every color independently.
