Wenn ihr euch noch an den Januar erinnern könnt, war eines meiner Ziele für 2013, mehr über Farbe zu lernen und etwas von dem, was ich lerne, mit euch zu teilen. Ich habe schon früher darüber gesprochen, dass ich das Gefühl habe, dass meine Fähigkeiten im Umgang mit Farben nicht ausreichend sind, und ich habe gesagt, dass ich mir irgendwann in diesem Jahr ein paar Bücher über Farben zulegen würde, in der Hoffnung, das zu ändern.
Einen Geburtstag, einen etwas großzügigen Bruder und einen guten Service von Amazon später, und eine Auswahl an Büchern (darunter ein paar speziell über Farben) sind hier und warten darauf, gelesen zu werden. Danke David.
Ich habe eines der Farbbücher, Design Elements, fertig gelesen: Color Fundamentals, und dachte, ich sollte mit dem Austausch beginnen. Ich möchte damit beginnen, wie wir Farben beschreiben, zum Teil, weil es der Anfang ist, und zum Teil, weil es zu einer gewissen Klarheit in meinem Verständnis von Farbe geführt hat.
Wie wir Farbe beschreiben
Es gibt 3 primäre Möglichkeiten, eine Farbe zu beschreiben, und da das Buch sie hinzugefügt hat, füge ich auch eine vierte Möglichkeit hinzu, Farbe zu beschreiben.
- Farbton – ein anderes Wort für Farbe
- Sättigung (Chroma) – die Intensität oder Reinheit eines Farbtons
- Helligkeit (Wert) – der relative Grad von Schwarz oder Weiß, der mit einem bestimmten Farbton gemischt ist
- Temperatur – die wahrgenommene Wärme oder Kühle einer Farbe
Lassen Sie uns etwas tiefer in die einzelnen Bereiche einsteigen.
Farben sind Farben, und welcher Farbton wir sehen, hängt von der Wellenlänge des Lichts ab, das reflektiert oder erzeugt wird. Ich glaube, ich muss Ihnen nicht erklären, was eine Farbe ist, und da Farbe und Farbton synonym sind, sollten Sie auch wissen, was ein Farbton ist. Ich möchte Sie daran erinnern, dass wir alle Farben unterschiedlich wahrnehmen. Der Farbton, den du siehst, ist vielleicht nicht derselbe wie der, den ich sehe.
Die Sättigung gibt an, wie rein oder intensiv ein bestimmter Farbton ist. 100% Sättigung bedeutet, dass dem Farbton kein Grau hinzugefügt wird. Die Farbe ist völlig rein. Im anderen Extrem erscheint ein Farbton mit 0 % Sättigung als ein mittleres Grau. Je stärker gesättigt (näher an 100 %) eine Farbe ist, desto lebendiger oder heller erscheint sie. Entsättigte Farben hingegen erscheinen stumpfer.
Wie gesättigt ein Farbton erscheint, hängt bis zu einem gewissen Grad auch davon ab, welche Farben neben ihm stehen. Ein zu 50 % gesättigter Farbton neben einem zu 25 % gesättigten Farbton wirkt lebendiger als der gleiche Farbton neben einem zu 75 % gesättigten Farbton.
Die Helligkeit misst den relativen Anteil von Schwarz oder Weiß, der einem bestimmten Farbton beigemischt wurde. Wenn man Weiß hinzufügt, wird die Farbe heller (es entstehen Töne), wenn man Schwarz hinzufügt, wird sie dunkler (es entstehen Schattierungen). Die Wirkung von Helligkeit oder Wert ist relativ zu anderen Werten in der Komposition. Sie können eine Farbe heller erscheinen lassen, indem Sie sie neben einer dunkleren Farbe platzieren.
Je größer der Wertunterschied zwischen Elementen ist, desto größer ist der Kontrast zwischen ihnen. Aus diesem Grund ist die Helligkeit ein gutes Mittel, um den Kontrast zu zeigen und die Hierarchie zwischen den Elementen zu verdeutlichen. Etwa 7 Helligkeitsstufen sind die maximale Variation, die das menschliche Auge wahrnehmen kann. Darüber hinaus wird es schwierig, die Unterschiede zu erkennen.
Die Temperatur ist die wahrgenommene Wärme oder Kühle einer Farbe. Warme Farben sind Rot, Orange und Gelb, während kühle Farben Grün, Blau und Violett sind. Irgendwo im grünen und violetten Spektrum wechselt die Temperatur zwischen warm und kühl.
Wie das Auge die Farbtemperatur erkennt, kann sich je nach Lichtquelle ändern. So kann beispielsweise die tatsächliche Temperatur eines Computermonitors die wahrgenommene Farbtemperatur beeinflussen.
Wärmere Farben rücken tendenziell in den Vordergrund einer Komposition, während kühlere Farben in den Hintergrund rücken. Wie Sättigung und Helligkeit kann auch die Temperatur relativ sein. Setzt man eine warme Farbe gegen eine wärmere, erscheint die ursprüngliche Farbe kühler, als wenn sie gegen eine kühle Farbe gesetzt wird.
Farbharmonie
Bei der Arbeit mit Farben ist es unser Ziel, eine Palette von angenehmen Farbkombinationen zu wählen (außer in den Fällen, in denen eine unangenehme Kombination die Botschaft besser ergänzt). Wir versuchen, eine Art von Farbharmonie zu erreichen.
Farbharmonie kann subjektiv sein. Was für Ihr Auge gut ist, ist es für mein Auge vielleicht nicht. Die Prinzipien der Farbtheorie zielen darauf ab, die Subjektivität zu verringern, indem sie Richtlinien anbieten, die uns dabei helfen, Farbpaare und -gruppierungen zu finden, die mit größerer Wahrscheinlichkeit gut funktionieren.
Eines der Hauptprinzipien besagt zum Beispiel, dass das Auge immer nach Gleichgewicht und Ausgewogenheit in der Farbe sucht, was dazu führt, dass es zu neutralen Kombinationen gelangt, wenn ein Farbton mit seinem Gegenteil oder Komplement kombiniert wird. Das ist einer der Gründe, warum wir oft Nachbilder einer anderen Farbe (aber mit der gleichen Sättigung und Helligkeit) sehen, wenn wir eine Farbe zu lange anstarren.
Die Farbtheorie führt nicht immer zu vorhersehbaren Ergebnissen. Manchmal stimmen Theorie und Praxis nicht ganz überein, was bedeutet, dass wir unser Auge für Farben entwickeln und mit verschiedenen Kombinationen von Farbton, Sättigung und Helligkeit experimentieren müssen.
Die Diskrepanz zwischen Farbtheorie und Farbpraxis
Wie ich oben schon sagte, hat es bei der Lektüre von Color Fundamentals bei mir Klick gemacht. Wir beschreiben Farbe mit den Begriffen Farbton, Sättigung und Helligkeit (HSL), aber wir setzen Farbwerte im Web normalerweise mit Hex-Werten und in geringerem Maße mit RGB-Werten fest. Wäre es nicht sinnvoller, mit dem System zu arbeiten, das die Farbe besser beschreibt?
Hinweis: HSL ist nicht dasselbe wie HSB (Farbton, Sättigung, Helligkeit) oder HSV (Farbton, Sättigung, Wert), die in den meisten Farbtools zu finden sind.
Hex und RGB sind eigentlich zwei Versionen derselben Sache. Beide bieten 256 mögliche Werte für den Anteil von Rot, Grün oder Blau in einer bestimmten Farbe. HSL funktioniert anders. Es gibt keine einfache Möglichkeit, einen Blick auf etwas wie rgb(63, 69, 146) oder sein hexadezimales Äquivalent #3f4592 zu werfen und einfach zu wissen, dass es zu 40% gesättigt oder hsl(236, 40, 41) ist.
Wenn Sie sehen möchten, wie die Umwandlung rechnerisch abläuft, schauen Sie sich einen oder alle der folgenden Links an
- Farbalgorithmen
- RGB zu HSL Farbumwandlung
- HSL zu RGB Farbumwandlung
Warum ist das so? Warum gibt es eine Diskrepanz zwischen dem, wie wir versuchen, Farbe zu verstehen, und dem, wie wir versuchen, sie zu verwenden? Wenn überhaupt, dann ist HSL das intuitivere System, da es die Farben, die wir sehen, tatsächlich beschreibt und mit der Farbtheorie übereinstimmt.
Mir ist klar, dass Farbkenntnisse dadurch entstehen, dass man ein kritisches Auge für Farben entwickelt und Fragen stellt, warum etwas funktioniert oder nicht funktioniert. Und es geht darum, diese Fragen zu beantworten, während man die Farben um sich herum beobachtet.
Es scheint einfach einfacher zu sein, wenn sowohl die Theorie als auch die Praxis die gleiche Sprache sprechen würden. Jetzt, da ich zu dieser Erkenntnis gekommen bin, habe ich beschlossen, mich zu verpflichten, in meinem Code so viel wie möglich HSL-Werte zu verwenden. Der Stolperstein ist IE8 und darunter, die weder hsl() noch rgb() akzeptieren. Sie brauchen hexadezimale Werte. Das ist aber in Ordnung, da SASS die Umwandlung vornehmen kann. Sie können hsl() in SASS verwenden und die Html-Ausgabe als Hexadezimalwert darstellen lassen.
Um mein Engagement zu unterstützen, habe ich begonnen, ein einfaches Farbtool zu entwickeln, das mir beim Lernen und Studieren hilft. Es ist nicht etwas, das man in seinem jetzigen Zustand verwenden möchte, um eine Farbpalette auszuwählen, aber man kann damit mit den Werten für Farbton, Sättigung und Helligkeit herumspielen, um zu sehen, wie sich jeder Wert auf eine bestimmte Farbe und die Farben um sie herum auswirkt. Ich werde das Tool im Laufe der Woche vorstellen.
Schon seit einiger Zeit habe ich vermutet, dass die mathematischen Beziehungen zwischen Farben einen Leitfaden für die Arbeit mit ihnen bieten könnten, und ich habe oft nach diesen Beziehungen in den Hex-Werten von Farben gesucht. Wenn ich hsl() mehr verwende und mit meinem einfachen Farbwerkzeug herumspiele, hoffe ich, dass ich die Theorie mit den Farben, die ich im Design verwende, etwas besser verbinden kann, als es jetzt der Fall ist.
Behalten Sie diese Diskrepanz zwischen der Art und Weise, wie wir über Farben lernen und sie beschreiben, und der Art und Weise, wie wir sie verwenden, im Hinterkopf. Diese Erkenntnis hat mir ein größeres Verständnis dafür gegeben, wie man Farbe besser studieren kann, und deshalb wollte ich dieses Gespräch mit den Grundlagen beginnen, wie wir Farbe beschreiben. In Kürze werde ich weitere Beiträge zum Thema Farbe veröffentlichen, beginnend im Laufe der Woche, wenn ich über das einfache Tool spreche, das ich zu meiner Unterstützung entwickelt habe.
Laden Sie eine kostenlose Leseprobe aus meinem Buch Design Fundamentals herunter.