Eine Anleitung zum Auswählen hübscher Farben

Obwohl das Auswählen guter Farben eine Kunst ist, gibt es ein paar Tricks, mit denen Sie das Auswählen hübscher Farben vereinfachen können. Dieser Artikel besteht aus zwei Teilen: Ich werde zunächst erläutern, was eine gute Farbpalette ausmacht, und anschließend eine Formel skizzieren, mit der Sie eine gut aussehende Palette erstellen können.

Haftungsausschluss: Dies ist bei weitem nicht die einzige Möglichkeit, gute Farben auszuwählen, sondern vielmehr eine Reihe von Heuristiken, die ich selbst übernommen habe. Ich hoffe, dass dies Ihnen helfen kann, die richtigen Farben für Ihre Website / App / Ihr Spiel / Ihr Hab und Gut auszuwählen.

Farbpaletten und Kontrast

Zunächst müssen wir erkennen, dass Farben nicht isoliert existieren. Eine hübsche Farbe ist nicht hell oder dunkel, gesättigt oder entsättigt. Wenn wir über das Auswählen von Farben nachdenken, sollten wir nicht über einzelne Farben nachdenken, sondern über das Auswählen von Farbsätzen oder Farbpaletten.

Von links nach rechts: Super Mario Run, Monument Valley, Alto's Odyssey und Lara Croft Go

Wenn wir in Form von Farbsätzen denken, müssen wir über deren Zusammenspiel nachdenken: Sollen bestimmte hervorstechen oder sich ineinander mischen? Dies nennt man Kontrast.

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

Wie die Farben, die Sie verwenden, in Ihrem Design zusammenarbeiten, bestimmt, wie hübsch sie aussehen. Aber wenn es um Farbkontraste geht, gibt es verschiedene Möglichkeiten, wie sie existieren können:

Helligkeit aka. Hell dunkel

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

Helligkeit

Im Allgemeinen können Sie den Kontrast zwischen zwei Farben einfach erhöhen, indem Sie den Helligkeitsunterschied erhöhen.

Helligkeit Kontrast

Obwohl dies einfach ist, reicht es nicht aus, um großartige Paletten zu erstellen. Farben, die nur in der Menge von Weiß und Schwarz variieren, sind einfach nicht so interessant wie Farben, die in mehr Dimensionen zusammenspielen. Welches bringt uns zu ...

Tonwertkontrast

Wir können uns Farbkontraste in Form von Farbtönen und Sättigungsstufen vorstellen. Ähnlich wie bei der Helligkeit wird durch Erhöhen des Farbtonunterschieds oder der Sättigung im Allgemeinen der Kontrast zwischen den Farben erhöht.

FarbtonkontrastSättigung (horizontale Achse in HSB) und Sättigungskontrast

Trotzdem geben diese Werte nicht das ganze Bild wieder. Wir können immer noch Farben wählen, die, auch wenn sie sich in Farbton oder Sättigung unterscheiden, immer noch einen schlechten Kontrast haben.

Unterschiedliche Farbtöne und schlechter KontrastUnterschiedliche Sättigung und schlechter Kontrast

Was gibt? Die Antwort ist, dass verschiedene Farbtöne unterschiedliche inhärente Tonwerte haben. Für viele Menschen (auch für mich) ist es schwer vorstellbar, welche Tonwerte unterschiedliche Farbtöne annehmen können. Was mich zu meinem Lieblingstrick bringt ...

Der Graustufen-Hack

Wenn Sie Farben in Graustufen anzeigen, kann die Helligkeit des resultierenden Graus als guter Indikator für den Wert verschiedener Farbtöne dienen. Nicht nur das, es ist auch nützlich, wenn Sie auf Barrierefreiheit ausgelegt sind. Dies ist eine einfache Methode, um den Kontrast zu visualisieren, der in einem Design unabhängig vom Farbton vorhanden ist.

Inhärente Tonwerte für verschiedene Farbtöne

Sehen wir uns an, wie diese Tonwerte in einem HSB-Farbwähler aussehen. Beachten Sie auch, wie sich die Tonwerte über das Spektrum jedes Farbtons ändern, hervorgehoben in der Spalte ganz rechts:

Wenn wir uns einige der vorherigen Beispiele ansehen, aber in Graustufen, können wir leichter erkennen, welche Farben einen hohen und einen niedrigen Kontrast haben.

