How to use it
- Enter a color in HEX,
rgb(),hsl(),oklch()or as a CSS name. - Choose Increase or Decrease, the amount and the color space.
- Copy the first result or the whole list of five steps.
How it works
HSL: saturation moves by the amount times the step number, limited to 0–100, with hue and lightness unchanged. OKLCH: chroma is multiplied by 1 ± (amount × step) ÷ 100, never below zero, with hue and lightness unchanged; chroma is lowered if needed to stay inside sRGB. Results are rounded to whole 0–255 channel values.
Example
#3366cc is hsl(220, 60%, 50%). Decreasing saturation by 10 points in HSL gives #406abf, #4d6fb3, #5973a6, #667799 and #737b8c. Decreasing by 25 percent of the chroma in OKLCH gives #436ab5, #526c9d, #5f6d85, #6c6c6c and #6c6c6c, where the last two are the same grey.
Tips
- Muted versions of a brand color work well for backgrounds and borders.
- Desaturating all colors of a design is a quick way to check that it still reads without color.
- Pure greys have no hue, so increasing their saturation changes nothing.