What is the Color Palette Generator?
Generate a full CSS colour palette - tints, shades, and complementary colours - from a single brand colour. Export as CSS custom properties.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the Color Palette Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Enter your brand colour
Type or paste a HEX value. The generator creates a 9 or 11-step scale from lightest tint to darkest shade.
Adjust the scale algorithm
Choose between linear, HSL-based, or perceptual (oklch) scaling. Perceptual scaling produces consistent lightness steps across different hues.
Export as CSS custom properties
Click Export to copy the full :root block with numbered steps (50-900). Paste into your design token file.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Generated from #6C2EF5 */
:root {
--color-50: #f3eeff;
--color-100: #e2d2fe;
--color-200: #c4a5fd;
--color-300: #a678fb;
--color-400: #894bf9;
--color-500: #6C2EF5; /* base */
--color-600: #5a26cc;
--color-700: #471da3;
--color-800: #35147a;
--color-900: #220c52;
}Paste this into your global CSS file. Reference shades with var(--color-500) throughout your components.
Pro tips for better results
Use the 500 step as your base colour
Naming the base colour 500 gives you room for 4 lighter tints (100-400) and 4 darker shades (600-900), matching Tailwind and Material conventions.
Check contrast on every step you use for text
Step 700 and above on white typically meets WCAG AA (4.5:1) for body text. Step 500 often fails for small text - check before using it for copy.
Generate a neutral palette alongside brand colours
Every design system needs a grey scale. Run this generator with a desaturated version of your brand hue (reduce saturation to 5-10%) to get warm or cool neutrals.
Keep your palette to 2-3 hues maximum
Primary, secondary, and a neutral. More than 3 hues creates visual noise. Generate accent colours as tints of your primary rather than introducing new hues.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.