Saturate Color Tool

Summary

Enter a hex color, choose a saturation amount, and instantly see the more vivid or more muted result with a 5-step saturation strip.

How it works

1. Enter or paste a valid hex color (e.g. #3B82F6) into the input field, or use the color picker.
2. Choose whether you want to increase (saturate) or decrease (desaturate) the saturation.
3. Drag the slider or type a value (1–100) to set the saturation adjustment amount.
4. The tool converts the hex to HSL, clamps the new saturation between 0% and 100%, then converts back to hex.
5. The result swatch, hex code, and HSL value update instantly.
6. A 5-step strip shows the color at evenly spaced saturation shifts for quick comparison.

Use cases

• Create muted, desaturated background tones that complement a vivid brand color.
• Generate more vibrant hover or active states for UI buttons.
• Build accessible, low-saturation variants that maintain the original hue.
• Explore how a color behaves at different saturation levels before committing to a palette.
• Produce consistent saturation variants for CSS custom properties or design tokens.
• Quickly convert a flat gray-ish color into a rich, vivid version.

Frequently Asked Questions