Tint Generator

Free, instant, copy-ready — no signup.

Enter a hex code and get 19 lighter tints in 5% steps — from a barely-softer 5% to a whisper-of-color 95%. A tint is a color with white added to it: the hue doesn't change, it just gets lighter, softer, less intense. Pink is a tint of red; sky blue is a tint of blue; mint is a tint of green. Need darker versions instead? Use the shade generator, or get both directions in the tint and shade generator.

How Tint Generation Works

A tint is the base color mixed with white. The generator blends each RGB channel toward 255 by the chosen percentage p (0–1):

new = old + (255 − old) × p

40% tint of #9B59B6 — rgb(155, 89, 182):
 ├─ R: 155 + (255 − 155) × 0.40 = 195
 ├─ G: 89  + (255 − 89)  × 0.40 = 155
 └─ B: 182 + (255 − 182) × 0.40 = 211

Result: rgb(195, 155, 211) = #C39BD3

Because every channel moves toward 255 at the same relative rate, the hue is preserved — the whole ramp above is still the same purple, just progressively softer. Adding a flat number to each channel instead would clip unevenly at 255 and distort the color, which is why proportional blending is the standard. This is the classic formula behind tints and shades; if you want a single value with a slider rather than the full ramp, use the lighten color tool.

What Tints Are For

Modern interfaces lean heavily on tints — they're how you create soft backgrounds, subtle interactive states, and entire light-mode palettes without introducing new hues:

• Alert and status backgrounds. Almost every alert system works the same way: a colored border or icon in the base hue, and a very light tint of that hue as the background. Inspect the elements on Stripe, GitHub, or Vercel and the backgrounds are tints in the 85–95% range.
• Pastels. A pastel is a tint — specifically a high tint, roughly 60–90% toward white, where colors turn soft and chalky. A 10% tint is still vivid; nobody would call it pastel.
• Hover and focus states. The typical light-theme pattern: default state → slightly lighter tint on hover → slightly darker shade when active. For these you want tints in the 10–25% range — noticeable but not washed out.
• Selected and active states. Click a sidebar item in Notion or select a row in Airtable and the highlight is a tint of the app's accent color — subtle enough not to compete with content, visible enough to show what's selected.
• Light-mode surfaces. Some interfaces tint the entire background — not white, but a barely-perceptible tint of the brand color. Linear does this with a faint blue wash; it gives the app a cohesive feel without you consciously noticing the color.

One mistake to avoid: picking a "light version" by eye. Drag a color picker toward a whiter blue and you'll likely land on a value whose hue has drifted toward cyan — side by side with your base, it feels like a different family. A generated tint preserves the hue exactly, so the two colors look like they belong together because they mathematically do.

From Brand Color to Background System

A single brand color plus this ramp is a complete light-theme surface system. Using the default #9B59B6:

The 90% tint is light enough for dark text to sit on comfortably, the 70% card still reads clearly as "the brand color, softened," and the base stays reserved for buttons and accents. Because every layer shares one hue, the page feels designed rather than assembled. Swap in your own hex above and the same roles map onto the fresh ramp — or grab the precomputed version from the color library.

Frequently Asked Questions

• What is a tint generator?

  A tint generator takes a base color and mixes it with white in even steps, producing progressively lighter versions that keep the same hue. This page generates 19 tints of any hex code — from 5% to 95% lighter — each with a copy-ready hex value.

• What is a tint of a color?

  A tint is a base color mixed with white — the hue stays the same and only the lightness increases. Pink is a tint of red, sky blue is a tint of blue, and mint is a tint of green. The more white you add, the lighter the tint, until at 100% every color reaches pure white.

• How do I make pastel colors from a hex code?

  Mix the color with a lot of white — pastels are high tints, roughly 60–90% toward white. Enter your hex above and read the 60–90% rows of the ramp: those soft, chalky values are the pastel versions of your color. Lower tints like 10% are still vivid and wouldn't usually be called pastel.

• What tint percentage should I use for backgrounds?

  Very high tints work best: alert and status backgrounds in production interfaces typically sit in the 85–95% range, page washes around 90–95%, and card surfaces around 70–85%. For interactive states like hover, use much lower tints — 10–25% — so the change is noticeable but not washed out. The tint percentage chart maps more use cases to exact steps.

• Do tints keep the same hue as the original color?

  Yes. Proportional blending moves every RGB channel toward 255 at the same relative rate, so the hue stays stable while saturation drops and lightness rises. That's why a tint reads as a softer version of the same color rather than a different color.

Related tools: shade generator · tint and shade generator · lighten a color · tint percentage chart · advanced scale explorer · color library