Gerade Neulinge sind oft verwirrt, wenn es um Farben im Web geht. Doch selbst die erfahreneren Anwender*innen verstehen nicht immer, was es mit den unterschiedlichen Farbwerten auf sich hat. Wann werden sie angewendet und was genau bedeuteten sie eigentlich? Gibt es den perfekten Farbwert, der immer funktioniert und die bestmöglichen Ergebnisse liefert?
Auf der Suche nach einer Antwort kam uns die Idee für einen Artikel. Warum nicht die unterschiedlichen Farbformate durchgehen und erklären, wofür sie gedacht und wie sie aufgebaut sind. Genau das haben wir hier nun vor.
Alles ist Rot, Gelb und Blau. Oder doch Grün?
Im Kindergarten oder der Grundschule lernen wir alle erst einmal, dass es sogenannte Grundfarben gibt. Rot, Gelb und Blau. Aus diesen drei Grundfarben entstehen alle anderen Farben. Oder anders formuliert: Mit Rot, Gelb und Blau ist es uns möglich, alle weiteren Farben zu mischen. Deshalb nennt man sie auch Grund- oder Primärfarben.
Am Monitor funktioniert das so allerdings nicht. Wir mischen hier keine Farben, um eine andere zu erhalten. Vielmehr werden Monitore entsprechend beleuchtet. Bildschirme erschaffen ihre Farben also nicht durch Mischen, sondern indem sie Licht emittieren, und zwar nicht Rot, Gelb und Blau, sondern im RGB-Farbraum Rot, Grün und Blau. Für Gelb wird rotes mit grünem Licht kombiniert.
Doch es soll hier gar nicht so sehr um Farblehre und deren Hintergründe gehen, sondern vielmehr um die unterschiedlichen Modelle, welche im Web Verwendung finden.
Die vier gängigsten Farbwerte im Web
Anfangen werden wir mit einfachem CSS wie Farbnamen und entsprechenden Hexwerten der Farben. Auch RGB und RGBA spielen eine Rolle, ebenso wie HSL und HSLA, das wohl logischste Format aus Sicht von Anwender*innen. Doch fangen wir am Anfang an und mit den Werten, die wir alle relativ schnell verstehen können, weil wir bereits mit ihnen gearbeitet haben.
Farbnamen in CSS
CSS kennt in seinem Standard bestimmte Namen, die dann in Farben umgewandelt werden. Da die Farbnamen nativ von CSS unterstützt werden, konnte es (zumindest früher) sein, dass diese potenziell performanter waren als RGB- oder HSL-Werte. Dabei ging es aber immer nur um einen minimalen Vorteil, also nichts von allzu großer Bedeutung.
Zunächst waren es 16 Farben, wobei mit CSS2 weitere hinzukamen und mit CSS3 und CSS4 die Palette ebenfalls noch einmal deutlich erweitert wurde. Jede Farbe ist mit einem Schlüsselbegriff versehen. Beispielsweise »yellowgreen«, welches dann in den Hexwert #9acd32 umgewandelt wird. Ganz einfach zu verstehen und zu nutzen. Ein gelber Hintergrund wäre dann so zu realisieren.
background: yellow;
HEX-Farben
Bei Hex-Farben bleibt das System ebenfalls Rot, Grün, Blau. Es wird aber umgewandelt. Statt Base16 kommt Base10 zum Einsatz, was bedeutet, dass »250« zu »FA« wird. Das Ganze ist sehr verwirrend, nicht unbedingt logisch für den Betrachter und daher auch nicht einfach so aus dem Kopf zu erstellen. Hexwerte entstehen also nicht in einem kreativen Prozess, sondern weil sie gebraucht werden und möglichst kurz sind.
Interessant und oft nicht gewusst ist, dass auch hexadezimale Farben einen Alphakanal unterstützen. Dieser wird am Ende angehängt. Ein durchsichtiges Grau wäre also »#7a7a7a7a«. Hexadezimale Farben sind sinnvoll für den Computer, aber schlecht für den Menschen, weil diese im Kopf stets in RGB umgewandelt werden müssen, um sie korrekt zu verstehen. Sie sind nicht gut lesbar. Ein gelber Hintergrund würde in CSS dann so aussehen. Auf den ersten Blick ist für den Laien unklar, dass es sich um die Farbe Gelb handelt.
background: #ffff00;
RGB und RGBA
Bei RGB ist alles recht logisch, weil es sehr gut verständlich aufgebaut. Mit den RGB-Werten steuern wir das rote, grüne und blaue Licht. Mit RGBA fügen wir dem Ganzen zudem einen Alphakanal, also Transparenz hinzu. Alles sehr simpel zu verstehen und gut zu steuern, selbst für Laien. Je nachdem, wie wir die Lichter mischen, erzeugen wir im RGB-Farbraum somit entsprechende Farben und können diese auch für das Web verwenden. Ein gelber Hintergrund würde in CSS dann so aussehen.
background: rgb(255, 255, 0);
HSL
Tja, und dann gibt es noch den HSL-Wert, den viele gar nicht kennen. Eigentlich verrückt, denn das HSL-Farbformat ist sicherlich das sinnvollste oder vielmehr logischste unter allen Varianten. Jedenfalls im klassischen Verständnis von Farben.
HSL steht dabei für Hue, Saturation und Lightness. Also Farbton, Sättigung und Helligkeit. Der Farbton (0 bis 360) beschreibt die Farbe. Die Sättigung (0 bis 100) gibt an, wie intensiv diese Farbe dargestellt wird. Und die Helligkeit legt fest, wie dunkel oder hell der Farbton am Ende ausgegeben wird. Auch ein Alphakanal ist möglich. Genau wie bei RGB wird hier aus HSL einfach ein HSLA mit abschließendem Alphakanal. Ein gelber Hintergrund in CSS würde mit HSL dann folgendermaßen dargestellt werden.
background: hsl(60, 100%, 50%);
Was ist denn nun das beste Format für Farbwerte?
Im Grunde ist die Sache ganz einfach. Kurz und performant ist im Web immer besser, was der Grund dafür ist, dass allgemein vor allem Hex-Farben genutzt werden. Logisch oder verständlich sind diese jedoch nur im Grafikprogramm, nicht unbedingt aus dem Kopf heraus.
RGB ist zwar logisch zu verstehen, wirkt aber etwas abstrakt. HSL hingegen ist sehr gut zu begreifen und macht am meisten Sinn, findet dafür gleichzeitig jedoch am wenigsten Verbreitung und Support.
Das beste Format ist am Ende schlichtweg das Format, mit dem ihr am effektivsten arbeiten könnt. Wer viel mit Farben zu tun hat und ständig Helligkeiten oder Sättigungen verändert, wird mit HSL schneller sein als alles erst in Hex-Farben umzuwandeln. Nutzt also das Format, was zu euch und eurem Projekt passt. In Sachen Performance sind die Unterschiede in diesem Bereich nämlich zu vernachlässigen. Der Standard ist und bleibt aber die Verwendung von hexadezimalen Farben.
by A-DIGITAL one
Unsere Herzen schlagen Digital, unsere Projekte leben Digital, unsere Kunden lieben und schätzen Digital! Die einzigartige digitale Performance, die wir seit 1999 an den Tag legen.
Mit unserem Team von über 45 Experten begleiten wir Sie auf Ihrem Weg der digitalen Transformation. Mit klaren Strategien, persönlicher Betreuung und exzellenter Ausführung entwickeln wir, innovativ und individuell, maßgeschneiderte digitale Lösungen, die performen und verkaufen können.