Red → Tint Colors of Red

Base
#b91c1c

Last updated: April 2026

Tint Color — What It Means and Why Designers Use Tints Constantly

A tint color is a color with white added to it. That's the whole definition. Red plus white gives you pink. Blue plus white gives you sky blue. Green plus white gives you mint. The base hue doesn't change — it just gets lighter, softer, less intense.

If that sounds simple, it is. But simple doesn't mean obvious. Most people who search "tint color" are looking for one of two things: either they want to understand the term (maybe they heard it in a design review or a color theory class), or they want to create tint colors from a hex code they already have. This page covers both.

The Actual Definition (Without the Textbook Fluff)

In color theory, there are three ways to modify a base color:

Tint = base color + white. Lighter. Softer. Think: pastels, light UI backgrounds, subtle hover states.
Shade = base color + black. Darker. Deeper. Think: dark mode, pressed buttons, header bars.
Tone = base color + gray. Muted. Desaturated. Think: editorial design, luxury branding, muted labels.

All three keep the hue intact. A tint of blue is still blue — it's just a lighter blue. This is the critical distinction between a tint and a completely different color. Baby blue isn't a separate color from royal blue; it's a tint of the same blue.

Tint Color Examples You Already Know

You interact with tint colors every day without thinking about it. Here are familiar ones:

Pink is a tint of red. The #b91c1c you see in error messages becomes #fae8e8 when used as an error alert background — that pale salmon-pink surface is just red with a lot of white mixed in.

Sky blue is a tint of blue. The deep #1e40af you'd use for a link becomes #dbeafe as an info banner background. Same hue, different lightness.

Mint green is a tint of green. A success state might use #15803d for the checkmark icon and #dcfce7 for the background strip. Both are green — one is the base, the other is a 90% tint.

Lavender is a tint of purple. #7c3aed tinted heavily becomes the soft #ede9fe you see in selected-state highlights on apps like Notion and Linear.

Notice the pattern: designers don't pick these light colors randomly. They derive them from a base color by adding white — creating tints. This is why design systems have color scales (like Tailwind's 50–950 steps) — the lighter end is all tints.

How to Make a Tint Color from a Hex Code

If you have a specific hex code and want lighter versions of it, there are three routes. Pick whichever fits your workflow.

Route 1: Paste it into a tint generator

Fastest option. HexTints takes any hex code and shows the full tint range — from the original color all the way to near-white. Every swatch is click-to-copy. This is what we built the tool for: you shouldn't have to do math to get a lighter version of a color.

Route 2: Do it in CSS

If you're already writing CSS and want to derive a tint inline:

.alert-error {
  /* 90% tint — almost white, with a hint of red */
  background: color-mix(in srgb, #b91c1c, white 90%);
  border-left: 3px solid #b91c1c;
  color: #7f1d1d;
}

color-mix() works in Chrome, Firefox, Safari, and Edge — all current versions. For IE or very old browsers (which, let's be honest, you probably don't support anymore), use a pre-computed hex value instead.

You can also use HSL if you prefer that mental model:

:root {
  --red-h: 0;
  --red-s: 72%;
  --red-base: hsl(var(--red-h), var(--red-s), 42%);
  --red-tint-light: hsl(var(--red-h), var(--red-s), 85%);
  --red-tint-surface: hsl(var(--red-h), var(--red-s), 95%);
}

Adjust the third value (lightness) upward to create tints. The hue and saturation stay fixed.

Route 3: The formula (if you're curious)

For each RGB channel:

tint_value = base_value + (255 − base_value) × factor

Where factor is how much white you're adding: 0 means no change, 0.5 means 50% white, 1.0 means pure white.

Quick example with #b91c1c (a strong red) at 40% tint:

Result: #d57777 — a warm, muted rose. Still clearly red, but much softer.

You don't need to do this by hand. But knowing the formula helps you understand why proportional blending preserves the hue (all channels move toward 255 at the same relative rate) while adding a flat number doesn't (channels clip unevenly at 255, distorting the color).

Where Tint Colors Actually Get Used

This isn't an academic concept — tint colors are everywhere in production interfaces. Here's where you'll find them doing real work:

Alert and status backgrounds. Almost every alert system works the same way: a colored left border or icon in the base hue, and a very light tint of that hue as the background. It communicates "this is an error/warning/success" without screaming at the user. Stripe, GitHub, Vercel — they all do this. If you inspect the elements, the backgrounds are tints in the 85–95% range.

Selected and active states. When you click a sidebar item in Notion or select a row in Airtable, the highlight is a tint of the app's accent color. It's subtle enough to not compete with the content but noticeable enough to show what's selected.

Light-mode surfaces. Some interfaces tint their entire background — not white, but a very faint tint of their brand color. Linear does this with a barely-perceptible blue tint. It gives the app a "cool" feel without you consciously noticing the color.

Charts and data visualization. When you have multiple data series in the same hue family (like a stacked bar chart of Q1–Q4), you differentiate the bars using tints. Darkest for Q4 (most recent, most important), lightest for Q1. This creates visual hierarchy without introducing new colors that might clash or confuse.

Accessible text/background pairing. A very dark shade of your brand color for text + a very light tint for the background = high contrast + visual harmony. This is one of the most reliable patterns for hitting WCAG AA contrast ratios while keeping your palette cohesive.

The Mistake People Make With Tint Colors

The most common error: picking a "light color" by eye instead of deriving it as a tint of your base color.

Here's why this matters. Say your primary blue is #2563eb. You need a light blue background. You open a color picker, drag toward white-ish blue, and land on #a8d1f5. Looks fine in isolation. But #a8d1f5 has a different hue angle than #2563eb — it's shifted slightly toward cyan. Side by side, they feel like different color families. Subtly off.

If you instead generate a proper tint — say #dbeafe (an 85% tint of #2563eb) — the hue is exactly preserved. The two colors look like they belong together because they mathematically do. This is why tools and formulas exist: they enforce consistency that eyeballing can't.

Tint Color vs. Pastel — Are They the Same Thing?

Close, but not quite. A pastel is a tint — specifically a high tint, around 60–85% toward white. But not all tints are pastels. A 10% tint is still quite saturated and vibrant — nobody would call it "pastel." Pastels live at the far end of the tint spectrum where colors are soft, chalky, and low-contrast.

In web design, you'll use pastels for backgrounds and surfaces. For interactive states like hover effects, you want tints in the 10–25% range — noticeable but not washed out.

Frequently Asked Questions