TINT & SHADE GENERATOR
Tint & Shade Generator
Generate lighter tints and darker shades of any color with precise HEX values for design systems.
- 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
Tip
Easily inspect, convert, and harmonize palette swatches across HEX, RGB, and HSL.
How It Works
3 simple steps01
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.
Frequently Asked Questions
Tints add white to a color (lighter), shades add black (darker).
Related Utilities
Popular
Color Picker
Visual color picker with HEX, RGB, HSL, and CMYK values, color history, and instant copy.
Color ToolsOpen tool
Color Palette Generator
Generate harmonious color palettes from any base color: complementary, analogous, triadic, and more.
Color ToolsOpen tool
CSS Gradient Generator
Create beautiful linear and radial CSS gradients with live preview and ready-to-use CSS code.
Color ToolsOpen tool
Your files are processed locally in your browser. No data is uploaded to any server.