Was ist eine Farbrampe (Farbskala)?

Eine Farbrampe — auch Farbskala genannt — ist ein Farbton, ausgedrückt als geordnete Folge von Helligkeitsstufen: typischerweise rund zehn Farbfelder derselben Farbe, von einem fast weißen Ton bis hinunter zu einem fast schwarzen Ton, beschriftet von 50 am hellen Ende bis 900 am dunklen Ende. Die Rampe ist die atomare Einheit, aus der moderne UI-Paletten gebaut werden — eine Palette ist eine Menge von Rampen, nicht eine Menge einzelner Farben.

Diese Struktur ist inzwischen nahezu universell. Googles Material Design organisiert sein gesamtes System rund um tonale Skalen jedes Farbtons, Tailwind liefert jede Standardfarbe als abgestufte Skala, und Radix veröffentlicht seine Farben als zwölfstufige Skalen. Die Stufenzahlen und Bezeichnungen unterscheiden sich; die Idee nicht: Farbe kommt als geordnete Familie, nicht als einzelnes Farbfeld. Dieser Artikel behandelt, was eine Rampe ist, wofür jede Stufe da ist und warum sich die Struktur durchgesetzt hat — die Grundlage für alles Weitere in unserem Leitfaden zu Farbskalen.

Warum eine Farbe in vielen Intensitäten statt vieler Farben?

Zähl mal, was ein einziger blauer Button von einer Oberfläche verlangt. Eine Füllung im Ruhezustand. Ein Hover-Ton. Ein Ton für den gedrückten Zustand. Eine deaktivierte Variante. Ein Fokus-Ring. Ein blasser Schleier hinter der gerade ausgewählten Zeile. Ein Rahmen für die Outline-Variante. Ein dunkleres Blau, das als Linktext lesbar bleibt. Eine Markenfarbe — und schon acht verschiedene Werte, bevor Dark Mode die Liste verdoppelt.

Das ist die Intuition, auf der die Rampe aufbaut: Oberflächen brauchen weit häufiger dieselbe Farbe in vielen Intensitäten, als sie viele Farben brauchen. Das meiste, was in einer UI wie Farbarbeit aussieht — Zustände, Betonung, Tiefe, Auswahl — ist in Wirklichkeit Intensitätsarbeit an bereits vorhandenen Farbtönen.

Ohne Rampe wird jeder dieser Bedarfe durch Erfindung beantwortet: eine Pipette, ein „20 % heller”, eine Schätzung nach Augenmaß — jede für sich getroffen, jede etwas anders als die letzte, bis das Produkt ein Dutzend Fast-Blaus trägt, die niemand zuverlässig auseinanderhalten oder sich merken kann. Mit einer Rampe wird jeder Bedarf durch einen Nachbarn beantwortet: die Hover-Füllung ist typischerweise die nächste Stufe, der Auswahl-Schleier stammt aus den hellsten Stufen, der Rahmen aus den hell-mittleren. Auswählen ersetzt Erfinden, und Konsistenz hängt nicht mehr vom Gedächtnis ab.

Was macht jede Stufe einer Farbrampe?

Die Bänder unten sind eine praktische Konvention, die viele Systeme teilen, keine Regel — aber sie bewähren sich gut in der Praxis:

• 50–100 — Tönungen und Hintergründe. Schleier, ausgewählte Zeilen, dezente Chips: Farbe, die über eine Fläche gespürt statt angeschaut wird.
• 200–300 — Rahmen und Hover-Füllungen. Trennlinien, Eingabefeld-Konturen, die Füllungen sekundärer Hover-Zustände.
• 400 — die Brücke. Icons und sekundäre Betonung; oft die am wenigsten genutzte Stufe.
• 500–600 — der Markenkern. Buttons, Links, aktive Zustände: die Version der Farbe, die man als „das Markenblau” bezeichnen würde.
• 700–900 — Text und dunkle Flächen. Stufen, die dunkel genug sind, um als Text auf den hellen Tönungen lesbar zu sein und als markengetönte dunkle Flächen zu dienen.

