Uwarp

Original

Adjusted

Saturation

−100 fully desaturates to gray; +100 maximizes vividness. At 0 the result matches your pick.

Help Us Improve

—

(—)

Change color saturation online

Saturate color or desaturate any hex. Change saturation with a −100 to +100 slider—copy values as HEX, RGB, or HSL in your browser.

What is color saturation?

Color saturation is how intense or muted a hue appears—a saturated color looks vivid; lower saturation moves toward gray. This page lets you change saturation on any hex: convert to HSL, scale the S channel with a −100 to +100 slider, then copy the result so you can saturate color or desaturate color for CSS, Figma, or design tokens—no install required.

Saturation adjustment features

Saturate or desaturate any hex with live preview and one-click copy.

  1. Color picker and hex input: Choose visually or paste a six-digit hex—the original swatch updates instantly.
  2. Bidirectional slider: −100 to +100—change saturation to desaturate toward gray or saturate color for a more vivid swatch.
  3. Live preview: Original and adjusted swatches side by side—the result updates as you change saturation or the base hex.
  4. Copy HEX, RGB, HSL: One-click copy for the adjusted result in three common formats.
  5. HSL saturation channel: Scales S in HSL space—hue and lightness stay stable for predictable edits.
  6. No account: Free, unlimited previews in modern browsers.

How to adjust color saturation

Three steps to saturate or desaturate a hex.

  1. Set the original color: Use the picker or paste a six-digit hex (e.g. #336699).
  2. Move saturation: Positive to saturate; negative to desaturate—0 keeps the original unchanged.
  3. Copy the result: Copy HEX, RGB, or HSL from the adjusted panel into CSS, Figma, or code.

Tips for saturation edits

Better results when saturating or desaturating hex values.

  1. Small positive moves: +10 to +30 often enough for accents without clipping on already-vivid bases.
  2. Muted with negatives: −20 to −40 desaturates for soft UI without full grayscale.
  3. Check contrast: Highly saturated text can fail contrast—pair with /contrast-checker when unsure.
  4. Gray at −100: Full desaturate returns a neutral gray at the original lightness—not always #808080.
  5. Paste from a picker: Sample a photo color on /image-color-picker, then paste the hex here.
  6. Photos need another tool: For whole images, use /change-image-saturation with the same slider range.

When to change saturation

Typical uses for hex saturation edits.

  1. Muted UI variants: Desaturate a brand hex for disabled states or subtle backgrounds.
  2. Vivid accents: Saturate color for buttons or badges—a high saturation color without re-picking hue.
  3. Saturated color palette: Run one base hex at +20, +40, and +60 (or negative steps) to sketch a saturated color palette or token ramp.
  4. Palette experiments: Compare how a hue reads at different saturation levels before committing.
  5. Accessibility checks: Preview less saturated text colors on busy backgrounds.
  6. CSS variables: Copy RGB or HSL directly into custom properties.

Why use this saturation changer

Benefits of browser-based hex saturation control.

  1. Instant: No install or sign-up—picker, slider, and copy in one page.
  2. Private: Colors never leave your device.
  3. Bidirectional: Saturate and desaturate in one control—no separate tools.
  4. Multiple formats: HEX, RGB, and HSL for different handoff workflows.
  5. Free: Unlimited previews and copies.
  6. Honest scope: Single-color saturation—not photo batch editing.

Technical details

How hex saturation adjustment works here.

  1. Color space: RGB ↔ HSL conversion per color; S channel scaled by (1 + offset / 100).
  2. Saturation range: −100 (fully desaturated) to +100 (maximum saturation).
  3. Input: Six-digit hex via picker or text field.
  4. Output formats: Lowercase HEX, rgb(), and hsl() strings.
  5. Processing: Client-side only—no network requests.
  6. Browser support: Modern Chromium, Firefox, and Safari.

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Color Tools.

View all Color Tools