~/css/color-palette-generator
CSS Color Palette Generator
Pick one base colour and get a full palette: a colour harmony built from the colour wheel and a ten-step tint scale from very light to very dark. Copy the result as CSS custom properties ready for a design system.
Using the CSS Color Palette Generator
How colour harmonies work
Harmonies are positions on the colour wheel. Complementary pairs the base with the colour directly opposite. Analogous uses neighbours 30 degrees either side, which feels calm. Triadic spaces three colours evenly, 120 degrees apart, for a lively but balanced set. Split complementary and tetradic add more contrast; monochromatic keeps one hue and varies lightness.
What the tint scale is for
A design system needs more than one shade of each colour: a pale tint for backgrounds, mid tones for borders and icons, and dark shades for text. The scale here runs from 50 (lightest) to 900 (darkest), the naming convention most frameworks use, so it slots straight into an existing token set.
Checking contrast
A palette can look good and still fail accessibility. Before using a pair for text, check it with the colour contrast checker: body text needs a ratio of at least 4.5:1 against its background, large text 3:1. The darker end of the scale is usually where your text colours come from.
Using the variables
The output is a :root block of custom properties. Reference them anywhere with var(--brand-500), and you can change the whole site's colour later by editing one block.
Frequently asked questions
Which colour model does the scale use?
It adjusts lightness in HSL while keeping the hue, and slightly lowers saturation at the extremes so the lightest and darkest steps do not look neon or muddy.
Can I use the palette in Tailwind?
Yes. Copy the hex values into the colors section of your Tailwind config, or use the Tailwind config theme builder.
Is anything uploaded?
No. The palette is calculated in your browser.