Tint Shade Generator
Generate tints and shades from a base HEX color.
Tint Shade Generator mixes a base HEX toward white and black to produce evenly spaced tints and shades for design tokens and UI scales.
How it works
Enter a base color. The tool blends toward white for tints and black for shades, then lists the resulting HEX values.
Benefits
- Predictable tint/shade steps
- Token-friendly HEX lists
- Local mixing
- Fast iteration on scales
Use cases
- Build gray or brand ramps
- Chart series colors
- Hover/active state variants
- Design system foundations
Best practices
- Name steps by role not by index alone
- Check contrast on extreme ends
- Keep midtones for interactive states
- Document the base HEX that generated the ramp
Common mistakes
- Using pure black/white mixes when perceptual scales are needed
- Skipping AA checks on tinted text
- Generating too many unused steps
- Mixing tints from different bases in one component
Privacy
Tint Shade Generator processes colors locally in your browser. ToolHub does not receive your inputs unless you enable on-device history.
Frequently asked questions
- How are tints calculated?
- The base RGB is mixed toward white at fixed ratios.
- How are shades calculated?
- The base RGB is mixed toward black at fixed ratios.
- Is this perceptual OKLCH?
- No—this tool uses simple sRGB mixes for predictability.
- Does it upload my color?
- No. Mixing stays on your device.
- Can I choose step count?
- The default produces four tints and four shades plus the base.
Related tools
Palette Generator
color
Generate complementary, analogous, and triadic palettes from a base HEX.
- color
- palette
- design
Color Mixer
color
Blend two HEX colors with a mix ratio.
- color
- palette
- design
Complementary Color Finder
color
Find complementary and split-complementary colors.
- color
- palette
- design
CSS Color Name Converter
color
Map CSS color names to HEX and back.
- color
- palette
- design
Gradient Generator
color
Build CSS linear-gradient strings with a live preview.
- color
- palette
- design
HSL Adjuster
color
Tune hue, saturation, and lightness from a base HEX.
- color
- palette
- design