Tint & Shade Generator
Produces a scale of lighter tints and darker shades from a single base colour. A tint is the colour mixed toward white, a shade is mixed toward black — together they give you the full range a design system needs from one starting point.
Free, no signupRuns entirely in your browser
Input
Result
- Base Color
- #ef4444
- Tints (Lighter)
- #f15757, #f26969, #f47c7c, #f58f8f, #f7a2a2, #f9b4b4, #fac7c7, #fcdada, #fdecec
- Shades (Darker)
- #d73d3d, #bf3636, #a73030, #8f2929, #782222, #601b1b, #481414, #300e0e, #180707
About
What the Tint & Shade Generator does
Working from one base colour is what keeps an interface coherent. Hover states, disabled states, borders, backgrounds and focus rings should all be derived from the same hue rather than picked independently, which is how palettes drift into looking accidental.
How it works
Using the Tint & Shade Generator
- 1Choose your base colour.
- 2Tints are generated by blending progressively toward white.
- 3Shades are generated by blending progressively toward black.
- 4Each step is produced at an even interval.
- 5Copy any value from the resulting scale.
Use cases
What people use it for
- Building the colour ramp for a design system
- Creating hover and active states from a brand colour
- Generating background tints for alerts and badges
- Producing a set of chart colours from one hue
FAQ
Frequently asked questions
6 related
All tools →