Aktualisiert 10. Juli 2026

Farbskalen & UI-Paletten: Der Praxisleitfaden

Eine Farbskala ist eine Reihe geordneter Schritte — konventionell von 50 bis 900 nummeriert —, die aus einer einzigen Ausgangsfarbe erzeugt wird, sodass sich eine ganze Palette aus einer Handvoll Entscheidungen ableitet statt aus Dutzenden von Hand gewählter Werte. Die Skala ist für Farbe, was eine Schriftgrößenskala für Schriftgrößen ist: ein kleines System, das die meisten Fragen beantwortet, bevor sie gestellt werden. Dieser Hub versammelt unsere Anleitungen zum Aufbau und Einsatz solcher Skalen; am schnellsten orientierst du dich, indem du eine vollständige Farbrampe öffnest und ihre Anatomie ansiehst.

Eine Farbe rein, ein System raus

Die Arbeitsweise hinter jeder Anleitung hier: Du wählst eine Markenfarbe, und die Mechanik erledigt den Rest — zehn Schritte auf einer Helligkeitskurve platziert, die Sättigung so geformt, dass die Mitte leuchtet und die Enden nutzbar bleiben, eine Neutralskala, die leicht in Richtung des Markenfarbtons getönt ist, und Funktionsfarben für Erfolg, Warnung, Fehler und Info. Was früher vierzig von Hand gewählte hex-Werte waren, wird zu einer Handvoll Ausgangsfarben und einem Satz Regeln, den du nachvollziehen kannst.

Schluss mit der Farbwahl von Hand begründet, warum sich diese Arbeitsweise lohnt, und Aus einer Markenfarbe eine vollständige Palette erzeugen führt die Ableitung von Anfang bis Ende vor. Die beiden Regeln, die den Großteil der Arbeit leisten, haben jeweils eine eigene Anleitung: Helligkeitskurven dazu, warum gleichmäßig wirkende Schritte nicht numerisch linear sein können, und Chroma-Profile dazu, wo die Sättigung ihren Höhepunkt haben sollte und warum sie zu beiden Enden hin auslaufen muss. Eine Neutralskala aufbauen behandelt die leichte Markentönung, die Grautöne davor bewahrt, leblos zu wirken. Das ist auch die Methode, die Scale Composer umsetzt — dort steht die Palette neben Typografie und Raster, alle drei aus einer gemeinsamen Skala abgeleitet.

Die Schritte sind das Vokabular

Die Nummerierung von 50–900 ist keine Zierde — sie macht Farbe erst besprechbar. „Nimm brand-100 für die Tönung und brand-700 für den Text” ist eine Anweisung, die zwei Personen identisch ausführen können. Die folgenden Anleitungen behandeln, was die Zahlen bedeuten, wie viele Schritte eine Skala braucht und warum der Unterschied zwischen benachbarten Schritten sichtbar bleiben muss — eine Skala, deren Schritte sich nicht auseinanderhalten lassen, ist ein Vokabular mit Synonymen, nach denen niemand gefragt hat.

Warum Farbschritte 50–900 heißen zeichnet die Konvention nach und den Raum, den ihre Lücken bewusst lassen, und Farb-Tokens benennen klärt die Frage brand-600 gegen blue-600 — die Namenswahl, die entscheidet, wie schmerzhaft ein künftiges Rebranding wird. Das Vokabular macht sich auch bei Interaktionszuständen bezahlt: Hover- und Pressed-Zustände zeigt, warum „ein Schritt entlang der Skala” bessere Zustandsfarben ergibt als Schwarz oder Weiß in die Basis zu mischen.

Rollen, nicht Farben

