What is color saturation?

Saturation describes how vivid or pure a color is. In HSL, a saturation of 100% produces the richest, most vivid version of the hue, while 0% results in a neutral gray with the same lightness — all hue information is lost.

How is HSL saturation different from mixing with white or black?

Mixing with white or black changes both the lightness and the apparent purity of the color. Adjusting HSL saturation only changes the color intensity — the hue and lightness remain exactly the same, giving you a purer result.

What happens if saturation exceeds 100% or goes below 0%?

The result is clamped at 0% (completely gray) or 100% (fully vivid). Any adjustment that would exceed these limits is silently capped.

Can I enter a hex color without the # sign?

Yes. Both 3-digit shorthand (e.g. F0F) and 6-digit (e.g. FF00FF) are accepted with or without the leading #.

Why does desaturating a very light or very dark color produce gray so quickly?

In HSL, colors with lightness near 0% (black) or 100% (white) have very low perceived saturation regardless of the S value. Reducing S on these colors converges to gray quickly because there is little color information left to preserve.

Saturate Color Tool

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

Settings

Base Color

Adjustment Mode

Amount: 20%

1%100%

Quick Presets

Copied!

Result

Original

#3B82F6 hsl(217, 91%, 60%)

+20%

Saturated

#3280FF hsl(217, 100%, 60%)

Preview Strip

Summary

The Saturate Color Tool converts any hex color to HSL color space, then increases or decreases the Saturation channel by the amount you choose, and converts the result back to hex. Adjusting saturation in HSL keeps the hue and lightness intact, so the color stays the same tone — just more vivid or more muted. A 5-step strip spanning -50% to +50% gives instant visual context across the saturation range.

How it works

Enter or paste a valid hex color (e.g. #3B82F6) into the input field, or use the color picker.
Choose whether you want to increase (saturate) or decrease (desaturate) the saturation.
Drag the slider or type a value (1–100) to set the saturation adjustment amount.
The tool converts the hex to HSL, clamps the new saturation between 0% and 100%, then converts back to hex.
The result swatch, hex code, and HSL value update instantly.
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

Last updated: 2026-05-28 · Reviewed by Nham Vu