Sättigungskontrast: Hoher Kontrast oben, schlechter Kontrast unten.Farbtonkontrast: Hoher Kontrast oben, schlechter Kontrast unten.

Werfen wir einen weiteren Blick auf die oben gezeigten Spiele, jetzt jedoch in Graustufen.

Sie können leicht sehen, wie die Vordergrunde aus den Hintergründen hervorgehen, wie sich interaktive Elemente stark von nicht interaktiven Elementen abheben und wie die Spiele, wenn sie die ganze Zeit über in Graustufen gehalten würden, wahrscheinlich immer noch spielbar wären. Der Schlüssel zum Mitnehmen ist hier:

Verwenden Sie den Graustufen-Hack großzügig und häufig, um die Kontraste zu visualisieren, die in Ihren Designs vorhanden sind.

Hübsche Kontraste ergeben hübsche Farbpaletten, und so präsentiere ich Ihnen…

Eine Formel für die Auswahl hübscher Farbpaletten

Wenden wir die oben beschriebene Analyse an, aber in umgekehrter Reihenfolge: Beginnen Sie mit einem Graustufen-Design und arbeiten Sie dann daran, die entsprechenden Farben auszuwählen.

1: Bestimmen Sie, wo Sie Kontrast benötigen

Erstellen Sie ein Drahtmodell für Ihr Design und entscheiden Sie dann, welche Bereiche Ihres Drahtmodells viel Kontrast benötigen und welche weniger Kontrast benötigen.

2: Färben Sie Ihr Design mit Graustufen

Färben Sie Ihr Drahtgitterdesign nur in Graustufen. Stellen Sie sicher, dass die Bereiche Ihres Designs, die den meisten Kontrast benötigen, den größten Helligkeitsunterschied aufweisen. Stellen Sie sicher, dass Sie diesen Schritt in der endgültigen Auflösung Ihres Designs ausführen. Kleinere Designs (z. B. Logos und App-Symbole) erfordern möglicherweise höhere Kontraste, um feinere Elemente zu definieren.

3: Wählen Sie Ihre Basisfarbtöne
Wählen Sie die Grundfarben, mit denen Sie arbeiten möchten. Dies ist der subjektive Teil, und Sie können Werkzeuge wie ShapeFactorys Pigment oder Adobe Color CC verwenden, um einige auszuwählen. Wissenswertes: Einige Farbkombinationen sind so beliebt, dass sie den Status "Trope" erreicht haben.

4: Passen Sie Ihre Farben an, um passende Tonwerte zu erhalten
Nachdem Sie Ihre Farbtöne ermittelt haben, ermitteln Sie, welcher Bereich von Tonwerten unter diesem Farbton in etwa dem zuvor skizzierten Grauwert entspricht. Schalten Sie Ihren Bildschirm zwischen Farbe und Graustufen um, während Sie mit den Helligkeits- und Sättigungswerten in Ihrem Farbwähler spielen. Ihr Ziel ist es, eine Farbpalette zu erhalten, die in Graustufen Ihrem Entwurf in Teil 2 entspricht.

Beispiel 1

(1) Drahtmodell und (2) Bevorzugte Kontraste in Graustufen(3) Unsere Grundfarbenauswahl

Wenn wir eine Farbpalette für das oben Genannte erstellen möchten, werden wir feststellen, welche Bereiche jeder Farbe in etwa unserem Graustufendesign entsprechen.

Entsprechende Tonwertbereiche für unsere Grundfarben

Wir können jetzt Farbkombinationen von überall in diesen Regionen auswählen:

(4) Einige Optionen für Farbpaletten

Beispiel 2

So sah dieser Prozess bei der Entwicklung meines App-Overlinks aus:

Prozess: Von links nach rechts, Von oben nach unten: Drahtmodell, Graustufen, Grundfarben, Endgültig

Glückwunsch! Hoffentlich hilft Ihnen dies dabei, eine Reihe von Farben auszuwählen, die sich dort kontrastieren, wo sie nicht passen, und die insgesamt hübsch aussehen.

Ob Ihr Design gut aussieht, hängt nicht nur vom Kontrast ab, sondern auch davon, ob Ihre Farbpaletten gut aussehen.

Overlink ist das Projekt, das diesen Artikel inspiriert hat. Wenn Sie 3D Logic Puzzles mögen, können Sie es (kostenlos) unter iOS herunterladen: https://itunes.apple.com/au/app/overlink/id1453086788