Design Tools

Color Tint Generator

🔒 Działa w Twojej przeglądarce

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.

Jak używać tego narzędzia

  1. Enter a base hex colour.
  2. The tool mixes it with white at 10–100% to produce ten tints.
  3. Copy individual tints or export them as CSS variables.
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
10% tint
#ea6d1d
20% tint
#ed7d36
30% tint
#ef8e4f
40% tint
#f19e68
50% tint
#f4ae82
60% tint
#f6be9b
70% tint
#f8ceb4
80% tint
#fadfcd
90% tint
#fdefe6
100% tint
#ffffff

Często zadawane pytania

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.
guide

How to Create Color Tints in CSS

How to Create Color Tints in CSS — free online tool and guide with examples.

Więcej darmowych narzędziZobacz wszystkie 492 →
Merge PDFsCompress ImageJSON FormatterPassword GeneratorVAT CalculatorQR Code Generator
Color Tint Generator | brevio