So erstellen Sie eine schöne Farbpalette

Trotz der Tatsache, dass die Auswahl guter Farben eine Kunst ist, gibt es mehrere Tricks, um die Auswahl einer schönen Farbe zu vereinfachen. Dieser Artikel besteht aus zwei Teilen: Im ersten Teil werde ich Ihnen sagen, was die Palette gut macht, und im zweiten Teil werde ich eine Formel ableiten, mit der Sie eine schöne Palette auswählen können.

Hinweis: Dies ist bei weitem nicht die einzige Möglichkeit, gute Farben auszuwählen, sondern eine Reihe von Heuristiken, die ich selbst beherrsche. Ich hoffe, dies hilft Ihnen dabei, die richtigen Farben für Ihre Website / Anwendung / Ihr Spiel zu finden.

Farbpaletten und Kontrast

Zunächst müssen wir sagen, dass Farben nicht isoliert existieren. Wenn wir über eine schöne Farbe sprechen, bedeutet dies nicht, dass sie hell oder dunkel, gesättigt oder verblasst ist. Wenn wir über Farbanpassung sprechen, sollten wir nicht so sehr über einzelne Farben nachdenken, sondern über Farbsätze oder Farbpaletten.


Von links nach rechts: Super Mario Run, Monument Valley, Altos Odyssee, Lara Croft Go

Wenn wir über Farbsätze nachdenken, sollten wir über deren Interaktion nachdenken: Sollten einige von ihnen hervorstechen oder sich miteinander vermischen? Dies nennt man Kontrast.

Bei der Auswahl schöner Farben kommt es oft darauf an, die richtigen Kontraste für Ihr Design auszuwählen.

Die Schönheit der Blumen hängt davon ab, wie sie in Ihrem Design miteinander arbeiten. Aber wenn es um den Kontrast von Farben geht, kann es doch auf verschiedene Arten geformt werden:

Helligkeit (hell / dunkel)

Helligkeit ist eine Art Kontrast, der leicht zu visualisieren ist. Auf dem HSB-Farbwähler entspricht dies einer Bewegung entlang der vertikalen Achse:


Helligkeit

Im allgemeinen Fall können wir einfach den Kontrast zwischen den beiden Farben erhöhen, indem wir einfach den Unterschied in ihrer Helligkeit erhöhen.


Helligkeitskontrast

Obwohl dies einfach ist, reicht es nicht aus, Qualitätspaletten zu erstellen. Farben variieren nur in der Größe von Schwarz und Weiß und sind einfach nicht so interessant wie Farben, die in mehr Dimensionen interagieren. Was uns zu ...

Tonkontrast

Wir nehmen den Tonwertkontrast in Bezug auf Farbtöne und Sättigungsgrade wahr. Fast wie bei der Helligkeit erhöht eine Erhöhung des Farbton- oder Sättigungsunterschieds im allgemeinen Fall den Kontrast zwischen den Farben.


Schattenkontrast


Sättigung (horizontale Achse des HSB) und Sättigungskontrast

Trotzdem können diese Werte allein nicht das ganze Bild zeichnen. Wir können immer noch Farben wählen, die trotz unterschiedlicher Farbtöne oder Sättigungen immer noch einen schlechten Kontrast aufweisen.


Unterschiedliche Farbtöne und schlechter Kontrast


Unterschiedliche Sättigung und schlechter Kontrast

Was ist hier los? Die Antwort ist, dass verschiedene Farbtöne unterschiedliche interne Tonwerte haben. Für viele Menschen (einschließlich mich) ist es schwierig, sich vorzustellen, welche Tonwerte unterschiedliche Farbtöne annehmen können. Und das bringt uns zu meinem Lieblingstrick ...

Graustufen-Hack

Wenn Sie die Farben in Graustufen anzeigen, kann die Helligkeit des resultierenden Graus als guter Indikator für den Wert von Tönen verschiedener Farben dienen. Aber es ist nicht nur dafür nützlich: Es ist wichtig, wenn Sie ein Design erstellen, das die Bedürfnisse von Menschen mit Behinderungen berücksichtigt. Dies ist eine einfache Möglichkeit, den in einem Design vorhandenen Kontrast unabhängig vom Farbton zu visualisieren.


Interne Tonwerte für verschiedene Farbtöne

