Design Tools
Color Tint Generator
🔒 Körs i din webbläsare
Generate 10 tints of any hex color by mixing it with white at 10–100% steps. Copy individual hex values or export all tints as CSS variables. Free, instant, no signup.
Så här använder du det här verktyget
- Enter a base hex colour.
- The tool mixes it with white at 10–100% to produce ten tints.
- Copy individual tints or export them as CSS variables.
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
10% tint
#ea6d1d20% tint
#ed7d3630% tint
#ef8e4f40% tint
#f19e6850% tint
#f4ae8260% tint
#f6be9b70% tint
#f8ceb480% tint
#fadfcd90% tint
#fdefe6100% tint
#ffffffVanliga frågor
- How are tints calculated?
- The base colour is blended with white at 10% through 100%, so each step adds more white and produces a progressively lighter, softer version of the original.
- When would I use tints?
- For backgrounds, hover states, and pastel palettes where you want a lighter member of the same hue rather than a fully different colour.
- Can I export the whole set?
- Yes. Copy individual tints, or export all ten at once as CSS variables to drop into a stylesheet.
- Does generating tints involve a server?
- No. The colour mixing happens in your browser; the hex you enter never leaves it.