Sättigung im Design: wann du Farbe auf- oder abdrehst

Sättigung im Design beschreibt, wie intensiv eine Farbe ist: voll gesättigt ist sie kräftig und rein, völlig entsättigt ist sie grau. Dreh sie auf, wo du Aufmerksamkeit und Energie willst, auf einem Button, einem Sale-Preis oder einer einzelnen Hervorhebung. Nimm sie zurück für große Flächen, langes Lesen, Premiummarken und dunkle Oberflächen, wo kräftige Farbe schnell ermüdet. Die meisten guten Paletten mischen beides bewusst: eine ruhige, weniger gesättigte Basis mit ein oder zwei gesättigten Noten.

Was Sättigung ist und was nicht

Jede Farbe lässt sich mit drei Eigenschaften beschreiben: Farbton (welche Farbe es ist), Helligkeit (wie nah an Weiß oder Schwarz) und Sättigung (wie rein oder vergraut sie ist). Änderst du nur die Sättigung, gleitet ein Kirschrot zu staubigem Rosé und dann zu Grau, ohne heller oder dunkler zu werden. Farbton, Sättigung und Helligkeit erklärt, wie die drei zusammenhängen.

In HSL ist die Sättigung der zweite Wert. Im neueren Farbraum oklch heißt das Gegenstück Chroma, und es verhält sich über Farbtöne hinweg gleichmäßiger, sodass ein Gelb und ein Blau mit gleichem Chroma gleich intensiv wirken. HSL-Farben erklärt das ältere Modell und wie du seine Werte liest.

Wann du die Sättigung aufdrehst

• Das eine, was geklickt werden soll. Ein gesättigter Button auf einer ruhigen Seite braucht keinen Pfeil, der auf ihn zeigt. Das ist die Aufgabe einer Akzentfarbe.
• Kurze, laute Momente. Sale-Ankündigungen, Launch-Posts und Event-Countdowns sollen das Scrollen unterbrechen.
• Junge, verspielte oder sportliche Marken. Kinderprodukte, Energydrinks und Festivals tragen hohe Sättigung oft als Teil ihrer Persönlichkeit.
• Daten, die herausstechen müssen. Sättige in einem Diagramm die Reihe, die zählt, und mach den Rest grau.
• Kleine Flächen auf dunklem Grund. Eine kräftige Farbe auf kleiner Fläche vor fast Schwarz wirkt wie Licht, deshalb funktioniert Neon bei Nacht.

Wann du die Sättigung zurücknimmst

• Große Flächen. Ein ganzer Bildschirm in reiner gesättigter Farbe ermüdet. Hintergründe wirken meist besser leicht vergraut.
• Premium-Positionierung. Gedämpfte, komplexe Farben wie Oliv, Ochsenblut und Schiefer wirken oft durchdachter und teurer als Grundfarben.
• Langes Lesen. Artikel, Dokumente und Dashboards brauchen eine ruhige Fläche, die man eine Stunde lang ansehen kann.
• Dark Mode. Gesättigte Farben glühen und verschmieren auf dunklem Grund. Senke die Sättigung und hebe die Helligkeit etwas an; Dark-Mode-Design erklärt die Details.
• Hinter Fotos und Text. Ein ruhigerer Hintergrund lässt Foto und Worte führen.

Das Flimmerproblem

Stell zwei stark gesättigte Komplementärfarben direkt nebeneinander, etwa Rot auf Grün oder Blau auf Orange, und die Kante zwischen ihnen scheint zu flimmern. Das ist ein optischer Effekt, und er macht Text auf solchen Paaren wirklich unangenehm zu lesen, selbst wenn das Kontrastverhältnis akzeptabel aussieht. Die Lösung: Entsättige eine der beiden Farben oder trenne sie mit einem Neutralton.

So änderst du die Sättigung in CSS

Hex-Codes verstecken die Sättigung, deshalb ist das Anpassen nach Augenmaß in Hex mühsam. Arbeite stattdessen in HSL oder oklch, oder mische eine Farbe mit color-mix() mit Grau.

:root {
  /* HSL: the second value is saturation */
  --brand: hsl(350 80% 48%);
  --brand-muted: hsl(350 35% 48%);

  /* oklch: the second value is chroma */
  --accent: oklch(0.65 0.2 30);
  --accent-soft: oklch(0.65 0.08 30);

  /* color-mix: blend towards a grey of similar lightness */
  --brand-quiet: color-mix(in oklch, var(--brand) 60%, #808080);
}

Eine nützliche Gewohnheit: Definiere jede Markenfarbe von Anfang an in zwei Sättigungen, eine volle Version für Akzente und eine gedämpfte für große Flächen. Dann muss später niemand einen weicheren Ton improvisieren.

Fotos folgen derselben Logik. Ein unruhiges, gesättigtes Foto hinter einer Überschrift konkurriert mit ihr; senke die Sättigung des Fotos um etwa ein Drittel, und die Worte übernehmen die Führung ohne Kasten oder Schatten dahinter. Umgekehrt ist ein einzelnes gesättigtes Objekt in einem sonst gedämpften Foto, ein roter Mantel auf einer grauen Straße, einer der ältesten Wege, den Blick zu lenken.

Sättigung im Druck

Bildschirme können gesättigtere Farben zeigen, als CMYK-Farbe drucken kann, besonders leuchtende Blau-, Grün-, Orange- und Lilatöne. Eine kräftige Bildschirmfarbe wird im Druck oft spürbar matter. Ist Sättigung zentral für deine Marke, erwäge eine Pantone-Sonderfarbe für den Druck und prüfe vor einer großen Auflage einen Proof. RGB vs. CMYK erklärt die Lücke.

Sättigung wirkt auch zusammen mit der Farbtemperatur: Eine warme, gedämpfte Palette wirkt vintage, eine kühle, gedämpfte skandinavisch. Fertige Sets für beide Enden des Reglers findest du bei gedämpften Farbpaletten und leuchtenden Farbpaletten.

Gradiently Marks wenden dasselbe Prinzip auf einen lebendigen Hintergrund an: Die ruhigste, kontrastreichste Fläche wandert hinter den Text, und unruhige Details beruhigen sich dort, sodass die Worte auf einer stilleren Stelle stehen, während der Rest des Marks seine Farbe behält.