Lighten or Darken a Color

Lighten or Darken a Color

Local Processing

Lighten or darken a colour by a chosen amount.

How It Works & Processing Standards

Lighten or darken a colour by a chosen amount.

Tool processing runs in your browser. If you create a calculator or conversion share link, its values are included in the URL. See the privacy policy for account, analytics and advertising data.

Current Limits

  • Maximum input length: 100,000 characters

Choose lighten or darken under "Task" and enter an amount; HSL lightness changes by that many percentage points. 20 turns lightness 50% into 70%.

What You Can Do

Lighten
Raises lightness toward pastel.
Darken
Lowers lightness toward a deeper shade.

How to Use Lighten or Darken a Color

  1. 1
    Choose a taskLighten or darken.
  2. 2
    Enter color and amountThe base color and lightness change (%).
  3. 3
    CopyCopy the new color code.

Examples

Lighten by 20
Input: #3366cc, 20
Result: #85a3e0 (hsl 220, 60%, 70%)
Darken by 20
Input: #3366cc, 20
Result: #1f3d7a (hsl 220, 60%, 30%)

Common Use Cases

  • Making hover (lighter) and pressed (darker) button colors
  • Deriving a pale background tint from a brand color

Frequently Asked Questions (FAQ)

Is it the same as Sass lighten()?

Yes. Percentage points are added to or subtracted from HSL lightness, clamped to 0–100%.

Have feedback or ideas for this tool? Suggest & Inquire →