Color Palette Generator
Pick a base color and a scheme to instantly generate a harmonious color palette. Copy individual swatches or export as CSS variables.
Base
hsl(243, 75%, 59%)
Base shade
hsl(243, 75%, 44%)
Complement
hsl(63, 75%, 59%)
Complement shade
hsl(63, 75%, 44%)
CSS Variables
:root {
--color-1: #5048E5;
--color-2: #241CC4;
--color-3: #DDE548;
--color-4: #BCC41C;
}Frequently Asked Questions
What color schemes are available?
Complementary (opposite on the wheel), Triadic (three evenly spaced hues), Analogous (neighboring hues ±15–30°), Split-complementary (base + two colors adjacent to its complement), and Monochromatic (same hue, varying lightness).
How are the colors calculated?
All palettes are generated using HSL color math. The base color is converted to HSL, then the hue is rotated by specific angles depending on the chosen scheme.
Can I use the generated CSS variables directly?
Yes! Click 'Copy all' in the CSS Variables section to get a ready-to-use :root {} block with --color-1 through --color-N variables.
Can I click on individual swatches to copy?
Yes — clicking on either the color block or the HEX code below it copies the HEX value to your clipboard.
How Palettes Are Generated from a Base Color
The tool works in the HSL color space (Hue, Saturation, Lightness). The base color's hue is fixed, then different harmony algorithms rotate the hue wheel by specific angles to find colours that are mathematically related.
- Complementary — hue + 180° → high-contrast pair.
- Analogous — hue ±30° → harmonious, calm set of three.
- Triadic — hue + 120° + 240° → vibrant, balanced triangle.
- Split-complementary — hue + 150° + 210° → contrast without tension.
Using the CSS Variables Output
:root {
--palette-primary: #3B82F6;
--palette-complement: #F6953B;
--palette-analogous1: #3B63F6;
--palette-analogous2: #3BF6B4;
}
.button { background: var(--palette-primary); }
.badge { background: var(--palette-analogous1); }
.badge:hover { background: var(--palette-complement); }