Wat is kleurverzadiging?

Verzadiging is de intensiteit of zuiverheid van een kleur. Hoge verzadiging betekent levendige, rijke kleur; lage verzadiging betekent dat de kleur gedempter is en dichter bij grijs ligt.

Wanneer verlaag ik de verzadiging?

Gedempte, ontverzadigde kleuren worden vaak gebruikt voor achtergronden, subtiele UI-elementen en elegante paletontwerpen. Ze creëren visuele rust en voorkomen dat een enkel element domineert.

Hoe heeft verzadiging betrekking op HSL?

In het HSL-kleurmodel is Verzadiging (S) de tweede waarde. 0% is volledig grijs, en 100% is de meest levendige pure versie van de tint. Het aanpassen van de verzadiging wijzigt alleen S, waarbij tint en helderheid onaangeroerd blijven.

Kan ik een kleur volledig ontverzadigen om grijs te krijgen?

Ja. Door de verzadiging op 0% in te stellen, wordt elke tint omgezet in een pure grijs. De helderheid van dat grijs hangt af van de L-waarde van de originele kleur in het HSL-model.

Kleurverzadigingsaanpasser

Vergroot of verkleins de verzadiging van elke kleur en zie het resultaat in realtime

Originele kleur

Verzadiging: 100%

0% = Grijswaarden200% = Superverzadigd

Resulterende kleur

Origineel

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