Web Tools
Color Shades Generator
Generate a full scale of tints and shades from any base color. Output as visual swatches, CSS custom properties, or Tailwind CSS config. Uses HSL color space to preserve hue and saturation. Runs entirely in your browser — your data never leaves your machine.
color shades tints palette css tailwind design-system
Published May 29, 2026
All interactive tools run entirely in your browser. Your data never leaves your device.
How It Works
Enter a hex color and the tool generates a full lightness scale from lightest tint to darkest shade, preserving the original hue and saturation. The scale uses Tailwind-style step labels (50, 100, 200, …, 900, 950) and can be exported as CSS custom properties or a Tailwind config object. A native color picker makes it easy to experiment with colors visually.
Features
- HSL-based generation: preserves hue and saturation while varying lightness for natural-looking scales
- Tailwind-style labels: 50, 100, 200, …, 900, 950 step naming convention
- Configurable steps: 3 to 21 shade steps for fine or coarse gradations
- Three output formats: visual swatches, CSS custom properties, Tailwind config object
- CSS Variables output:
--color-50through--color-950with customizable prefix - Tailwind config output: copy-paste into your
tailwind.config.jscolors - Native color picker: visual color selection alongside hex input
- Base color indicator: highlights which shade matches closest to your input color
- Include pure black/white: optionally extend range to 0% and 100% lightness
- Multiple color formats: each shade shows hex, HSL, and RGB values
- 5 preset colors: Blue, Red, Green, Purple, Orange
- Private: runs entirely in the browser — no data transmitted
Use Cases
- Creating custom color scales for design systems
- Generating Tailwind CSS color palettes from brand colors
- Building consistent tint/shade ramps for UI components
- Exporting CSS custom properties for themed applications
- Exploring how a color looks across the full lightness spectrum