Tints and Shades Generator - Color Variations
Generate tints (lighter) and shades (darker) of any color.
Full Scale
Supported formats
How it works
Enter your base color
Choose number of variations (5-20)
View tints (light) and shades (dark)
Copy codes or export to CSS
Privacy guaranteed
Local generation, no data collected.
Create a complete color scale
Start from a single color and generate a complete scale of variations. Tints go towards white, shades towards black. Result: a monochrome palette ready for your design system. Generate tints (with white), shades (with black) and tones (with gray) of a base color to build a coherent monochromatic gradient and variant system. Instantly convert between HEX, RGB, HSL, HSV and CMYK, adjust hue, saturation and lightness with real-time preview and check WCAG AA/AAA contrast for sRGB-compliant accessibility.
Tints for backgrounds
Light tints (10%, 20%, 30% of original color) are perfect for page backgrounds, cards and lightly colored content areas.
Shades for text and accents
Dark shades (70%, 80%, 90%) offer good contrast for text while staying in the same color family as your main elements.
Monochrome palette for coherent design
A palette of tints and shades guarantees perfect visual coherence. All elements share the same chromatic base, creating natural harmony. Ideal for minimalist and elegant interfaces.
CSS and SCSS export
Export your scale as CSS custom properties (--color-100, --color-200...) or SCSS variables. Ready for immediate integration into your projects.
Saturation adjustment
Very light or dark colors can appear washed out. Our saturation boost option maintains vibrancy across the entire scale, even at extremes.
Tailwind CSS compatibility
Tailwind export automatically generates shades 50 to 950 in expected format. Copy to your config and immediately use bg-primary-100, text-primary-800, etc.
Building a coherent color scale
Modern design systems (Material 3, Apple HIG) use scales of 9 to 11 shades per primary color. Our generator produces these scales automatically with uniform perceptual spacing via OKLCH.