# Color Saturate/Desaturate

Adjust color saturation and create variations with saturate/desaturate controls

> Canonical page: https://elysiatools.com/en/tools/color-saturate-desaturate

- **Category:** Design

- **Keywords:** color, saturate, desaturate, vibrance, intensity, adjust, tint, shade, color adjustment, chroma

## Overview

The Color Saturate/Desaturate tool allows you to precisely adjust the intensity of any color, helping you create balanced palettes, muted tones, or vibrant highlights for your design projects.

## Inputs

- **Base Color** (color)
- **Adjustment Type** (select)
- **Adjustment Amount (%)** (range): Adjustment amount for color saturation (-100% to +100%)
- **Gradient Steps** (number): Only applies when "Gradient (Full range)" is selected. Controls how many colors to generate in the saturation gradient sequence (2-20 steps)
- **Include Complementary Colors** (checkbox)
- **Preserve Hue Characteristics** (checkbox)

## When to use

- When you need to soften a brand color for a background or secondary UI element.
- When creating a consistent color scale for data visualizations or design systems.
- When you want to extract a range of shades from a single base color to ensure visual harmony.

## How it works

- Select your base color using the color picker.
- Choose an adjustment type, such as Saturate, Desaturate, or Gradient.
- Adjust the intensity slider to define the strength of the change.
- Toggle additional settings like 'Preserve Hue' to maintain color accuracy while modifying intensity.

## Use cases

- Creating accessible UI components by desaturating colors to reduce visual noise.
- Generating a full spectrum of brand colors for design documentation.
- Adjusting icon colors to match the vibrancy of a specific design theme.

## Frequently asked questions

### What is the difference between saturate and desaturate?

Saturate increases the intensity and vividness of a color, while desaturate reduces it, moving the color closer to a neutral gray.

### Can I generate multiple color variations at once?

Yes, by selecting the 'Gradient' adjustment type, you can generate a sequence of colors ranging from fully desaturated to fully saturated.

### What does 'Preserve Hue' do?

When enabled, it ensures that the color's underlying hue remains constant while only the saturation level is modified.

### How many steps can I create in a gradient?

You can generate between 2 and 20 distinct color steps in a gradient sequence.

### Is this tool suitable for print design?

This tool generates colors in web-standard formats (RGB/Hex), which are ideal for digital design and UI development.

## Related tools

- [Color Complement](https://elysiatools.com/en/tools/color-complement): Find complementary colors and create harmonious color schemes with triadic, tetradic, and analogous color relationships
- [Color Hue Shifter](https://elysiatools.com/en/tools/color-hue-shifter): Shift color hues and create variations with clockwise/counterclockwise hue rotation controls
- [Color Inverter](https://elysiatools.com/en/tools/color-inverter): Invert colors and create negative versions with RGB, HSL, and brightness inversion methods
- [Color Lighten/Darken](https://elysiatools.com/en/tools/color-lighten-darken): Adjust color brightness and create variations with lighten/darken controls
- [Color Shade Generator](https://elysiatools.com/en/tools/color-shade): Generate darker variations of a color by adding black, creating rich shades for depth and contrast in design
- [Color Tint Generator](https://elysiatools.com/en/tools/color-tint): Generate lighter variations of a color by adding white, creating bright and airy tints for fresh design aesthetics
- [Neon Color Generator](https://elysiatools.com/en/tools/neon-colors): Generate vibrant, glowing neon colors with high saturation and brightness, creating eye-catching electric light effects perfect for digital displays and modern design
- [Pastel Color Generator](https://elysiatools.com/en/tools/pastel-colors): Generate soft, gentle pastel colors with reduced saturation and increased lightness for creating delicate and soothing color palettes

## Samples

- [Color Code Samples](https://elysiatools.com/en/samples/color-code): Collection of color codes in various formats (Hex, RGB, HSL, named colors) for validation testing
- [Android Image Processing Java Samples](https://elysiatools.com/en/samples/android-image-processing-java): Android Java image processing examples including reading/saving images, scaling, and format conversion
- [Android Image Processing Kotlin Samples](https://elysiatools.com/en/samples/android-image-processing-kotlin): Android Kotlin image processing examples including reading/saving images, scaling, and format conversion
- [Web Image Processing Python Samples](https://elysiatools.com/en/samples/web-image-processing-python): Web Python image processing examples using PIL/Pillow including reading, saving, resizing, and format conversion

## Related content

- [Accessible Color System Design Tools](https://elysiatools.com/en/hubs/color-design-tools): Build a reusable color system by transforming colors, generating harmonies, checking contrast and color vision, and documenting tokens.
- [Color System and CSS Effect Design Workflow](https://elysiatools.com/en/hubs/design-generate): Extract a palette, build accessible color relationships, generate tokens, and apply CSS effects that stay consistent in real interface states.