Lighten Color

Lighten a color towards white by adjusting the lightness value. Enter a color and use the amount slider to control how much to lighten it.

Original Color

RGB
rgb(0, 102, 204)
HSL
hsl(210, 100%, 40%)
HSV
hsv(210, 100%, 80%)

Options

0% 50% 100%

How it works: The amount value controls how much to lighten the color by increasing the lightness (L) value in HSL. At 0%, the color remains unchanged. At 100%, the color becomes white.

Lightened Color

HEX
RGB
HSL
HSV

Quick Palette

Original color with 10 progressive lightening steps (click any color to copy RGB)

About Color Lightening

Lightening a color means increasing its brightness by moving it towards white on the lightness scale. This is done by increasing the L (Lightness) value in the HSL color model.

How to Use This Tool

  1. Enter a hex color code in the input field (e.g., #FF0000 for red).
  2. You will see the original color information displayed (RGB, HSL, HSV).
  3. Use the "Amount" slider (0-100%) to control how much to lighten the color.
  4. The lightened color will update in real-time as you adjust the slider.
  5. View the lightened color formats in RGB, HSL, and HSV.
  6. Click the copy buttons to copy any color format to your clipboard.

Color Lightening Details

  • Amount: Controls the percentage of lightness to add (0-100%).
  • Formula: New Lightness = Current L + (100 - Current L) × (Amount / 100).
  • 0% Amount: Returns the original color unchanged.
  • 100% Amount: Results in white color (#FFFFFF).
  • Saturation: Automatically reduces saturation for more natural-looking lighter colors.

Common Use Cases

  • UI Design: Creating lighter background colors from primary brand colors.
  • Hover States: Generating lighter hover states for buttons and interactive elements.
  • Color Palettes: Creating tint variations from base colors.
  • Accessibility: Ensuring better contrast and readability for text.
  • Design Systems: Building consistent color scales for design tokens.

TL;DR Logs