SaaS-Farbpaletten und warum sie alle blau enden

Die Konvergenz ist real und sie ist kein Mangel an Vorstellungskraft. Vier unabhängige Faktoren haben Blau als ihre sicherste Antwort, und ein Team, das alle vier Entscheidungen sinnvoll trifft, landet dort, ohne es jemals explizit gewählt zu haben.

1. Statusfarben beanspruchen zuerst die guten Farbtöne. Rot ist Gefahr, Gelb ist Warnung, Grün ist Erfolg. Diese sind gelernt, nahezu universell und nicht verfügbar. Was als Markenakzent übrig bleibt, ist Blau, Violett, Türkis oder ein warmer Neutralton, und Blau ist die größte, sicherste Region dessen, was bleibt.
2. Kontrast ist bei Blau am einfachsten. Ein Mittelblau besteht den Kontrast sowohl gegen Weiß als auch gegen fast Schwarz mit minimaler Anpassung. Gelb, Limette und Orange erfordern echte Arbeit in beide Richtungen, und diese Arbeit findet spät statt, unter Zeitdruck, wenn die Lösung lautet: „Mach es blauer“.
3. Forschung zu Vertrauen wird früh und wörtlich zitiert. Jeder Artikel über Markenfarben besagt, dass Blau als vertrauenswürdig und stabil wahrgenommen wird. Für ein Produkt, das die Daten von jemandem verwalten soll, gewinnt dieses Argument die Entscheidung.
4. Defaults. Start-Themes von Frameworks und Komponenten-Bibliotheken liefern ein blaues oder violettes Primary. Ein Team, das dies nie bewusst ändert, hat es trotzdem schon gewählt, und die meisten Teams haben im ersten Monat dringendere Dinge zu ändern.

Dies ist die farbliche Version einer breiteren Konvergenz in Software-Interfaces, bei der gemeinsame Defaults und gemeinsame Ratschläge zu gemeinsamen Ergebnissen führen. Der allgemeine Fall und wie es aussieht, wenn die Generierung automatisiert ist, finden Sie in warum KI-generierte Websites alle gleich aussehen.

Hier ist die Beobachtung, die Ihr Handeln verändert. Öffnen Sie irgendeinen Produktbildschirm (eine Liste, eine Einstellungsseite, einen Editor) und schätzen Sie, wie viel davon die Akzentfarbe ist. Es ist ein primärer Button, vielleicht ein aktives Navigationselement, vielleicht ein Link. Nennen wir es zwei Prozent der Pixel.

Die anderen neunzig-prozentigen bestehen aus Neutraltönen: Seitenhintergrund, Card-Oberflächen, Rahmen, Tabellenzeilen, Fließtext, Sekundärtext, deaktivierte Zustände. Das ist das, was man tatsächlich sieht, wenn man sich Ihr Produkt ansieht, und bei den meisten SaaS-Produkten ist es das *gleiche neutrale Grau* wie bei allen anderen, weil der Akzent die einzige Entscheidung war, die jemand getroffen hat.

Ein Neutralton, der einige Grad in Richtung warmem Sand, kühlem Schiefer, Salbei oder Tinte verschoben ist, wirkt sofort bewusst gewählt, kostet nichts an Kontrast und kann nicht mit einer Statusfarbe kollidieren, da er fast keine Sättigung aufweist. Es ist die effektivste Farbentscheidung in einer Produktbenutzeroberfläche und diejenige, die am häufigsten ignoriert wird.

Paletten-Galerien und Generatoren zeigen fünf Farbfelder auf einer weißen Karte, was alles vorteilhaft aussehen lässt. Eine SaaS-Palette wird an einem viel weniger nachsichtigen Ort beurteilt: auf einem dichten Bildschirm, der stundenlang von jemandem genutzt wird, der eine Aufgabe erledigen und nicht Ihre Farben bewundern möchte.

• Eine Einstellungen-Tabelle. Header-Zeile, Body-Zeilen, Hover, ausgewählt, deaktiviert und ein Rahmen dazwischen. Dies erfordert etwa acht unterscheidbare neutrale Werte und ist der Punkt, an dem eine Palette mit nur drei Grautönen scheitert.
• Ein Formular mit einem Fehler. Gefahrentext, Gefahrenrahmen, Gefahrenhintergrund und ein weiterhin lesbares Label. Drei Rollen, die die meisten Paletten als eine einzige definieren.
• Ein Empty State. Gedämpfter Text auf einer gedämpften Oberfläche – die Kombination, die am seltensten geprüft wurde.
• Acht Stunden. Ein gesättigter Akzent, der in einem Screenshot entzückend wirkt, ist als permanentes Navigations-Highlight ermüdend. Produktfarben werden über einen Arbeitstag beurteilt, nicht bei einem kurzen Blick.
• Dark Mode. Zunehmend der Standard für Entwickler-Produkte und keine bloße Invertierung der Light-Palette. Die detaillierten Spezifikationen finden sich in Dark-Mode-Farppaletten, die Bestand haben.

