O que é saturação de cor?

Saturação é a intensidade ou pureza de uma cor. Alta saturação significa cor vívida e rica; baixa saturação significa que a cor é mais suave e mais próxima do cinza.

Quando devo reduzir a saturação?

Cores suaves e dessaturadas são frequentemente usadas para fundos, elementos sutis de interface e designs de paletas elegantes. Elas criam calma visual e evitam que qualquer elemento isolado domine.

Como a saturação se relaciona com HSL?

No modelo de cor HSL, Saturação (S) é o segundo valor. 0% é completamente cinza e 100% é a versão pura mais vívida do matiz. Ajustar a saturação muda apenas o S, deixando matiz e luminosidade intocados.

Posso dessaturar completamente uma cor para obter cinza?

Sim. Definir a saturação como 0% converte qualquer matiz em um cinza puro. A luminosidade desse cinza depende do valor L original da cor no modelo HSL.

Ajustador de Saturação de Cor

Aumente ou diminua a saturação de qualquer cor e veja o resultado em tempo real

Cor original

Saturação: 100%

0% = Escala de cinza200% = Super saturado

Cor 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