Hier ist diese Anatomie an einer echten Rampe, in Scale Composer erzeugt aus der Ausgangsfarbe #2563eb — also oklch(0.546 0.215 262.9) — mit dem Skalenverhältnis 1,333:

Zwei Details lohnt es sich aus der Tabelle herauszulesen. Die Helligkeit der Ausgangsfarbe selbst (≈0,55) liegt zwischen den Stufen 500 und 600 — die erzeugte Rampe platziert ihren Markenkern dort, wo die Markenfarbe tatsächlich lebt. Und die Helligkeitswerte sind nicht gleichmäßig verteilt: Die hellen Stufen liegen dicht beieinander, während das dunkle Ende größere Schritte macht, weil sich am hellen Ende die Aufgaben drängen. Dieser Abstand ist gewollt — erzeugte Rampen platzieren ihre Stufen auf einer Kurve, was ein Thema für sich ist.

Öffne diese zehnstufige blaue Rampe in Scale Composer — dieselbe Tabelle als lebende Farbfelder, jede Stufe beschriftet, mit sichtbarer Helligkeit und Hex.

Woher kommen die Stufenwerte einer Rampe?

Bei handgebauten Rampen aus dem Auge einer Designerin. Bei erzeugten Rampen aus Regeln — eine Zusammenfassung lohnt sich, weil sie erklärt, was der Screenshot oben tut. Stufen werden auf einer Helligkeitskurve platziert, die die Auflösung am hellen Ende bündelt. Die Sättigung folgt ihrem eigenen Plan, erreicht ihren Höhepunkt dort, wo die Rampe am härtesten arbeitet, und wird an den Enden auf einem Minimum gehalten, damit die Extreme erkennbar farbton-treu bleiben. Chroma wird an jeder Helligkeit unter der Farbraum-Obergrenze (Gamut) gedeckelt, sodass keine Stufe in eine anders aussehende Farbe abgeschnitten wird. Und wenn zwei benachbarte Stufen einander bis auf 0,02 L nahekommen — grob ein gerade noch wahrnehmbarer Unterschied — warnt der Scale Composer, dass sie begonnen haben, in Gleichheit zu verschmelzen. Jede Regel ist ein Thema für sich; der Punkt hier ist, dass die Stufen einer Rampe platziert werden, nicht gesammelt.

Ist eine Farbrampe dasselbe wie ein Verlauf?

Verwandt, aber nein. Ein Verlauf ist kontinuierlich — jeder Wert zwischen zwei Farben existiert. Eine Rampe ist diskret: eine feste Menge benannter Stufen. (Der Begriff „color ramp” lebt auch in 3D- und Datenwerkzeugen — Blenders Color-Ramp-Node, kartografische Rampen — wo er meist bedeutet, einen Wertebereich auf einen Verlauf abzubilden; das UI-Design hat das Wort für die abgestufte Form übernommen.) Genau die Diskretheit ist der Punkt: Stufen lassen sich benennen, im Code als Tokens wie blue-500 referenzieren, exportieren und versionieren. Einen Verlauf kann man nur abtasten; über eine Rampe kann man sprechen.

Wie viele Stufen braucht eine Rampe?

Rund zehn ist die übliche Voreinstellung, und die Varianten des Scale Composer rahmen sie ein: ein achtstufiger Satz für schlankere Paletten, zehn als Voreinstellung und ein zwölfstufiger Satz, der 950 und 975 ergänzt — Fast-Schwarztöne, die sich in dunklen Oberflächen bezahlt machen. Nützlicher als die Anzahl ist die Verteilung: Egal wie hoch die Zahl, eine Rampe braucht den Großteil ihrer Auflösung am hellen Ende, wo sich die Flächen- und Rahmen-Aufgaben drängen.

Eine Rampe beweist sich durch das, was sie beantworten kann. Stell ein einzelnes Farbfeld neben eine vollständige Rampe in Scale Composer — gib beiden dieselbe Karte auf: eine Füllung, ein Hover, einen Rahmen, einen getönten Hintergrund, lesbaren Text auf der Tönung. Das Farbfeld antwortet einmal und ist erschöpft; die Rampe hat für jede Frage einen Nachbarn.