Lighten a Hex Color

Free, instant, copy-ready — no signup.

Enter a hex code and drag the slider to lighten it by an exact percentage. The lighter hex code updates live and copies in one click. Need the opposite? Use the darken color tool.

How Lightening a Color Works

Lightening blends each RGB channel toward white. For a chosen percentage p (0–1), each channel becomes:

new = old + (255 − old) × p

20% lighten of #2D6A4F — rgb(45, 106, 79):
 ├─ R: 45  + (255 − 45)  × 0.2 =  87
 ├─ G: 106 + (255 − 106) × 0.2 = 136
 └─ B: 79  + (255 − 79)  × 0.2 = 114

Result: rgb(87, 136, 114) = #578872

This is the classic tint formula — a lightened color is a tint. Because every channel moves proportionally toward 255, the hue stays stable and the result reads as a softer version of the same color rather than a different one.

Every 10% Step of #2D6A4F, Lightened

The same ramp for any color is precomputed in the color library — for example #2D6A4F, #3498DB, or Tailwind's red-600.

When to Lighten a Color

• Hover and focus states — lighten a button color 8–15% for feedback that stays on-brand.
• Backgrounds and surfaces — 70–95% lightening turns any brand color into a wash that dark text sits on comfortably.
• Borders and dividers — 50–70% lighter versions separate content without hard gray lines.
• Charts — a lightness ramp of one hue reads as ordered data (see the monochromatic palette guide).

Lighten a Color in CSS

You don't always need to hard-code the lighter hex — modern CSS can derive it:

/* color-mix(): 20% lighter (mix 80% color with 20% white) */
background: color-mix(in srgb, #2d6a4f 80%, white);

/* Relative color syntax: raise HSL lightness by 20 points */
background: hsl(from #2d6a4f h s calc(l + 20));

/* Sass */
background: color.scale(#2d6a4f, $lightness: 20%);

Hard-coded hex values from the tool above are still the right call for design tokens, emails, and anywhere you need the exact value once. For the full CSS/JS playbook, read how to lighten or darken a color in CSS.

Frequently Asked Questions

• How do I lighten a hex color?

  Blend each RGB channel toward white: new = old + (255 − old) × percentage. A 20% lighten of #2D6A4F moves rgb(45, 106, 79) to rgb(87, 136, 114), which is #578872. The slider tool above applies that formula for any hex code and percentage.

• What percentage should I lighten a color for hover states?

  For hover feedback on buttons and links, 8–15% is usually enough to be noticeable without changing the color's character. Use 40–90% lightening to turn a brand color into surface and background tints.

• How do I lighten a color in CSS?

  Modern CSS can lighten a color directly with color-mix(): background: color-mix(in srgb, #2d6a4f 80%, white) gives a 20% lighter version. Relative color syntax like hsl(from #2d6a4f h s calc(l + 20)) also works in current browsers, and Sass projects can use color.scale($color, $lightness: 20%).

• Is lightening a color the same as making a tint?

  Yes — in color theory a tint is exactly a color mixed with white, and lightening by blending toward white produces tints. Other methods, like raising HSL lightness, brighten the color slightly differently, but for design work the mix-with-white approach is the standard.

• Does lightening a color change its hue?

  Blending toward white keeps the hue essentially stable while reducing saturation and raising lightness, which is why tints look like softer versions of the same color. Raising the HSL lightness channel instead keeps saturation, which can make light colors look slightly more neon.

Related tools: darken a color · tint generator · tint and shade generator · hex to RGB converter · contrast checker