Generate a full range of tints and shades from any colour. Perfect for building Tailwind palettes, design tokens and UI component colour scales.
Use the colour picker or type a HEX code. The shades will radiate from this colour toward white and black.
Drag the slider to control how many shades are generated. More steps = smoother transitions.
Click any swatch to copy its HEX code. Use Copy All HEX to grab the full palette as a comma-separated list.
A tint is created by mixing a colour with white, making it lighter. A shade is created by mixing a colour with black, making it darker. Together, they form the full spectrum of a hue\ lightness range.
The tool generates up to 19 steps: 9 tints (lighter), the base colour, and 9 shades (darker). You can adjust the step count using the slider.
Yes. The scale naming (50, 100, 200…900) matches Tailwind\ colour palette convention. Copy the HEX values and paste them into your tailwind.config.js as a custom colour.
Yes. Click the Copy All button to copy every HEX code in the palette as a comma-separated list. You can also click any individual swatch to copy just that value.
The tool uses the HSL (Hue, Saturation, Lightness) colour model to generate shades. This preserves the hue and saturation while smoothly interpolating the lightness from near-white to near-black.
Yes. All shade generation happens in your browser. No data is sent to any server.
