Color Shades Generator
Design ToolsGenerate color tints & shades
:root {
--color-tint-100: #edf4fe;
--color-tint-90: #dbe8fd;
--color-tint-80: #caddfd;
--color-tint-70: #b8d2fc;
--color-tint-60: #a6c6fb;
--color-tint-50: #94bbfa;
--color-tint-40: #82aff9;
--color-tint-30: #70a4f8;
--color-tint-20: #5f99f8;
--color-tint-10: #4d8df7;
--color-base: #3b82f6;
--color-shade-10: #3676e0;
--color-shade-20: #306ac9;
--color-shade-30: #2b5fb3;
--color-shade-40: #26539d;
--color-shade-50: #204786;
--color-shade-60: #1b3b70;
--color-shade-70: #152f59;
--color-shade-80: #102343;
--color-shade-90: #0b182d;
--color-shade-100: #050c16;
}About Color Shades Generator
Generate tints and shades of any color for design systems.
Frequently Asked Questions
What is the difference between a shade and a tint?
A shade is created by mixing a color with black, making it darker. A tint is created by mixing a color with white, making it lighter. Together, shades and tints form a complete tonal range for any base color.
How many color variations does this tool generate?
This tool generates 10 shades (progressively darker toward black) and 10 tints (progressively lighter toward white) from your base color, giving you 21 total color steps including the original base color.
Can I export the palette for use in my project?
Yes. You can copy individual HEX values by clicking on any swatch, or export the entire palette as CSS custom properties or as a Tailwind CSS color configuration object ready to paste into your project.
Is my data safe?
Yes! All processing happens entirely in your browser. Your data is never sent to any server. No data is collected, stored, or transmitted.
How are the shade and tint steps calculated?
Each step blends the base color with black (for shades) or white (for tints) at evenly spaced intervals. Step 1 is closest to the base color, and step 10 is closest to pure black or pure white, creating a smooth gradient of tonal values.
Ad
728 × 90