Tints & Shades — #2d6a4f (Forest Green)

Tints
+ White base →
Shades
+ Black ← base

Tints and Shades — A Complete Guide to Color Lightness in Design

Last updated: March 2026

If you've ever picked a color and thought "I need a lighter version of this" or "I need this but deeper" — you've been thinking in tints and shades, even if you didn't use those exact terms. These two concepts form the backbone of how color palettes are built in both traditional art and modern web design.

Understanding tints and shades (and their often-overlooked sibling, tones) gives you the vocabulary and mental model to work with color systematically — whether you're building a design system from scratch, tweaking a Tailwind CSS palette, or just trying to make your UI look more polished.

What Are Tints?

A tint is any color with white added to it. The more white you add, the lighter the tint becomes.

In hex terms, creating a tint means pushing each RGB channel value closer to FF (255 in decimal). Pure white is #FFFFFF — so a tint is your color at some point on the spectrum between its original value and white. To lighten a hex color, you're making a tint.

Starting from #2d6a4f (a forest green):

Every step retains the same hue (green). Only the lightness changes. This is what makes tints so useful for design — you get variety without introducing new hues.

What Are Shades?

A shade is any color with black added to it. More black means a deeper, darker result.

In hex, shading means pulling each RGB channel closer to 00. Pure black is #000000, so a shade lives between your original color and black. To darken a hex color, you're making a shade.

Same base, #2d6a4f:

Shades are essential for creating depth, contrast, and visual hierarchy. A dark shade of your brand color as a header background, a medium shade for secondary elements, the base for primary actions — this is how cohesive interfaces are built.

What Are Tones? (The Third Piece)

Tones don't get as much attention, but they complete the picture. A tone is any color with gray added to it — which simultaneously reduces saturation without dramatically changing lightness.

Think of it this way: tints make colors pastel, shades make them deep, and tones make them muted or sophisticated. Tones are common in interior design, fashion, and editorial web design where you want colors that feel refined rather than vibrant.

For web development, tones are less commonly needed than tints and shades, but they're valuable for neutral-leaning palettes and subdued UI elements.

Tints vs. Shades vs. Tones — Quick Reference

Term Mixed with Effect Example (from #2d6a4f)
Tint White Lighter, more pastel
#96b5a7
Shade Black Darker, more intense
#163528
Tone Gray Muted, less saturated
#5a7a6d

All three start from the same base color and adjust only the lightness or saturation — never the hue. This is why they're so useful for building monochromatic palettes: you get maximum variety with guaranteed harmony.

Why Tints and Shades Matter in Web Design

Building Color Scales

Every major design system — Material Design, IBM Carbon, Chakra UI, Tailwind CSS — is built on tint-and-shade scales. You start with a base hue and generate 9–11 steps from very light (tint) to very dark (shade). These steps become the building blocks for every surface, text color, border, and interactive state in your UI.

Without understanding tints and shades, these scales seem arbitrary. With it, they're logical and predictable.

Creating Visual Hierarchy

In any interface, lighter elements recede and darker elements advance. Using tints for backgrounds and shades for foreground elements creates a natural sense of depth — like light falling on physical surfaces. This is the foundation of "material" design metaphors.

Accessible Color Pairing

WCAG requires specific contrast ratios between text and background: 4.5:1 for normal text (AA) and 7:1 for enhanced compliance (AAA). Tints and shades of the same hue are natural candidates for high-contrast pairs — a very dark shade for text on a very light tint background, or vice versa. Staying within one hue family while varying lightness is the most reliable path to both aesthetic harmony and accessibility compliance.

Reducing Palette Complexity

Instead of picking 30 unique colors, pick 3 hues and generate tints and shades of each. You end up with 30+ usable colors that all coordinate naturally because they share the same hue DNA. This is easier to maintain, easier to document, and produces more cohesive results than hand-picking individual colors.

How to Generate Tints and Shades from a Hex Code

The Formulas

Tint (blend toward white):

new_value = old_value + (255 - old_value) × factor

Shade (blend toward black):

new_value = old_value × (1 - factor)

Where factor ranges from 0 (base color) to 1 (pure white or pure black).

The Easy Way

HexTints — our free shade generator — produces the entire tint-and-shade spectrum from any hex code in one step. Enter your color, see every variation, click to copy. It's the fastest path from a single hex value to a complete working palette.

Tints and Shades in CSS

Modern CSS gives you native tools for working with tints and shades without preprocessing.

Using color-mix()

.card-light {
  background: color-mix(in srgb, #2d6a4f, white 70%); /* 70% tint */
}
.card-dark {
  background: color-mix(in srgb, #2d6a4f, black 40%); /* 40% shade */
}

Supported in all modern browsers. This is the most direct way to create tints and shades in CSS.

Using HSL Variables

:root {
  --green-h: 153;
  --green-s: 40%;
  --green-l: 30%;
}

.surface-light {
  background: hsl(var(--green-h) var(--green-s) 90%); /* tint */
}
.surface-dark {
  background: hsl(var(--green-h) var(--green-s) 15%); /* shade */
}
.btn:hover {
  background: hsl(var(--green-h) var(--green-s) calc(var(--green-l) - 10%));
}

Adjusting the lightness parameter in HSL gives you fine-grained control over tint/shade generation directly in your stylesheet. Need pre-computed hex values instead? Use the shade generator to get all steps at once.

Frequently Asked Questions