Jedes Mal wenn ich mit einem neuen Projekt angefangen habe, habe ich mir diese drei Fragen gestellt:

1. Mit welchem Farbmodell arbeite ich am besten? Welches Farbmodell erlaubt die bessere Harmonie und Hierarchie?

2. Wie kombiniere ich die Farben richtig?

3. Wie kann ich eine gut skalierbare Palette erstellen, die sowohl für Light als auch für Dark Mode funktioniert?

In diesem Teil erkläre ich, warum ich mich für das HSB-Farbmodell entschieden habe und mit welchen Problemen ich während der Arbeit mit anderen Farbmodellen konfrontiert war.

Designen in RGB(HEX), HSB oder HSL?

Ich erkläre und zeige kurz, wie die gängisten Farbmodelle funktionieren. Wenn du über die Farbsysteme und deren Aufbau mehr wissen möchtest, kannst du dich zum Beispiel in Wikipedia informieren. Das Buch von Markus Wäger: "Das ABC der Farbe" kann auch sehr hilfreich sein.

RGB und HEX

Das RGB-Modell wird ganz oft von Designern für die Darstellung von Farben benutzt. Ganz einfach erklärt, die RGB Farbkodierung beschreibt die Intensität von Rot, Grün und Blau in einer Farbe. Die Intensität wird mit einer Zahl von 0 bis 255 repräsentiert. Zum Beispiel können wir eine hellblaue Farbe mit einem Anteil von Rot (135), Grün (195) und Blau (245) definieren.

Das HEX-Modell bezeichnet die Farben anstelle der drei dezimalen Ausdrücke für Rot, Grün und Blau zusammengefasst mit einem 6-stelligen Hexadezimal-Code. Bei diesem System wird eine Farbe durch drei aufeinander folgende Hexadezimalzahlen dargestellt, die jeweils für eine Farbe des RGB-Farbraums stehen: #RRGGBB. Die Werte der Intensität bewegen sich bei HEX Farben zwischen 00 (entspricht der Dezimalzahl 0) und FF (entspricht der Dezimalzahl 255). Zum Beispiel ist #FF0000 ein reines Rot. In der Tat bedeutet #FF, dass das Rot die höchstmögliche sowie das Blau und das Grün die niedrigste Intensität erreicht.

Wie man die Farbe von RGB zu HEX umwandeln kann, kannst du hier nachschauen.

Bei kleineren Projekten, in denen ich nur mit bis zu drei Abstufungen einer Farbe arbeite, ist es nicht kompliziert die Werte für Abstufungen zu definieren. Sobald das Projekt zwischen fünf und zehn Abstufungen einer Farbe benötigt (zum Beispiel für Diagramme oder verschiedenen Tabellen), stoße ich auf ein Problem. Mit dem RGB-Farbmodell ist es nicht einfach intuitiv zu verstehen, wie man einen helleren oder einen dunkleren Wert der primären Farbe erreichen kann, ohne dass die Harmonie dabei zerstört wird. Das ist der Grund dafür, dass das RGB-Modell für mich nicht gut funktioniert.

HSB

Das HSB-Farbmodell beschreibt drei Grundmerkmale von Farben:

H steht für Hue (Farbton).

Der Farbton ist die Farbe, die von einem Objekt reflektiert oder absorbiert wird. Der Farbton wird als Gradzahl zwischen 0° und 360° auf dem Standard-Farbkreis angegeben und meistens mit dem Namen der Farbe (z.B. Rot, Orange oder Grün) bezeichnet.

S steht für Sättigung (Saturation).

Die Sättigung beschreibt die Reinheit oder Intensität einer Farbe. Sie stellt den Grauanteil im Verhältnis zum Farbton dar und wird als Prozentwert zwischen 0% (Grau) und 100% (voll gesättigt) ausgedrückt.

B steht für Helligkeit (Brightness).

Die Helligkeit beschreibt die visuelle Wahrnehmung der Lichtmenge, die von einer Lichtquelle ausgeht und bestimmt wie hell eine Farbe wirkt. Die Helligkeit wird in einem anderen Zusammenhang auch als Luminanz bezeichnet und bewegt sich im Bereich von 0% bis 100%. Wenn die Helligkeit 0% beträgt, wird die Farbe unabhängig von Farbton oder Sättigung schwarz wiedergegeben.

Die Kombination von Farbton-Sättigung-Helligkeit ist ein menschlicher Ansatz eine Farbe zu beschreiben. Merke dir nächstes Mal, wie du jemandem eine Farbe beschreibst oder welche Wörter du bei der Beschreibung verwendest. Wenn wir zum Beispiel hören, dass eine Farbe lebendiger wirken soll, dann denken wir automatisch an Sättigung und Reinheit. Die Tatsache, dass das HSB-Modell auf der menschlichen Farbwahrnehmung basiert, gibt mir die Möglichkeit meine Vorstellungen effizient auf das Design zu übertragen.

