Generate beautiful tints and shades from any base color
Color input
Color scale
All values
| Swatch | Label | Hex | |
|---|---|---|---|
| 50 | #f3f6fc | ||
| 100 | #e6edfa | ||
| 200 | #c2d5f5 | ||
| 300 | #87b0f2 | ||
| 400 | #3c83f6 | ||
| 500 | #3b82f6 | ||
| 600 | #1565e9 | ||
| 700 | #1853b3 | ||
| 800 | #183f80 | ||
| 900 | #142b51 | ||
| 950 | #0e1a2f |
Export
50: #f3f6fc 100: #e6edfa 200: #c2d5f5 300: #87b0f2 400: #3c83f6 500: #3b82f6 600: #1565e9 700: #1853b3 800: #183f80 900: #142b51 950: #0e1a2f
Base color details
The Color Shades Generator lets you create a complete palette of tints and shades from any base hex color in seconds. Choose a Tailwind-style 50–950 scale or define your own step count, then instantly copy the results as CSS custom properties, SCSS variables, JSON, or a ready-to-paste Tailwind config — perfect for designers and developers building consistent color systems.
A tint is created by mixing a color with white, making it lighter. A shade is created by mixing a color with black, making it darker. Together they form the full lightness range of a single hue.
Tailwind mode produces an 11-step palette labeled 50, 100, 200 … 900, 950 — identical in structure to Tailwind CSS's built-in color palettes. Your chosen color is placed at the 500 stop, and lightness is interpolated outward from there.
Yes. You can export as a plain hex list, CSS custom properties (:root { --color-primary-500: #3b82f6; }), SCSS variables, a JSON object, or a complete tailwind.config.js snippet — just select your format and click Copy.
Yes. The tool accepts both 3-digit shorthand (e.g. #f00, #abc) and full 6-digit hex codes (e.g. #ff0000). Both formats are parsed and the full expanded value is used for all calculations.