Color Shades Generator
Turn one color into a complete design-ready scale — 10 tints and 10 shades plus CSS variables.
:root {
--color-tint-100: #f1f1fe;
--color-tint-90: #e3e3fc;
--color-tint-80: #d4d5fb;
--color-tint-70: #c6c7fa;
--color-tint-60: #b8b9f9;
--color-tint-50: #aaacf7;
--color-tint-40: #9c9ef6;
--color-tint-30: #8e90f5;
--color-tint-20: #7f82f4;
--color-tint-10: #7174f2;
--color-base: #6366f1;
--color-shade-10: #5a5ddb;
--color-shade-20: #5153c5;
--color-shade-30: #484aaf;
--color-shade-40: #3f4199;
--color-shade-50: #363883;
--color-shade-60: #2d2e6e;
--color-shade-70: #242558;
--color-shade-80: #1b1c42;
--color-shade-90: #12132c;
--color-shade-100: #090916;
}Frequently Asked Questions
What is the difference between a tint and a shade?
A tint mixes the base color towards white (lighter), a shade mixes it towards black (darker). This tool builds 10 even steps each way, with the pure base color in the middle of the scale.
How do I use the scale in a design system?
Assign roles: light tints for backgrounds and hover states, the base for primary actions, dark shades for text and borders. The CSS variables output names them --color-tint-10 … --color-base … --color-shade-100 so you can paste the block straight into your stylesheet.
Is a simple white/black mix a good scale?
For most UI work, yes — it keeps hue constant, which looks clean and predictable. Brand designers sometimes shift hue slightly at the extremes for richer scales, but an even mix is the reliable default most design systems start from.
Can I copy a single color quickly?
Click any swatch in the strip or grid and its hex value is copied to your clipboard. The grid also shows each step's name so you can reference it in the CSS variables.
Related Tools
Color Palette Generator
Pick a base colour and get harmonies, tints, shades and a full tonal scale.
Color Code Converter
Convert between HEX, RGB, HSL, and other color formats.
Random Color Generator
Get a random colour with hex, RGB and HSL, plus a ready-made matching palette.