HSL

Genau so wie beim HSB-Farbmodell werden auch in HSL drei Grundmerkmale von Farbe beschrieben: H für Hue (Farbton), S für Sättigung (Saturation), L für Leichtigkeit (Lightness). Somit ist der einzige Unterschied zu HSB die Leichtigkeit (Lightness), die anders dargestellt wird. In diesem Fall zeigt die Leichtigkeit wie nah eine Farbe an Schwarz oder Weiß liegt. Wenn die Leichtigkeit 0% beträgt, wird die Farbe unabhängig von Farbton oder Sättigung schwarz. Im Gegensatz zum HSB-Farbmodell entspricht 100% der Leichtigkeit einer weißen Farbe. Das ist der größte Unterschied zwischen den beiden Farbmodellen.

HSL- und HSB-Farbmodelle sind sehr ähnlich. Etwas, was mich persönlich verwirrt, ist dass die HSL-Helligkeitseigenschaft eine seltsame Mischung aus Sättigung und Leichtigkeit hat. So ist bei 50% Leichtigkeit und 0% Sättigung die Farbe Grau.

Entscheidung

Trotz der Tatsache, dass CSS das HSL-Farbmodell unterstützt, habe ich entschieden mit HSB zu arbeiten. Am Ende wandle ich meine Farben in RGB-Werte um und stelle diese dem Entwickler zur Verfügung. Weitere Aspekte, die meine Entscheidung beeinflusst haben, sind:

Erstens, der Farbton (Hue) bietet eine fantastische Möglichkeit verschiedene Farbvariationen zu erzeugen, da ich so viele Möglichkeiten zwischen 0° und 360° habe. Wenn ich die Werte leicht nach oben oder leicht nach unten bringe, bekomme ich eine Reihe von schönen Farbvariationen zur Auswahl.

Zweitens, mit Hilfe von Sättigung ist es einfacher die optischen Farbkorrekturen anzupassen. Für den Fall dass ich eine Farbe habe, die wirklich alles in meinem Entwurf überwältigt, kann ich diese schnell korrigieren, indem ich die Sättigung verringere. In dem Beispiel unten (oben) sind die blauen Teaser Boxen mit 90% Sättigung gestaltet. Jeder kann sofort sehen, dass sie total aus der Reihe tanzen und zu viel Aufmerksamkeit auf sich ziehen. Ein hoher Sättigungswert von Blau zerstört die Balance zwischen verschiedenen Teasern. Im unteren Teil des Bildes wurde die Balance mithilfe von Sättigung korrigiert.

Drittens, Schwarz ist nicht das Gegenteil von Weiß. Das erklärt sich, wenn man betrachtet wie Schwarz und Weiß gebildet sind:

• Schwarz: Farbton und Sättigung können alles sein. Helligkeit wird auf 0% gestellt.

• Weiß: Farbton kann alles sein. Sättigung wird auf 0% gestellt. Helligkeit wird auf 100% gestellt.

Eine andere Beweis-Möglichkeit besteht darin, einer beliebigen Farbe Schwarz oder Weiß hinzuzufügen. Um Weiß hinzuzufügen, musst du deine Farbe in Richtung Weiß verschieben. Weiß befindet sich in der oberen linken Ecke.

Um Schwarz hinzuzufügen, musst du deine Farbe in Richtung Schwarz verschieben. Da Schwarz die gesamte Unterseite des Farbauswahlrechtecks ist, verringert das Hinzufügen von Schwarz nur die Helligkeit. Die Sättigung spielt keine Rolle. Auf praktischer Ebene sind die dunkleren Farbtöne, die du durch Hinzufügen von Schwarz erhalten hast, im Vergleich zu den helleren Versionen weniger lebendig.

Einer der Gründe dafür, dass wir das merkwürdig finden, ist dass es in der Natur kein reines Schwarz gibt. Eine gute Lösung eine lebendigere und gesättigtere Palette zu erstellen ist, statt Schwarz hinzuzufügen, Weiß zu entfernen. Dadurch wird die Sättigung erhöht und die Helligkeit verringert.

Welches Farbmodell dir am besten passt und alle deine Ansprüche erfüllt, kannst du selbst entscheiden. Es gibt keine richtige und keine falsche Lösung. Ich würde vorschlagen, zu versuchen, mit allen Modellen ein User Interface zu erstellen. Nur so kann man alle drei Farbmodelle richtig beurteilen und eine für sich selbst richtige Entscheidung treffen.