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 mix your base color with white or black 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.