Shade & Tint Generator
Generate a scale of shades (darker) and tints (lighter) from any base color.
#3b82f6#3f84f6, #4387f6, #4789f7, #4a8cf7, #4e8ef7#3a7ff1, #397dec, #387ae8, #3678e3, #3575de--tint-100: #3f84f6;
--tint-200: #4387f6;
--tint-300: #4789f7;
--tint-400: #4a8cf7;
--tint-500: #4e8ef7;--shade-100: #3a7ff1;
--shade-200: #397dec;
--shade-300: #387ae8;
--shade-400: #3678e3;
--shade-500: #3575de;About This Tool
The Shade & Tint Generator creates a complete color scale from any base color by generating darker shades and lighter tints in equal steps. Used by designers building design systems, developers creating Tailwind configs, and anyone needing organized color palettes.
Input a base color and choose how many steps you want (typically 5–10). The tool automatically generates darker versions (shades) by reducing lightness and lighter versions (tints) by increasing lightness. All colors are output in hex, RGB, and HSL formats for easy integration.
Ideal for creating component libraries, theming systems, and accessible color palettes. Runs entirely in-browser, no data sent anywhere, and free with no signup required.