Adjust any color's lightness in one click — get HEX, RGB & HSL instantly
Input Color
Before & After
L: 60%
hsl(217, 90%, 80%)
Output Values
Lighten Scale
Each step shifts HSL lightness by the shown percentage relative to the original.
Need to darken or lighten a color for your design? Our free color lightness adjuster lets you pick any HEX color, choose a percentage, and instantly see a darkened or lightened result alongside the original swatch. Results are shown in HEX, RGB, and HSL formats with one-click copy — plus a full five-step scale so you can compare multiple shades at a glance.
The tool converts your HEX color to HSL (Hue, Saturation, Lightness) and shifts the lightness value up or down by the percentage you choose. Because hue and saturation stay the same, the result is always a clean tint or shade of the original color.
Lightening (as done here) increases the HSL lightness value, which is perceptually accurate and keeps the hue intact. Tinting traditionally means mixing with white in RGB space — the two are similar but not identical for saturated colors.
Yes. All three output formats — HEX (#RRGGBB), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%)) — are valid CSS color values you can paste directly into your stylesheet.
The scale shows five preset adjustments (10%, 20%, 30%, 40%, 50%) applied to your original color in the chosen direction, giving you a ready-made palette of tints or shades to compare and copy.