How to Lighten or Darken Any Hex Color (Step-by-Step Guide)

Whether you need a hover state, a pressed state, or better contrast, these proven techniques help you create lighter and darker versions of any hex color.

1) The fastest way: use HexTints

Open HexTints, paste your color (for example #8b80af), and switch between Lightness, Hue, or Chroma. Click any swatch to copy its hex instantly.

2) CSS-only approaches

CSS doesn’t have a native “lighten” function for hex, but you can use color-mix() and hsl() in modern browsers.

/* Using color-mix (modern browsers) */
button:hover{ background: color-mix(in oklab, #8b80af 80%, white); }
button:active{ background: color-mix(in oklab, #8b80af 80%, black); }

/* Using HSL to adjust lightness */
:root{ --base: 265 20% 60%; }
.btn{ background: hsl(var(--base)); }
.btn:hover{ background: hsl(265 20% 70%); } /* lighter */
.btn:active{ background: hsl(265 20% 50%); } /* darker */

3) Design tools

In Figma/Sketch/PS, convert your color to HSL or OKLCH and raise or lower the lightness channel. A 5–12% change usually feels like a purposeful hover or pressed state.

Tips for contrast

• Aim for 4.5:1 contrast for body text, 3:1 for large text or UI chrome.
• On dark backgrounds, prefer lightening the text; on light backgrounds, darken it.

Try it now on /colors/#8b80af and copy a lighter or darker swatch.