Lighten Color
Lighten any color by a percentage while keeping its hue. Type a hex, RGB, HSL or OKLCH value or a color name, or pick a color, then set how much lighter it should be. You see the original and the lightened color side by side, with contrast checks for white and black text. Copy the result as hex, RGB, HSL, HSV or OKLCH, or as CSS and Sass code that lightens the color for you.
Color
Hex, rgb(), hsl(), oklch() and color names all workLightened color
From 0% to 100%
The same color lightened in steps of 10%. Click a step to use that amount.
About this tool
Why lighten a color?
Lightening a color gives you tints for backgrounds, highlighted rows, badges, borders and disabled states that still belong to your palette. This tool keeps the hue and saturation and only raises the lightness, so the result still looks like the same color.
Three ways to lighten
- Relative (the default) moves the HSL lightness the chosen percentage of the way to white. 50% gives the tint halfway to white and 100% gives white. It's the same as Sass
color.scale($color, $lightness: 50%). - Absolute adds that many points of HSL lightness, like the old Sass
lighten()function. It suits small, exact changes, but light colors reach white quickly. - OKLCH raises the perceived lightness in the OKLCH color space. The same amount looks like the same change for every hue, which makes it the best choice for color scales and design systems.
The 0% to 100% scale
The scale at the bottom shows the color lightened from 0% to 100% in steps of 10%. Click a step to use that amount, or copy the whole scale as CSS custom properties.
Contrast and code output
Contrast badges show whether white or black text on the lightened color meets the WCAG levels. Copy the result as hex, RGB, HSL, HSV or OKLCH, or as CSS and Sass code that lightens the color for you.
Remembered and related
Your color, amount and method are remembered in your browser for next time. To make a color darker instead, use Darken Color.
Frequently Asked Questions
What does lightening a color by 50% mean?
With the default Relative method, the color's lightness moves halfway to white while its hue and saturation stay the same. A color with 40% lightness becomes 70%, and one with 80% becomes 90%. 100% always gives white, so every amount is useful whatever color you start from.
What is the difference between the Relative, Absolute and OKLCH methods?
Relative scales the HSL lightness towards white, the same as Sass color.scale(). Absolute adds a fixed number of lightness points, the same as the old Sass lighten() function, so a light color can turn white after only a small amount. OKLCH works in a perceptual color space, so the same amount looks like the same change for every hue, which HSL doesn't manage.
Can CSS lighten a color by itself?
Yes. The CSS output uses relative color syntax, such as hsl(from #3c2fcf h s calc(l + (100 - l) * 0.5)), which every current browser supports. It's handy with custom properties, for example to make a light background tint from var(--brand).
Why should I check the contrast?
Light tints are often used as backgrounds behind text. The contrast badges show whether white or black text on the lightened color meets the WCAG contrast levels: 4.5:1 (AA) for normal text, 3:1 for large text and 7:1 (AAA) for the highest level.