How to use it
- Enter a color in HEX,
rgb(),hsl(),oklch()or as a CSS name. - Choose Lighten or Darken, the amount and the color space.
- Copy the first result or the whole list of five steps.
How it works
HSL: the color is converted to hue, saturation and lightness; lightness changes by the amount times the step number (10, 20, 30 …) and is kept between 0 and 100. OKLCH: the same is done with OKLCH lightness (Björn Ottosson’s perceptual model), keeping hue and chroma; if the result does not fit in sRGB, chroma is lowered by bisection. Results are rounded to whole 0–255 channel values.
Example
#3366cc is hsl(220, 60%, 50%). Lightened by 10 in HSL the five steps are #5c85d6, #85a3e0, #adc2eb, #d6e0f5 and #ffffff. Darkened by 10 they are #2952a3, #1f3d7a, #142952, #0a1429 and #000000.
Tips
- For hover and pressed states, small amounts of 5 to 10 points are usually enough.
- Lightening far enough always ends in white, so use the tints and shades generator if you want a gradual mix with white or black.
- Check text on the new color with a contrast checker.