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.

  • Color picker and hex input

    Choose visually or paste a six-digit hex—the original swatch updates instantly.

  • Bidirectional slider

    −100 to +100—change saturation to desaturate toward gray or saturate color for a more vivid swatch.

  • Live preview

    Original and adjusted swatches side by side—the result updates as you change saturation or the base hex.

  • Copy HEX, RGB, HSL

    One-click copy for the adjusted result in three common formats.

  • HSL saturation channel

    Scales S in HSL space—hue and lightness stay stable for predictable edits.

  • 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.
  • 01

    Small positive moves

    +10 to +30 often enough for accents without clipping on already-vivid bases.

  • 02

    Muted with negatives

    −20 to −40 desaturates for soft UI without full grayscale.

  • 03

    Check contrast

    Highly saturated text can fail contrast—pair with /contrast-checker when unsure.

  • 04

    Gray at −100

    Full desaturate returns a neutral gray at the original lightness—not always #808080.

  • 05

    Paste from a picker

    Sample a photo color on /image-color-picker, then paste the hex here.

  • 06

    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.

  • Muted UI variants

    Desaturate a brand hex for disabled states or subtle backgrounds.

  • Vivid accents

    Saturate color for buttons or badges—a high saturation color without re-picking hue.

  • Saturated color palette

    Run one base hex at +20, +40, and +60 (or negative steps) to sketch a saturated color palette or token ramp.

  • Palette experiments

    Compare how a hue reads at different saturation levels before committing.

  • Accessibility checks

    Preview less saturated text colors on busy backgrounds.

  • CSS variables

    Copy RGB or HSL directly into custom properties.

Why use this saturation changer

Benefits of browser-based hex saturation control.

  • Instant

    No install or sign-up—picker, slider, and copy in one page.

  • Private

    Colors never leave your device.

  • Bidirectional

    Saturate and desaturate in one control—no separate tools.

  • Multiple formats

    HEX, RGB, and HSL for different handoff workflows.

  • Free

    Unlimited previews and copies.

  • Honest scope

    Single-color saturation—not photo batch editing.

Technical details

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

Sources & References

Authoritative references on color saturation, the HSL color model, and the browser-based processing this tool uses.
  • “HSL (hue, saturation, lightness) is an alternative representation of the RGB color model, designed to more closely align with the way human vision perceives color-making attributes.”
    — Wikipedia — HSL and HSV

    HSL and HSV color spaces: This tool converts the input hex to HSL, scales the saturation (S) channel by a user-defined offset, and converts back to RGB/hex — keeping hue and lightness stable while adjusting color intensity. en.wikipedia.org/wiki/HSL_and_HSV

  • “Saturation is the purity of a color, describing the degree to which the color differs from a gray of the same lightness.”
    — Wikipedia — Colorfulness

    Colorfulness, chroma, and saturation: At +100 the HSL saturation value reaches its maximum, producing the most vivid version of the hue. At −100 saturation drops to zero, yielding a neutral gray at the same lightness. en.wikipedia.org/wiki/Colorfulness

  • “The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors.”
    — Wikipedia — RGB color model

    RGB color model: All hex values are converted from RGB to HSL for the saturation adjustment, then converted back to RGB for the final hex, rgb(), and hsl() output strings. en.wikipedia.org/wiki/RGB_color_model

Frequently Asked Questions

Quick answers about this tool—open a question to read more.