Darken Color

Darken a color towards black by adjusting the lightness value. Enter a color and use the amount slider to control how much to darken 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 darken the color by decreasing the lightness (L) value in HSL. At 0%, the color remains unchanged. At 100%, the color becomes black.

Darkened Color

HEX
RGB
HSL
HSV

Quick Palette

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

About Color Darkening

Darkening a color means decreasing its brightness by moving it towards black on the lightness scale. This is done by decreasing 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 darken the color.
  4. The darkened color will update in real-time as you adjust the slider.
  5. View the darkened color formats in RGB, HSL, and HSV.
  6. Click the copy buttons to copy any color format to your clipboard.

Color Darkening Details

  • Amount: Controls the percentage of darkness to add (0-100%).
  • Formula: New Lightness = Current L × (1 - Amount / 100).
  • 0% Amount: Returns the original color unchanged.
  • 100% Amount: Results in black color (#000000).
  • Saturation: Automatically increases saturation for more natural-looking darker colors.

Common Use Cases

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

TL;DR Logs