Tint & Shade Generator
Generate lighter tints and darker shades of any color with precise HEX values for your designs.
Pro Tip: Easily inspect, convert, and harmonize palette swatches across HEX, RGB, and HSL.
How It Works
Create complete tint/shade scales from any color — similar to Tailwind CSS or Material Design color palettes. Get 10 levels from lightest to darkest with exact HEX codes.
01
Enter base color
Type a HEX color or use the picker.
02
View the scale
See 10 tints and 10 shades generated.
03
Copy values
Copy individual HEX codes or all as CSS variables.
Key Features & Capabilities
10-level tint and shade scale
Tailwind-like palette output
HEX, RGB, HSL for each step
One-click copy for any step
Export as CSS custom properties
Frequently Asked Questions
Tints add white to a color (lighter), shades add black (darker).
Related Utilities
Color Picker
Visual color picker with HEX, RGB, HSL, CMYK values, color history, and instant copy.
Color Tools
Color Palette Generator
Generate harmonious color palettes from any base color: complementary, analogous, triadic and more.
Color Tools
CSS Gradient Generator
Create beautiful linear and radial CSS gradients with live preview and ready-to-use code.
Color Tools
Your files are processed locally in your browser. No data is uploaded to any server.