Color Saturation Tool
Adjust saturation of any color and see progressive steps from fully muted (gray) to fully vivid. Perfect for building color scales, matching design tones, or understanding how saturation affects perception.
Colors
What Is Color Saturation?
Saturation is how vivid or muted a color is — how far it is from gray. At 100% saturation a color is fully vivid; at 0% it becomes a pure gray with the same lightness. Adjusting saturation without touching hue or lightness produces a "tone" scale — the muted side of a color family.
When to Use Saturation Adjustments
- Muted UI surfaces: Desaturated versions of a brand color feel calmer on large backgrounds.
- State indicators: Desaturate colors to signal disabled/inactive states.
- Data visualization: Lower saturation for secondary series, keep primary series vivid.
- Editorial design: Tones (reduced saturation) feel more refined than fully saturated colors.
- Photography: Understanding desaturation is key to color grading and film looks.