Lighten or Darken Color

Making a color "20% lighter" sounds simple, but tools mean different things by it. Sass lighten() adds 20 points of HSL lightness, color.scale() moves 20% of the way to white lightness, a tint mixes in 20% white, and OKLCH changes the lightness people actually perceive. This tool does all four for lighten, darken, saturate, desaturate and grayscale, shows the result as HEX, RGB, HSL and OKLCH, gives matching Sass and modern CSS code, and lists every 10% step.

How to use this tool

1. Enter a color in any CSS format.
2. Choose lighter, darker, more or less saturated, or grayer, and the amount.
3. Pick the method that matches your code base: Sass HSL, Sass scale, a white/black mix or OKLCH.
4. Copy the HEX, the CSS (a HEX fallback plus a relative-color or color-mix() line) or the Sass call.

Formula

HSL add: L′ = L + a · HSL scale: L′ = L + (100 − L) × a · mix: c′ = c + (t − c) × a · OKLCH: L′ = L + a, C′ = C × (1 ± a) · luma: Y′ = 0.2126 R + 0.7152 G + 0.0722 B

a is the amount (as points for HSL add, as a fraction otherwise), c each RGB channel and t the white, black or gray being mixed in. Darken and desaturate use the matching subtraction. Grayscale by mixing uses the Rec. 709 luma gray, with the weights of CSS filter: grayscale(). An OKLCH result outside sRGB loses chroma, and the CSS line then gives that fitted color.

Example

Sass lighten(#6b717f, 20%) raises HSL lightness from 45.9% to 65.9%, giving #A1A5AF; darken(#b37399, 20%) gives #7C4465. Mixing #3366CC with 20% white instead gives #5C85D6 (51 + 204 × 0.2 = 91.8 → 92, and so on) — a softer step than lighten() at the same percentage. The luma gray of #3366CC is 0.2126 × 51 + 0.7152 × 102 + 0.0722 × 204 = 98.5, so its grayscale mix is #636363.