1. Pick a Base Color
Drag the marker for hue and saturation, the outer ring for lightness.
2. Choose a Palette Type
Locked colors stay put when you switch.
3. Choose a Color Format
CSS Output
:root {
--color-1: #1e0557;
--color-2: #3809a4;
--color-3: #530df2;
--color-4: #8a5bf6;
--color-5: #c1a8fa;
}About CSS Color Palette Generator
Create color palettes on an interactive color wheel. Drag to pick a base color, choose a color harmony (monochromatic, analogous, complementary or triadic) or go fully random, and get a five-color palette instantly. Add or remove colors (2 to 10), lock the ones you like and regenerate the rest, open shades and tints for any color, and export your color scheme as CSS variables, a Tailwind config or JSON in HEX, RGB or HSL.
How to Generate a Color Palette
- 1Pick a base color on the color wheel: drag the marker to set the hue and saturation, and drag the outer ring to make it lighter or darker. You can also type a HEX value.
- 2Choose a palette type: monochromatic, analogous, complementary or triadic color harmony built around your base color, or Random. Small dots on the color wheel show where each palette color sits.
- 3Use the − and + controls to go down to 2 or up to 10 colors. Lock the colors you want to keep, then press Generate to refill only the unlocked ones.
- 4Click a swatch to edit it with the color picker, or open its shades & tints and click one to use it instead.
- 5Choose HEX, RGB or HSL and copy the color palette as CSS variables, a Tailwind config or JSON. The page URL updates as you go, so you can bookmark or share the palette.
Frequently Asked Questions
Hue runs around the color wheel, with red at the top, and saturation grows from the gray center to the vivid edge. Drag the large marker to choose your base color, and drag the handle on the outer ring to change its lightness. The palette updates as you drag, and hovering a dot on the wheel highlights the matching swatch.
Color harmonies are proven ways to combine hues based on their position on the color wheel. Monochromatic uses one hue at different lightness levels. Analogous uses neighboring hues for a calm look. Complementary pairs the base hue with its opposite for strong contrast, and triadic uses three hues spaced evenly around the wheel. Random ignores the base color and picks fresh, balanced colors.
Click the lock icon on that swatch. Generate, changing the palette type and changing the base color only replace unlocked colors, so locked ones stay exactly as they are.
Between 2 and 10 here. Five is the default because most website color palettes need a primary, a secondary, an accent and a couple of neutrals; add more with the + control when you need them.
Open the Tailwind tab and paste the snippet into tailwind.config.js. The colors become palette-1, palette-2 and so on, so classes like bg-palette-1 and text-palette-3 work straight away.
Yes. The colors are saved in the page URL (for example ?colors=8b5cf6-6d28d9-…), so copying the address shares the exact palette. Palettes you open here from other LoveCSS tools arrive with a clean address.
Related Tools
More free CSS generators you might like.