Warum Farbstufen 50–900 heißen

Die Nummern 50–900 auf einer Farbskala sind Positionsbezeichnungen von hell nach dunkel: 50 ist der blasseste Ton, 500 liegt in der Mitte der Rampe als üblicher Markenkern, 900 ist die dunkelste Stufe. Das Schema wurde 2014 durch Googles Material Design bekannt und verbreitete sich über Tailwind CSS — und wie die font-weight-Nummern, denen es ähnelt, benennen die Werte Positionen, keine gemessenen Größen.

Diese kurze Geschichte beantwortet die wörtliche Frage. Die nützlicheren Fragen sind, warum Nummern besser sind als Namen, warum die Skala bei 50 statt bei 100 beginnt und wofür die Lücken zwischen den Hundertern da sind — Konventionen, die man eher verstehen als auswendig lernen sollte, das durchgehende Thema unseres Leitfadens zu Farbskalen.

Woher stammt die Nummerierung 50–900?

Als Google 2014 Material Design veröffentlichte, lieferte sein Farbsystem jeden Farbton als nummerierte Rampe aus: 50, dann 100 bis 900 in Hunderterschritten, wobei die 500 als Identitätston galt — der Wert, den die Richtlinien als Primärfarbe der Farbe bezeichneten. Tailwind CSS übernahm dieselbe Nummerierung für seine Standardpalette und trug sie in den Mainstream der Entwickler; seine Skalen liefen ursprünglich von 100 bis 900, und ein 50er-Ton sowie ein 950er-Fast-Schwarz kamen an den Enden hinzu, als reale Interfaces danach verlangten. Radix ging seinen eigenen Weg mit Stufen von 1 bis 12 nummeriert — was selbst ein Beleg dafür ist, dass die tragende Idee geordnete numerische Positionen sind, nicht die konkreten Werte.

Farbskala-Nummern lesen sich wie die CSS-font-weight-Nummerierung — 100 bis 900, mit 400 als normal und 700 als fett — und diese Parallele lohnt es sich als Parallele zu benennen: ob nun das eine Schema das andere inspiriert hat oder nicht, beide lösen dasselbe Problem auf dieselbe Weise. Ein grobes numerisches Raster, von leicht nach schwer, mit Platz zwischen den Werten.

Warum Nummern statt hell, heller, am hellsten?

Namen brechen zusammen, sobald man sie erweitert. Zwei Varianten eines Blaus können hell und dunkel sein; vier lassen sich mit Mühe als am hellsten, hell, dunkel und am dunkelsten bezeichnen; bei zehn wird das Benennen absurd. Nummern überleben, weil sie drei Dinge leisten, die Namen nicht können:

• Sie sortieren. blue-100 bis blue-900 ordnen sich in einer Token-Liste, einem Export, einem Autocomplete-Dropdown von selbst. Benannte Stufen sortieren alphabetisch: dunkel, dunkler, hell, heller — ein Durcheinander.
• Sie lassen sich erweitern. Eine Stufe zwischen „hell“ und „heller“ einzufügen erzwingt Umbenennungen im ganzen System; ein 950er zu einer 100–900-Skala hinzuzufügen benennt nichts um.
• Sie vermitteln Abstand. Ein Sprung von 300 auf 700 ist erkennbar größer als einer von 500 auf 600, und „zwei Stufen dunkler“ ist Rechnen. Der Abstand zwischen „hell“ und „dunkler“ ist undefiniert.

Warum beginnt die Skala bei 50 — und was bedeutet 500?

Die 50 erfüllt ein echtes Bedürfnis: einen Ton unter 100, für fast weiße Lasuren und Seitenhintergründe, für die die 100 schon zu farbig war. Ihre Bezeichnung folgt der Logik des Rasters selbst — die Hälfte von 100, eine Stufe unter der ersten vollen Stufe.

