¿Qué es la saturación de color?

La saturación es la intensidad o pureza de un color. Alta saturación significa un color vívido y rico; baja saturación significa que el color es más apagado y se acerca al gris.

¿Cuándo debo reducir la saturación?

Los colores apagados y desaturados se usan a menudo para fondos, elementos sutiles de UI y diseños de paleta elegantes. Crean calma visual e impiden que cualquier elemento domine.

¿Cómo se relaciona la saturación con HSL?

En el modelo de color HSL, la saturación (S) es el segundo valor. El 0% es completamente gris, y el 100% es la versión pura más vívida del tono. Ajustar la saturación solo cambia S, dejando el tono y la luminosidad sin cambios.

¿Puedo desaturar completamente un color para obtener gris?

Sí. Establecer la saturación al 0% convierte cualquier tono en un gris puro. La luminosidad de ese gris depende del valor L original del color en el modelo HSL.

Ajustador de saturación de color

Aumenta o disminuye la saturación de cualquier color y ve el resultado en tiempo real

Color original

Saturación: 100%

0% = Escala de grises200% = Súper saturado

Color resultado

Original

Adjusted Saturation

About Saturation Adjustment

The Color Saturation Adjuster lets you increase or decrease the saturation of any color. Slide towards 100% for vivid, punchy colors — or towards 0% for soft, muted tones — with real-time HEX, RGB, and HSL output.

Everything is processed locally in your browser. No data is sent to any server.

How to Use

Enter a HEX color code or pick one with the color picker.
Drag the saturation slider to increase or decrease saturation.
Compare the adjusted color alongside the original.
Copy the resulting HEX code or note the RGB and HSL values.

Features

Bidirectional slider to increase or decrease saturation
Before/after color comparison
HEX, RGB, and HSL output for the result
One-click copy to clipboard
Preset colors for quick experimentation
Accurate HSL-space adjustment preserving hue and lightness

Use Cases

Muting brand colors for subtle backgrounds and borders
Boosting color vibrancy for call-to-action buttons
Building cohesive palettes with matched saturation levels
Creating pastel variations of vivid colors
Desaturating to pure gray for accessibility testing

Related Tools

Color Picker

Pick and convert colors between formats

Color Tool

Comprehensive color manipulation tool

Blend Colors

Blend two colors together

Accessible Color Palette

Create accessible color palettes

Analogous Color Scheme

Generate analogous color schemes

Brand Color Identifier

Identify brand colors from images