Pick a color. Get a complete scale. Copy to your design system.
A tint is created by mixing a color with white, making it progressively lighter. Tints are essential for backgrounds, hover states, and subtle UI surfaces where full saturation would be overwhelming.
A shade is created by mixing a color with black, making it progressively darker. Shades are ideal for text, borders, active states, and creating depth in layered interfaces.
A complete color scale — from near-white to near-black — gives you every token you need for a full design system. Tailwind CSS, Material Design, and Radix UI all use this exact pattern.
5 steps suits simple projects or brand palettes. 10 steps is the standard for design systems, matching Tailwind's scale. 15 steps gives granularity for complex component hierarchies.
A tint is a color made lighter, as if mixed with white. A shade is a color made darker, as if mixed with black. This generator keeps the hue and saturation and moves lightness toward 95% for tints and toward 5% for shades.
Enter your base hex code, choose 5, 10, or 15 steps, and copy the scale as CSS variables or a JS array. The steps are named from 50 for the lightest up to 900, and in 5 and 10 step scales your base color lands on 500.
They order the scale from light to dark. Low numbers are tints, high numbers are shades, and 500 is usually the base color. Tailwind CSS and many design systems use the same naming, so the variables slot into existing code.
A :root block with one variable per step, such as --color-500: #2e86ab; /* base */. The base color is marked with a comment. The JS array export gives the same hex codes as a JSON list.
Pick a Zaps template for your next post, story or reel, add your photos and match it to your palette.