Die 500 ist der Mittelpunkt des Laufs von 100 bis 900, und Materials Entscheidung, sie als Identitätston jeder Farbe zu behandeln, verfestigte sich zu einer branchenübergreifenden Gewohnheit: Wenn jemand „unser Blau“ sagt, meint er meist die 500 — oder die 600, da Buttons mit weißem Text den Kern für den Kontrast oft eine Stufe dunkler drücken. Es gibt auch einen physikalischen Grund, warum der Kern zur Mitte der Rampe tendiert: an den Extremen der Helligkeit kann ein Farbton nicht viel Sättigung halten, daher lebt die am deutlichsten als Marke erkennbare Version einer Farbe meist in den Mitteltönen.

Öffne eine vollständig beschriftete 50–900-Rampe im Scale Composer — zehn Stufen mit ihren Nummern, Helligkeit und hex-Werten sichtbar: das Vokabular dieses Artikels, live.

Wofür sind die Lücken zwischen den Nummern da?

Platz zum Einfügen. Ein Schema mit den Nummern 1–10 wäre voll; ein Schema in Hunderterschritten kann neue Werte hinzugewinnen, ohne eine einzige bestehende Stufe umzubenennen. So hat sich das Schema tatsächlich entwickelt: Dunkle Interfaces schufen Bedarf an mehreren eng beieinanderliegenden Fast-Schwarztönen — Oberflächenfarben knapp über reinem Schwarz — und die Antworten landeten in der Lücke unter 1000. Scale Composers Zwölf-Stufen-Variante funktioniert so: Sie fügt den zehn Standardstufen 950 und 975 hinzu, erweitert das dunkle Ende, während jede andere Bezeichnung an ihrem Platz bleibt.

Bedeutet eine 500 in jedem System dasselbe?

Nein — und das ist der ehrliche Kern des Themas: Die Nummern sind Positionen, keine Messungen. Kein Standard legt fest, welche Helligkeit eine 500 haben muss, also garantiert nichts, dass die 500er zweier Systeme übereinstimmen. Tailwinds blue-500, Materials blue 500 und die 500 deiner Palette sind drei verschiedene Farben, die zufällig dieselbe Adresse teilen.

Scale Composers eigene Stufensatz-Varianten belegen das innerhalb eines einzigen Tools. Alle drei Sätze verteilen ihre Stufen gleichmäßig über denselben Helligkeitsbereich (L ≈0,97 bis hinunter zu ≈0,25), sodass dieselbe Bezeichnung je nach Anzahl der Stufen auf der Rampe bei einer anderen Helligkeit landet:

Die 500er-Zeile schwankt um mehr als eine ganze Stufe an Helligkeit, und die 900er-Zeile ist noch krasser: Im Zwölf-Stufen-Satz liegt die 900 bei L ≈0,40, weil 950 und 975 das tiefe Ende übernommen haben. Gleiche Ausgangsfarbe, gleiches Tool, gleiche Bezeichnung — andere Farbe. Daraus folgt die praktische Regel: Innerhalb eines Systems navigierst du nach den Bezeichnungen; beim Vergleich zwischen Systemen vergleichst du gemessene Helligkeit und Kontrast, nicht die Nummern.

Welchen Stufensatz solltest du wählen — 8, 10 oder 12?

Die drei Sätze passen zu drei Situationen. Acht Stufen (50, 100, 300, 500, 600, 700, 800, 900) eignen sich für schlanke Paletten — Marketing-Sites und kleine Produkte, bei denen weniger Entscheidungen ein Vorteil sind; der Satz lässt 200 und 400 weg, die Stufen mit den wenigsten Aufgaben. Zehn ist der Standard, in den die meisten Produkt-UIs bequem passen. Zwölf (mit 950 und 975) ist für Dark-Mode-lastige Produkte gedacht, bei denen Oberflächen unterscheidbare Fast-Schwarztöne brauchen, die eine Zehn-Stufen-Skala nicht mitbringt.

Der Unterschied lässt sich am leichtesten beurteilen, wenn beide auf dem Bildschirm stehen. Vergleiche den 8- und den 12-Stufen-Satz auf derselben Ausgangsfarbe — gleiche Farbe, gleicher Helligkeitsbereich; beobachte, was die zusätzlichen Stufen am dunklen Ende bringen und was dir der schlankere Satz überall sonst erspart.