Tint and Shade Generator

Free, instant, copy-ready — no signup.

Enter a hex code and get 10 lighter tints and 10 darker shades instantly, every value computed with the classic mix-with-white and mix-with-black formulas. You pick a perfect brand color, and then the real work begins — deriving every variant you'll need for backgrounds, text, borders, hover states, and dark-mode surfaces. This tool does the deriving; you copy what you need.

How the Generator Works

Both directions use proportional blending. A tint moves each RGB channel toward white; a shade scales each channel toward black. For a chosen percentage p (0–1):

tint:  new = old + (255 − old) × p
shade: new = old × (1 − p)

20% of #2D6A4F — rgb(45, 106, 79):
 ├─ tint:  rgb(87, 136, 114) = #578872
 └─ shade: rgb(36, 85, 63)   = #24553F

Because every channel moves proportionally, the hue stays essentially stable across the whole ramp — a tint of green is still green, just softer, and a shade of green is still green, just deeper. Simple linear RGB interpolation doesn't have this property: it tends to shift hue at the extremes, which is why blues drift toward purple and reds toward orange in cheaper tools. The formulas above are the classic tint and shade math, and this page shares its implementation with every other HexTints tool.

Prefer a single value at a time with a slider? Use the lighten color and darken color tools — same math, one percentage at a time.

Tints, Shades, and When to Use Each

Tints and shades are opposite halves of the same system — the tint vs shade page covers the theory, but here is the practical split:

• Hover and focus states — in light themes the typical pattern is: default state → slightly lighter tint on hover → slightly darker shade when pressed. Random color changes don't feel like state changes; tints and shades of the same color do.
• Backgrounds and surfaces — very high tints (80–95%) of a semantic color power alert banners, selected rows, and input focus backgrounds. They tie the surface into your color system, where plain gray would feel disconnected.
• Text on light surfaces — deep shades (60–80%) of the same hue give you high contrast and visual harmony. Pairing a very light tint background with a very dark shade of text from the same family is one of the most reliable ways to pass WCAG — verify the pairing in the contrast checker.
• Pressed states and dark mode — shades in the 10–20% range make convincing active states, and the deep end of the shade ramp (75–95%) becomes dark-mode background and card surfaces.

Building a Full Palette from One Hex

The reason to generate tints and shades together is that one hex code can become an entire design-system scale. Computing a 10-step tint scale and a 10-step shade scale by hand means running the formula 60 times (3 channels × 20 steps) — and hand-picked values drift, so the jump between step 3 and step 4 ends up twice as large as the jump between step 6 and step 7. A generator uses uniform increments, so the scale stays even, and when you change your mind about the base color you regenerate the whole thing in seconds.

Map the generated values to custom properties and you have a tokenized scale:

:root {
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6; /* base */
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e3a8a;
  --blue-900: #1e3050;
  --blue-950: #0f1729;
}

50–400 are tints (lighter), 600–950 are shades (darker), and 500 is your base. This mirrors how Tailwind CSS, Radix, and most modern design systems organize color — the same values drop straight into tailwind.config.js under theme.extend.colors. The color library has precomputed ramp pages for every Tailwind color, for example red-600 at /color/dc2626.

The same scale powers both themes. A common mapping: light-mode background uses --blue-50, cards use --blue-100, text uses --blue-900. For dark mode, flip it — background becomes --blue-950, cards --blue-900, text --blue-100. One generated ramp, two themes.

Frequently Asked Questions

• What is a tint and shade generator?

  A tint and shade generator takes a single hex color and produces lighter versions (tints, blended toward white) and darker versions (shades, blended toward black). The result is a complete light-to-dark palette that shares the same hue — this page generates 10 tints and 10 shades for any hex code, each with a copy-ready hex value.

• How many tints and shades do I need for a UI palette?

  Most design systems use 10–11 stops per hue, labeled 50 through 950. That provides enough granularity for backgrounds, borders, text, interactive states, and both light and dark themes. For quick projects, two or three tints and two or three shades are often all you need.

• What is the difference between a tint and a shade?

  A tint is the base color mixed with white — always lighter. A shade is the base color mixed with black — always darker. Both keep the original hue intact; only the lightness changes, in opposite directions.

• Can I use these values in Tailwind CSS or CSS variables?

  Yes. Copy the generated hex values into tailwind.config.js under theme.extend.colors, or map them to CSS custom properties like --brand-100 through --brand-900. Each value is a plain hex code, so it works anywhere CSS colors do — stylesheets, design tokens, Figma variables, or email templates.

• Why are the steps 5–10% apart?

  Even factor increments produce evenly distributed ramps — the jump from one swatch to the next stays visually consistent instead of lurching. Small 5–10% steps are ideal for hover and pressed states, while the bigger 60–90% steps turn the base color into borders, surfaces, and background washes.

Related tools: tint generator · shade generator · lighten a color · darken a color · advanced scale explorer with hue & chroma modes · color library · contrast checker