AkousaGenerator
Color Shades Generator
Generate 11 shades and tints from any base color with CSS, Tailwind, SCSS, and JSON export.
Press Escape to reset, Ctrl+Enter to copy export.
Esc ResetCtrl+Enter Copy export
#1E417Brgb(30, 65, 123)hsl(217, 61%, 30%)
#234E94rgb(35, 78, 148)hsl(217, 62%, 36%)
#295BACrgb(41, 91, 172)hsl(217, 62%, 42%)
#2F68C5rgb(47, 104, 197)hsl(217, 61%, 48%)
#3575DDrgb(53, 117, 221)hsl(217, 71%, 54%)
#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)
#4F8FF7rgb(79, 143, 247)hsl(217, 91%, 64%)
#629BF8rgb(98, 155, 248)hsl(217, 91%, 68%)
#76A8F9rgb(118, 168, 249)hsl(217, 92%, 72%)
#89B4FArgb(137, 180, 250)hsl(217, 92%, 76%)
#9DC1FBrgb(157, 193, 251)hsl(217, 92%, 80%)
:root {
--color-50: #1e417b;
--color-40: #234e94;
--color-30: #295bac;
--color-20: #2f68c5;
--color-10: #3575dd;
--color: #3b82f6;
--color-10: #4f8ff7;
--color-20: #629bf8;
--color-30: #76a8f9;
--color-40: #89b4fa;
--color-50: #9dc1fb;
}About Color Shades Generator
The Color Shades Generator creates a complete 11-step scale of shades and tints from any base color. Shades are created by mixing the color with black (making it darker), while tints are created by mixing with white (making it lighter). The result is a professional color scale similar to Tailwind CSS's built-in color palettes.
How to Use
Enter any HEX color code in the input field or use the color picker. The tool instantly generates 5 darker shades and 5 lighter tints alongside the original color. Click any swatch to copy its HEX value. Use the export panel to download the full scale as CSS variables, Tailwind config, SCSS variables, or JSON.
Common Use Cases
- Creating complete color palettes for design systems
- Generating Tailwind CSS custom color scales
- Building accessible UI color systems with sufficient contrast
- Designing dark mode variants of brand colors
- Exporting color tokens for CSS or SCSS design systems
reviews.title
Frequently Asked Questions About Color Shades Generator
What is Color Shades Generator?
Color Shades Generator is a free online tool on akousa.net, a platform with 453+ browser-based utilities. Generate 11 shades and tints from any base color with CSS, Tailwind, SCSS, and JSON export. It runs entirely in your browser with no installation, signup, or data upload to any server.
How do I use Color Shades Generator?
Simply open Color Shades Generator on akousa.net, enter or upload your data, configure any options, and click the action button. Results appear instantly in your browser.
Is Color Shades Generator free?
Yes, Color Shades Generator is completely free to use with no limitations. There is no signup, no ads, and no file size restrictions. All 453+ tools on akousa.net are free and open to everyone.