Lighten Color Tool
Make any color lighter by increasing its lightness value. Create tints and lighter variations for hover states, backgrounds, and subtle accents.
How Lightening Works
Colors are lightened by increasing the L (lightness) value in HSL:
| Original | +10% | +20% | +30% | hsl(220, 80%, 50%)hsl(220, 80%, 60%)hsl(220, 80%, 70%)hsl(220, 80%, 80%)
Example: Lightening Blue
PercentageHEXVisual Original#2563EBBase blue +10%#4B7FEELighter +20%#729CF1Even lighter | +30% | #99B9F4 | Light pastel |
Use Cases
- Hover states: Lighten on mouse-over
- Backgrounds: Subtle tinted backgrounds
- Disabled states: Lighter = inactive
- Gradients: Create light-to-dark transitions
CSS lighten() Function
``css
/* Using Sass/SCSS */
$primary: #2563EB;
$primary-light: lighten($primary, 20%);
/* Using CSS color-mix() */
.light {
background: color-mix(in srgb, #2563EB, white 30%);
}
``
Lighten colors for tints, hover states, and subtle variations.