Shade generator
Build tints, shades, harmonies and accessible palettes from any base colour — click a swatch to copy. Runs entirely offline.
Open Shade generator →What is the shade generator?
A free, offline colour tool that builds tints, shades, harmonies and accessible palettes from any base colour. Generate lighter and darker steps, check contrast, explore complementary and analogous schemes, and click any swatch to copy it. Everything runs in your browser, so nothing is uploaded.
How to use Shade generator
- Set a base colour — Enter a HEX value (or add several base colours) to seed the palette. Choose how many steps to generate — 5, 10 or 20.
- Pick how shades are mixed — Switch the interpolation between HSL and OKLCH, and set whether values display as HEX or RGB.
- Explore the tabs — Use Palettes for tints and shades, Contrast to test a foreground and background pair against a sample text preview, and Harmonies for complementary, analogous and triadic schemes.
- Copy or export — Click any swatch to copy its value, or export the palette as a PNG, CSS variables, or a Tailwind colour config.
Frequently asked questions
How do I copy a colour?
Click any swatch and its value is copied to your clipboard in the format you have selected — HEX or RGB.
What is the difference between HSL and OKLCH?
Both generate the tint and shade steps, but OKLCH spaces them more evenly to the human eye, so brightness changes look more consistent across the scale.
Can I check accessibility?
Yes. The Contrast tab lets you choose a text and background colour and shows the pair on a sample heading and body text so you can judge readability.
What can I export?
You can export the palette as a PNG image, as CSS custom properties (:root variables), or as a Tailwind colour config for your theme.
Does it work offline?
Yes. All the colour maths runs in your browser, so the tool works offline and nothing you enter is uploaded.
Tips
- Try OKLCH interpolation for smoother, more even lightness steps across a scale.
- Use the Contrast tab to confirm text and background pairs are easy to read before you ship them.
- Export to CSS variables or a Tailwind config to drop the palette straight into a project.