Adaptiert aus unserem zukünftigen Buch Refactoring UI

Haben Sie diese trendigen Farbpalettengeneratoren gesehen? Wenn Sie eine Farbe auswählen, passen Sie einige Parameter mit musikalischen Phrasen wie „Triade“ oder „4. Dur“ an - und erhalten Sie fünf perfekte Farben für Ihre Website?



Ein solcher rechnerischer und wissenschaftlicher Ansatz zur Auswahl des perfekten Farbschemas ist äußerst verführerisch, aber nicht sehr nützlich.

Wenn Sie nicht möchten, dass die Site so aussieht:

Was du wirklich brauchst

Mit fünf Hex-Codes machen Sie nichts. Um etwas Reales zu bauen, ist eine viel vollständigere Palette erforderlich.



Eine gute Farbpalette kann in drei Kategorien unterteilt werden.

Grau

Text, Hintergrund, Bedienfelder, Formularelemente - fast alles davon ist in der grauen Oberfläche vorhanden.



Und Sie brauchen mehr graue Farben als Sie denken. Es scheint, dass drei oder vier Farbtöne viel sind, aber sehr bald möchten Sie etwas, das etwas dunkler als Farbton Nr. 2 ist, aber etwas heller als Farbton Nr. 3.

In der Praxis ist es ratsam, 8-10 Farbtöne zu wählen (dazu später mehr). Dies ist nicht so sehr, um nach dem Unterschied zwischen den Farben Nr. 77 und Nr. 78 zu suchen, sondern eine ziemlich ausreichende Menge.



Echtes Schwarz sieht in der Regel unnatürlich aus. Beginnen Sie also mit einem sehr dunklen Grau und wechseln Sie allmählich zu Weiß.

Primärfarben

Die meisten Websites benötigen eine oder zwei Farben für grundlegende Aktionen, Navigationselemente usw. Diese Farben definieren das Gesamtbild der Website: diejenigen, die Sie dazu bringen, Facebook als „blau“ zu betrachten, obwohl es tatsächlich meistens grau ist.

Wie bei der Graupalette müssen Sie eine Palette (5-10) mit helleren und dunkleren Farbtönen auswählen.



Die hellsten Farbtöne können als getönter Hintergrund für Warnungen nützlich sein, während dunklere für Text hervorragend geeignet sind.

Akzentfarben

Zusätzlich zu den wichtigsten benötigt jede Site mehrere Akzentfarben , um mit dem Benutzer zu kommunizieren.

Um eine neue Funktion hervorzuheben, können Sie eine attraktive Farbe auswählen, z. B. Gelb, Pink oder Blaugrün:



Möglicherweise sind auch Farben erforderlich, um verschiedene semantische Zustände hervorzuheben, z. B. Rot, um destruktive Aktionen zu bestätigen:



... gelb für Warnungen:



... oder grün, um einen positiven Trend hervorzuheben:



Und ein paar Schattierungen dieser Farben, obwohl sie in der Benutzeroberfläche sehr sparsam verwendet werden sollten.

Wenn Sie ein Design erstellen, in dem Farbe zur Unterscheidung oder Klassifizierung ähnlicher Elemente beiträgt (z. B. Linien in Diagrammen, Kalenderereignissen oder Tags in einem Projekt), sind möglicherweise mehr Akzentfarben erforderlich.

Im Allgemeinen erfordert eine komplexe Benutzeroberfläche häufig bis zu zehn verschiedene Farben mit jeweils 5-10 Schattierungen.

Definieren Sie die Farben im Voraus

Wenn ein etwas hellerer oder dunklerer Farbton erforderlich ist, müssen Sie keine CSS-Präprozessorfunktionen wie Aufhellen oder Abdunkeln verwenden. Sie erhalten also 35 leicht unterschiedliche blaue, die alle gleich aussehen.

Definieren Sie stattdessen einen festen Satz von Farbtönen zur Auswahl.



Wie erstelle ich eine solche Palette?

Wählen Sie zuerst eine Grundfarbe

Beginnen Sie mit der Grundfarbe, auf der die hellen und dunklen Farbtöne basieren.

Es gibt keinen wirklichen wissenschaftlichen Weg, aber für Grund- und Akzentfarben ist es eine gute Faustregel, einen Farbton zu wählen, der gut zum Hintergrund der Schaltfläche passt.



Es ist wichtig zu beachten, dass es hier keine wirklichen Regeln gibt, wie "bei 50% Helligkeit beginnen" oder dergleichen. Jede Farbe verhält sich etwas anders, so dass Sie sich nur auf Ihren Geschmack verlassen müssen.

Grenzen setzen

Wählen Sie dann die dunkelsten und hellsten Farbtöne aus. Dies ist ebenfalls kein wissenschaftlicher Ansatz, aber es hilft, sich vorzustellen, wo die Farben verwendet werden, und sie entsprechend diesem Kontext auszuwählen.

Der dunkelste Farbton bleibt normalerweise für den Text und der hellste für den Hintergrund des Elements. Ein einfacher Alarm ist ein gutes Beispiel, wenn diese Farben kombiniert werden.



Beginnen Sie mit einer Farbe, die dem Ton der Primärfarbe entspricht, und ändern Sie dann die Sättigung und Helligkeit, bis Sie zufrieden sind.

Füllen Sie die Lücken aus

Wenn Sie sich für die Grund-, Dunkel- und Helltöne entschieden haben, müssen Sie nur noch die Lücken zwischen ihnen füllen.

Für die meisten Projekte benötigen Sie mindestens fünf Farbtöne pro Farbe und vorzugsweise näher an zehn, um sich nicht zu schämen.

Neun ist eine großartige Zahl, da sie sich gut teilt, was das Ausfüllen der Lücken etwas erleichtert. Nennen wir den dunkelsten Farbton 900 , die Basis 500 und den hellsten 100 .

Wählen Sie zunächst die Farben 700 und 300 aus , die genau in der Mitte der beiden Intervalle liegen: Sie sind der perfekte Kompromiss zwischen den Farben auf beiden Seiten.



Dadurch entstehen vier weitere Intervalle auf der Skala ( 800 , 600 , 400 und 200 ), die auf die gleiche Weise gefüllt werden.



Am Ende erhalten Sie eine ziemlich ausgewogene Farbpalette, die ausreicht, um Ihre Designideen zu verwirklichen.

Was ist mit Grau?

Bei Grautönen ist die Grundfarbe nicht so wichtig, aber ansonsten ist der Prozess der gleiche. Beginnen Sie an den Rändern und füllen Sie die Lücken aus, bis Sie die richtige Palette erhalten.



Wählen Sie den dunkelsten Farbton anhand der Farbe des dunkelsten Textes im Projekt und den hellsten - den, der als heller, fast weißer Hintergrund gut funktioniert.

Dies ist keine Wissenschaft.

Egal wie Sie möchten, Sie sollten sich nicht nur auf die Mathematik verlassen, um die perfekte Farbpalette auszuwählen.

Ein systematischer Ansatz wie der oben beschriebene ist zunächst einmal großartig, aber haben Sie keine Angst, ihn bei Bedarf zu ändern.

Sobald Sie wirklich anfangen, Ihre Farben im Projekt zu verwenden, möchten Sie fast zwangsläufig die Sättigung eines bestimmten Farbtons geringfügig ändern oder einige Farbtöne heller oder dunkler machen. Vertraue deinen Augen, nicht Zahlen.

Versuchen Sie einfach, nicht zu viele neue Farben hinzuzufügen, wenn dies optional ist. Wenn Sie die Palette nicht einschränken, können Sie im Allgemeinen ohne Farbsystem bleiben.