About Darken Color
Color adjustment here works in the HSL model, which separates hue, saturation, and lightness. Lighten and darken add or subtract the chosen amount from lightness as absolute percentage points, saturation changes work the same way on the saturation value, and greyscale sets saturation to zero. Invert subtracts each RGB channel from 255. Results are clamped to the valid range, and HSL rounding can shift a channel by one step.
How to use Darken Color
- Fill in "Base color", "Adjustment" and "Amount".
- The result appears below and updates as you type.
- Copy the result with the copy button, or download it as a file where that is offered.
Questions about Darken Color
Is this greyscale the same as black and white in a photo editor?
No. Setting HSL saturation to zero keeps HSL lightness, which treats all hues alike. Photo editors usually weight green more than red and blue to match perceived brightness, so their greys can look different.
Does lightening by 20 percent mean 20 percent brighter?
It adds 20 points to the HSL lightness value, so a color at 30 percent lightness moves to 50. This is the same behavior as the lighten function in Sass, not a relative increase.
Runs in your browser. Page last updated .