Darken Color
Darken 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 darker it should be. You see the original and the darkened 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 darkens the color for you.
Color
Hex, rgb(), hsl(), oklch() and color names all workDarkened color
From 0% to 100%
The same color darkened in steps of 10%. Click a step to use that amount.
About this tool
Why darken a color?
Darkening a color is the quickest way to get hover and active states, borders, shadows and readable text colors from a brand color. This tool keeps the hue and saturation and only lowers the lightness, so the result still looks like the same color.
Three ways to darken
- Relative (the default) moves the HSL lightness the chosen percentage of the way to black. 50% halves the lightness and 100% gives black. It's the same as Sass
color.scale($color, $lightness: -50%). - Absolute subtracts that many points of HSL lightness, like the old Sass
darken()function. It suits small, exact changes, but dark colors reach black quickly. - OKLCH lowers 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 darkened 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 darkened color meets the WCAG levels. Copy the result as hex, RGB, HSL, HSV or OKLCH, or as CSS and Sass code that darkens the color for you.
Remembered and related
Your color, amount and method are remembered in your browser for next time. To make a color lighter instead, use Lighten Color.
Frequently Asked Questions
What does darkening a color by 50% mean?
With the default Relative method, the color's lightness moves halfway to black while its hue and saturation stay the same. A color with 60% lightness becomes 30%, and one with 20% becomes 10%. 100% always gives black, 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 black, the same as Sass color.scale(). Absolute subtracts a fixed number of lightness points, the same as the old Sass darken() function, so a dark color can turn black after only a small amount. OKLCH works in a perceptual color space, so the same amount looks like the same change for every hue. Yellows and blues darken evenly, which HSL doesn't manage.
Can CSS darken a color by itself?
Yes. The CSS output uses relative color syntax, such as hsl(from #2fb0cf h s calc(l * 0.5)), which every current browser supports. It's handy with custom properties, for example hsl(from var(--brand) h s calc(l * 0.8)) for a hover color.
Why should I check the contrast?
Darker colors are often used for text, borders and hover states. The contrast badges show whether white or black text on the darkened 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.