Was ist eine Farbskala?

Eine Farbskala ist eine geordnete Folge von Abstufungen eines Farbtons, üblicherweise von 50 bis 900 nummeriert, so gebaut, dass die Schritte wahrnehmungsgleich wirken und bestimmte Kombinationen bekannte Kontrastverhältnisse erfüllen. Damit wählt ein Team Farben nach Rolle und Stufe statt nach beliebigen Hex-Werten.

Die Nummerierungskonvention

Die meisten Systeme nummerieren Skalen von 50 (am hellsten) bis 900 oder 950 (am dunkelsten), in Hundertersprüngen. Die Konvention stammt aus Material Design und wurde durch Tailwind gefestigt; sie ist inzwischen verbreitet genug, um ihr zu folgen.

--blue-50:  #EFF6FF
--blue-100: #DBEAFE
...
--blue-500: #3B82F6
...
--blue-900: #1E3A8A

Der Wert einer geteilten Konvention liegt darin, dass "nimm blue-600 für den Rahmen" für eine Designerin, einen Entwickler und einen KI-Assistenten dasselbe bedeutet.

Was eine gute Skala ausmacht

Wahrnehmungsgleichheit. Die Stufen sollten gleich weit auseinander wirken. Interpolation in sRGB leistet das nicht - sie erzeugt Skalen, die sich in der Mitte stauen und bei manchen Farbtönen schlammig werden. In einem wahrnehmungsgleichen Raum wie OKLCH zu arbeiten liefert deutlich bessere Ergebnisse.

Vorhersagbarer Kontrast. In einer gut gebauten Skala sind bestimmte Paarungen verlässlich: Stufe 600 oder höher auf Stufe 50 hält AA für Fließtext, 500 reicht für großen Text. Wenn diese Beziehungen halten, hört man auf, den Kontrast bei Routinepaarungen von Hand zu prüfen.

Konstanter Farbton. Naives Anpassen der Helligkeit verschiebt den Farbton an den Rändern. Blautöne driften beim Abdunkeln ins Violette, Gelbtöne ins Grüne. Den wahrgenommenen Farbton über die Skala stabil zu halten erfordert bewusste Korrektur.

Wie viele Stufen

Zehn (50 bis 900) ist die übliche Voreinstellung und passt für die meisten Produkte. Manche Systeme nehmen elf und ergänzen 950 für dunkle Themes, die etwas unterhalb von 900 brauchen.

Unter etwa sieben entstehen Lücken, an denen jemand einen Ton braucht, den es nicht gibt - und genau dort fängt der Drift an.

Welche Skalen ein System braucht

  • Eine Primärskala für die Markenfarbe
  • Eine neutrale oder Grauskala, die mehr genutzt wird als alle anderen zusammen
  • Semantische Skalen für Erfolg, Warnung, Fehler und Information
  • Optional eine Sekundär- oder Akzentskala

Die neutrale Skala verdient die meiste Aufmerksamkeit, denn dort lebt der Großteil der Oberfläche tatsächlich. Ein leichter Farbstich in den Grautönen, warm oder kühl, ist oft das, was eine durchdachte Oberfläche von einer voreingestellten unterscheidet.

Wo Flash DSM hier steht

Erzeugte Systeme enthalten vollständige Skalen für Primär-, Sekundär-, Neutral- und semantische Farben, produziert in einem wahrnehmungsgleichen Raum, mit Hell- und Dunkelvarianten und über die Paarungen geprüftem Kontrast.