Die Sättigung, englisch saturation, gibt an, wie kräftig eine Farbe ist, also wie weit sie sich von einem Grau gleicher Helligkeit entfernt. Eine voll gesättigte Farbe wirkt leuchtend, eine entsättigte blass bis grau. In CSS wird die Sättigung in Prozent angegeben: 100 Prozent sind voll gesättigt, 0 Prozent ergeben Grau.
- Sättigung (Saturation)
Das Maß dafür, wie kräftig eine Farbe ist, also wie weit sie sich von einem Grau gleicher Helligkeit unterscheidet.
Beispiel: „Wir haben die Sättigung der Hintergrundfarbe gesenkt, damit der Text ruhiger wirkt.“Auch: Farbsättigung, Sättigungsgrad.
Abgrenzung zum Chroma: Die CIE trennt drei Begriffe. Buntheit sagt, wie farbig eine Fläche wirkt, Sättigung misst das an ihrer eigenen Helligkeit, Chroma an einem Weiß gleicher Beleuchtung. Das moderne CSS-Modell OKLCH arbeitet mit Chroma.
Wie die Sättigung definiert ist
Alvy Ray Smith, der das Farbmodell HSV 1978 vorstellte, beschrieb die Sättigung als Abstand eines Farbtons vom Unbunten, also von Weiß oder Grau. Er nannte sie ein relatives Maß, im Unterschied zum absoluten Chroma. Für die CIE ist Sättigung die Buntheit einer Fläche im Verhältnis zu ihrer Helligkeit.
Sättigung in CSS
In hsl() ist die Sättigung der zweite Wert. oklch() ersetzt sie durch das Chroma, das sich gleichmäßiger verhält: Zwei Farben mit gleichem Chroma wirken auch ungefähr gleich bunt.
Sättigung in der Gestaltung
Hohe Sättigung zieht den Blick an und eignet sich für Akzente, etwa für den Call-to-Action. Große Flächen wirken mit gedeckter Sättigung ruhiger. Im Dark Mode werden Farben oft entsättigt, damit sie auf dunklem Grund nicht grell wirken.