Shade & Tint Generator
Generate a Tailwind-style 50–900 color scale from any base color (500 = your pick).
CSS variables
--color-50: #F3F6FC; --color-100: #E2EBF8; --color-200: #BED3F4; --color-300: #93B7F1; --color-400: #699DF2; --color-500: #3C83F6; --color-600: #1162E4; --color-700: #1048A2; --color-800: #0D3068; --color-900: #07152C;
Shades vs tints+
Shades are darker variations of a color; tints are lighter. This tool builds a full 50–900 scale like Tailwind CSS, with your chosen color as the 500 step.
Using the scale+
Copy individual swatches or the full CSS variable block into your design system. Lighter steps (50–400) work for backgrounds; darker steps (600–900) for text and emphasis.