🔧

Color Shades Generator

Generate tints and shades for any color. Perfect for building design systems and color scales.

100#e7f0fe

200#cee0fd

300#9ec1fa

400#6da2f8

500#3c83f6

600#0b64f4

700#0950c3

800#073c92

900#052861

1000#021431

How to Use

Enter your base color as a HEX, RGB, or HSL value. The generator automatically produces a full scale of 10-20 variations — from the lightest tint (mixing with white) to the darkest shade (mixing with black).
Adjust the number of steps and the lightening/darkening increment. Choose between linear interpolation (uniform steps) or perceptual easing (steps that feel visually even to the human eye, which is more sensitive to light changes than dark changes).
Export your color scale. Copy individual HEX values, download as a CSS custom properties block for your design tokens, or copy all values at once in a format ready for Tailwind config, Figma, or any design system tool.

What's the difference between a tint and a shade?: A tint is created by mixing a color with white, making it lighter. A shade is created by mixing with black, making it darker. A tone is created by mixing with gray (both black and white). The generator can produce tints, shades, or both from your base color.
How many shades do I need for a design system?: Most design systems use a 10-step scale (50, 100, 200… up to 900) inspired by Material Design and Tailwind CSS. This gives you enough granularity for backgrounds, borders, text, and hover states. The generator defaults to a 10-step scale but you can customize the count.
Can I adjust the lightness curve?: Yes — switch between linear and perceptual interpolation. Linear mode spaces steps evenly in HSL lightness (mathematical), while perceptual mode accounts for how the human eye perceives brightness non-linearly. Perceptual mode typically produces more usable, visually balanced scales.