Mal sehen, wie diese Tonwerte im HSB-Farbwähler aussehen. Beachten Sie auch, wie sich Änderungen der Tonwerte im Spektrum für jeden Farbton ändern (siehe Spalte ganz rechts):


Wenn wir uns die vorherigen Beispiele ansehen, aber jetzt in Graustufen, ist es viel einfacher zu sagen, welche Farben einen hohen und einen niedrigen Kontrast haben.


Sättigungskontrast: hoher Kontrast oben, schlechter Kontrast unten.


Schattenkontrast: hoher Kontrast oben, schlechter Kontrast unten.

Schauen wir uns die oben gezeigten Spiele noch einmal an, aber jetzt in Graustufen.


Sie können leicht feststellen, dass der Vordergrund im Hintergrund gut zur Geltung kommt, die interaktiven Elemente einen starken Kontrast zu den nicht interaktiven Elementen bilden und dass das Spiel in Graustufen weiterhin spielbar bleibt. Die wichtigste Schlussfolgerung daraus:

Verwenden Sie den Graustufen-Hack häufig und absichtlich, um die in Ihrem Design vorhandenen Kontraste zu visualisieren.

Schöne Kontraste führen zur Schaffung schöner Farbpaletten, also präsentiere ich Ihnen ...

Formel zur Auswahl schöner Farbpaletten

Wenden wir die obige Analyse in umgekehrter Reihenfolge an: Beginnen Sie mit dem Entwurf in Graustufen und fahren Sie dann mit der Auswahl der entsprechenden Farben fort.

1: Bestimmen Sie, wo wir Kontrast brauchen

Erstellen Sie den Rahmen Ihres Designs und entscheiden Sie dann, in welchen Bereichen des Rahmens Sie mehr Kontrast und in welchen weniger benötigen.

2: Färben Sie das Design in Graustufen

Versuchen Sie, den Designrahmen nur in Graustufen zu färben. Stellen Sie sicher, dass Bereiche, die mehr Kontrast erfordern, den größten Helligkeitsunterschied aufweisen. Dieser Schritt muss in der endgültigen Auflösung des Entwurfs durchgeführt werden. Kleine Designelemente (z. B. Logos und Anwendungssymbole) erfordern einen besonders hohen Kontrast, um kleine Elemente hervorzuheben.

3: Grundfarben wählen

Wählen Sie die Grundfarben, mit denen Sie arbeiten möchten. Dies ist ein subjektiver Schritt, und Sie können Tools wie ShapeFactory's Pigment oder Adobe Color CC verwenden , um ihn auszuwählen. Unterhaltsame Tatsache: Einige Farbkombinationen sind so beliebt, dass sie den Status eines Trails erhalten .

4: Passen Sie die Farben an, um die entsprechenden Tonwerte zu erhalten

Suchen Sie nach dem Aufnehmen der Farbtöne das Intervall der Tonwerte, in dem der Farbton ungefähr dem Grautonwert aus der zuvor gezeichneten Skizze entspricht. Wechseln Sie beim Experimentieren mit Helligkeit und Sättigung zwischen Real- und Graustufenmodus. Ihre Aufgabe ist es, eine Farbpalette zu erhalten, die, wenn sie in Schattierungen angezeigt wird, dem Design aus Schritt 2 entspricht.

Beispiel 1


(1) Rahmen- und (2) bevorzugte Graustufenkontraste


(3) Ausgewählte Grundfarben

Wenn wir zu der oben gezeigten Farbpalette gelangen möchten, müssen wir herausfinden, welche Bereiche jeder Farbe in etwa dem Design in Graustufen entsprechen.


Entsprechende Tonwerte für Grundfarben

Jetzt können wir Farbkombinationen aus jedem Teil dieser Bereiche auswählen:


(4) Mehrere Farbpalettenoptionen

Beispiel 2

So sah dieser Prozess bei der Entwicklung meiner Overlink-Anwendung aus:


Prozess von links nach rechts, von oben nach unten: Drahtmodell, Graustufen, Grundfarben, endgültiges Design

Glückwunsch! Ich hoffe, dies hilft Ihnen bei der Auswahl von Farbsätzen, die dort kontrastieren, wo Sie sie benötigen, dort mischen, wo Sie sie nicht benötigen, und insgesamt schön aussehen.

Kontrast allein ist nicht der wichtigste Aspekt für die Erstellung eines großartigen Designs, spielt jedoch eine wichtige Rolle bei der Auswahl schöner Paletten.