Das obige Argument ist nur so viel wert wie die Alternativen. Dies sind drei vollständige, SaaS-taugliche Paletten mit ihren realen Hex-Werten, wobei jede den Neutralton anders löst. Keine von ihnen ist ein Moodboard: Jede Rolle, die ein dichter Bildschirm benötigt, ist vorhanden, einschließlich derjenigen, die darüber entscheiden, ob eine Tabelle lesbar ist.

1. 1

   Zuerst den Neutralton wählen

   Legen Sie die Temperatur Ihres Produkts fest, bevor Sie den Akzent wählen: warm (Sand, Ton, Knochen), kühl (Schiefer, Tinte, Stahl) oder getönt in Richtung eines bevorzugten Farbtons. Alles andere ist einfacher, sobald dies festgelegt ist, und dies ist die Entscheidung, die Nutzer tatsächlich wahrnehmen.

2. 2

   Die vollständige neutrale Rampe aufbauen

   Etwa neun Stufen, die perzeptiv und nicht durch einfache Hex-Arithmetik beabstandet sind; einfache Arithmetik häuft alles in der Mitte und macht die Extreme nutzlos. Führen Sie einen kleinen Teil des Farbtons durch die gesamte Rampe, damit sie kohärent bleibt.

3. 3

   Statusfarben reservieren

   Success, warning, danger, info. Legen Sie diese vor dem Akzent fest, damit Sie wissen, was belegt ist, und lassen Sie niemals ein dekoratives Element eine dieser Farben übernehmen.

4. 4

   Den Akzent aus dem Rest wählen

   Jetzt ist das Feld tatsächlich offen, da der Neutralton die Identitätsarbeit leistet und der Akzent nur noch vom Status-Set unterscheidbar, in beiden Modi lesbar und über acht Stunden erträglich sein muss.

5. 5

   Jede Rolle in beiden Modi definieren

   Keine Palette, sondern eine Rollenliste: Background, foreground, card, popover, muted, primary, secondary, destructive, border, input, ring und deren Vordergrundfarben. Alles Undefinierte wird pro Bildschirm improvisiert.

Jedes Jahr gibt es eine Runde Artikel über „SaaS-Paletten-Trends“, und sie sind nicht nutzlos. Sie sind eine gute Orientierung dafür, was derzeit als zeitgemäß gilt. Sie sind jedoch eine schlechte Basis für eine Produktpalette aus einem strukturellen Grund: Ein Trend ist per Definition das, was viele Menschen gleichzeitig tun. Ihn zu übernehmen, führt also zur Konvergenz statt aus ihr heraus. Die Palette, die im Januar frisch wirkte, ist diejenige, die im Juni auch drei Wettbewerber übernommen haben.

Die beständigere Version dieses Instinkts ist es, die *neutrale Temperatur* aus dem zu übernehmen, was man mag, und die spezifischen Farbtöne unangetastet zu lassen. Ein Produkt mit warm-neutralen Tönen wirkt nicht so schnell veraltet wie ein spezifischer Akzent, und es ist die Ebene, die niemand kopiert, weil niemand bemerkt, dass sie die eigentliche Arbeit leistet.

Produkt-UIs werden zunehmend generiert statt gezeichnet, und ein generierter Bildschirm füllt jeden nicht spezifizierten Wert mit dem Standardwert des Modells – demselben Standardwert, den jedes andere Modell auch hat. Wir haben 299 öffentliche DESIGN.md-Dateien analysiert, die speziell so geschrieben wurden, dass ein Coding-Agent ihnen folgt: 86 % listen reine Hex-Werte ohne zugeordnete semantische Rolle auf, und 54 % enthalten mindestens ein nicht messbares Adjektiv, am häufigsten „clean“ oder „modern“.

„Clean und modern“ ist keine Anweisung. Es ist ein Kompliment, und ein Agent erfüllt dies mit seiner durchschnittlichen Vorstellung von clean und modern. Das bedeutet: Blau auf Grau mit gleichmäßig abgerundeten Cards. Eine Palette, die als benannte Rollen mit Werten für beide Modi definiert ist, ändert dieses Ergebnis bereits in einer einzigen Datei.