Die letzte Schicht ist semantisch: Buttons, Rahmen, Hintergründe und Text verweisen nicht auf rohe Schritte — sie verweisen auf Rollen, die auf Schritte zeigen, wobei Kontrastanforderungen dort geprüft werden, wo die Rollen aufeinandertreffen. Das macht eine Palette wartbar: Stimme die Ausgangsfarbe neu ab, und jede Rolle folgt, weil nachgelagert nie ein hex-Wert fest verdrahtet wurde. Primär, Sekundär, Akzent behandelt die Rollenschicht für Markenfarben, Erfolg, Warnung, Fehler, Info behandelt die Rückmeldungsfarben, und Text auf farbigen Buttons kümmert sich um die Paarung, die jedes Produkt ausliefert: die Wahl der Vordergrundfarbe. Das Farbmodell, das all das berechenbar macht, hat seine eigene Serie im OKLCH-Leitfaden, und dasselbe Rollendenken zieht sich durch design tokens; die Schwellen, gegen die die Rollenpaare geprüft werden, leben im Hub Kontrast.

Anleitungen in diesem Hub

Ein Rebranding in einem Zug erleben

Das stärkste Argument für Skalen gegenüber einzelnen Farbmustern ist, einem System beim Neuabstimmen zuzusehen: Tausche die Ausgangsfarbe und sieh zu, wie sich alles neu ableitet — Farbrampen, Neutraltöne und die Kontrastbeziehungen jedes Schritts bauen sich in einer einzigen Bewegung aus der neuen Ausgangsfarbe wieder auf. Auf einen Satz gebracht, ist das die Lehre dieses ganzen Hubs: Wähle Farben einmal, leite sie für immer ab.

Häufige Fragen

Was bedeuten die Zahlen 50–900 in einer Farbpalette?

Sie kennzeichnen die Schritte einer Farbskala vom hellsten (50) bis zum dunkelsten (900) — eine Konvention, die durch Material Design und Tailwind bekannt wurde. Die Zahlen sind Positionen, keine Messwerte; 500 oder 600 ist typischerweise die Kernfarbe der Marke, und die Lücken lassen Raum für spätere Zwischenschritte.

Wie erstelle ich aus einer Markenfarbe eine vollständige Palette?

Behandle die Markenfarbe als Ausgangsfarbe. Ein Generator liest ihren Farbton und ihre Farbigkeit, setzt etwa zehn Schritte auf einer Helligkeitskurve durch sie hindurch und formt die Sättigung so, dass die Mitteltöne leuchten, während die Extreme nutzbar bleiben. Ergänzende Farben lassen sich dann aus derselben Ausgangsfarbe ableiten.

Warum wirken meine generierten Farben matschig?

Meist eine von zwei Ursachen — die Sättigung wird über die Farbrampe konstant gehalten (sie muss zu Weiß und Schwarz hin auslaufen, wo Bildschirme kaum Farbe zeigen können), oder Farben werden über die Grenze des Bildschirms hinausgeschoben und zurückgeschnitten, was ausgerechnet die Schritte verflacht, die am kräftigsten sein sollten.

Wie viele Farben braucht ein Design-System?

Weniger Ausgangsfarben, als die meisten Teams erwarten — üblicherweise eine Markenfarbe, ein Neutralton, ein paar Funktionsfarben (Erfolg, Warnung, Fehler, Info) und vielleicht ein bis zwei ergänzende Farbtöne. Die Skalen-Mechanik macht aus jeder Ausgangsfarbe zehn Schritte, und die Rollen greifen sich die passenden Schritte heraus.

Kann ich meine Markenfarbe für Hover-Zustände einfach mit Schwarz abdunkeln?

Schwarz beizumischen verschiebt mehr als nur die Helligkeit — Farben werden stumpf und driften oft im Farbton. Eine Skala liefert dir die dunklere Variante, die den Charakter der Farbe bewahrt; deshalb definiert man Hover- und Pressed-Zustände meist als benachbarte Schritte statt als Mischungen.

Was sind semantische Farben?

Farben, die nach ihrer Aufgabe benannt sind statt nach ihrem Farbton — Erfolg, Warnung, Fehler, Info für Rückmeldungen, dazu Rollennamen wie Hintergrund, Rahmen und Akzent. Jede zeigt auf einen Schritt einer Skala, sodass sich das ganze System neu abstimmen lässt, ohne dass irgendetwas umbenannt werden muss.