Color Shades & Tints Generator
Generate shades and tints from any hex color instantly in your browser — nothing is uploaded.
Generate color shades and tints from any base color
Enter a hex color and choose how many steps you want. The tool produces two scales: shades blend the base color toward black, and tints blend it toward white. Click any swatch to copy its hex value. The scales are evenly distributed so the steps form a smooth, predictable ramp suitable for design systems, CSS custom properties, or Tailwind palette definitions.
Each swatch shows its hex value on hover. The base color appears between the two scales so you can see the full range at a glance. Everything is computed client-side — nothing is uploaded.
FAQ
What is the difference between a shade and a tint? A shade mixes the color with black (darker), while a tint mixes it with white (lighter). Together they create a complete lightness scale.
Can I use the output in Tailwind? Yes. Map the hex values to Tailwind color keys (50 through 950) by assigning the tints to the lighter keys and the shades to the darker keys.