Wie verwendet man Farben innerhalb einer HTML Webseite oder eines CSS Stylesheets? In diesem Artikel erkläre ich euch Hex, RGB und HSL kurz und bündig.
Standardisierte Farbnamen
Das einfachste und schnellste Mittel, um Farben zu verwenden, sind HTML Farbnamen. Das sind standardisierte Sets, die von allen Browser Herstellern implementiert wurden und somit interpretierbar sind.
Das sind oftmals einfache Bezeichnungen wie black, red, blue, maroon oder teal, die auf eine alte Palette bestehend aus 16 Farben zurückgreift (VGA-Palette).
Im Laufe der Zeit, wurden diese Paletten aber so sehr erweitert, dass ein Browser auch mit Bezeichnungen wie snow, papayawhip, springgreen, honeydew oder lightgoldenrodyellow keine Probleme hat, diesen eine entsprechend vordefinierte Farbe zuzuweisen.
Hexadezimal Farben
Eine weitere Möglichkeit ist es, Farben über eine Hexadezimalwert zu bestimmen. Dies geschieht in dem Format #RRGGBB.
Die ersten beiden Ziffern stehen für die Intensität der Farbe Rot, die nächsten beiden für die Farbe Grün und die letzten beiden für die Farbe Blau. Diese Werte reichen jeweils von 00 (0 als Dezimalzahl) bis FF (256 als Dezimalzahl).
Ein sattes Vollton Rot bekommt man also beispielsweise mit #FF0000. Kombiniert man diese Werte erhält man eine der 16,7 Millionen Mischfarben wie Gelb (#FFFF00), Magenta (#FF00FF), Pink (#FFC0CB) oder einen Blauton (#63B8FF).
Grautöne erhält man sehr einfach, indem man alle drei Werte gleich wählt, also #222222, #666666 etc., dabei ist auch die Kurzschreibweise #222 bzw. #666 legitim.
RGB Farben
Wer lieber mit Dezimalzahlen hantiert, wird die RGB Notierung bevorzugen. Hier gibt man nämlich wie bei den als Hexadezimalzahl kodierten Farben jeweils die Intensität der Farbanteile der Primärfarben Rot, Grün und Blau an.
Den Rotton aus dem letzen Abschnitt bekommt man schlicht mit rgb(256,0,0).
| CSS Syntax: rgb(1,2,3) | |||||||
| # | Wert | Beschreibung | |||||
| 1 | red | Rot-Anteil, 0-256 | |||||
| 2 | green | Grün-Anteil, 0-256 | |||||
| 3 | blue | Blau-Anteil, 0-256 | |||||
RGBA Farben
RGBA erweitert die rgb() Notierung um Opazität (Praktisch das Gegenteil von Transparenz). Der vierte Parameter ist eine Zahl zwischen 0 und 1, wobei die Eins 100% meint.
Möchte man zum Beispiel einen blauen Hintergrund halb-transparent gestalten, so schreibt man: rgba(0,0,256,0.5).
| CSS Syntax: rgba(1,2,3,4) | |||||||
| # | Wert | Beschreibung | |||||
| … | … | … | |||||
| 4 | alpha | Definiert die Opazität von 0 bis 1 | 0 = 0%, 1 = 100% | |||||
HSL Farben
HSL ist etwas schwieriger zu erklären, aber umso praktischer in der Anwendung. HSL steht für hue, saturation, lightness, also Farbton, Sättigung, Helligkeit.
Während man sich den RGB Farbraum als Würfel vorstellen kann, handelt es sich bei dem HSL Farbraum um einen Zylinder, der alle Farben in einem Farbkreis umspannt. Der Kern des Zylinders ist Grau, zur Außenseite hin werden die Farben kräftiger (Sättigung). Die Oberseite ist weiß, die Unterseite Schwarz (Helligkeit).
Entsprechend können wir so eine Farbe wählen, indem wir die Position auf dem Farbkreis bestimmen und diesem Wert jeweils einen Grad (im Sinne der Stärke) der Sättigung und Helligkeit zuweisen.
Der Vorteil bei diesem System ist, dass man den Farbwert super einfach nach belieben optimieren kann, ohne sich Gedanken machen zu müssen, wie man die RGB Farben mischen müsste, um vielleicht einen helleren oder gesättigteren Farbton zu erhalten.
| CSS Syntax: hsl(1,2,3) | |||||||
| # | Wert | Beschreibung | |||||
| 1 | hue | Definiert einen Gradposition auf einem Farbkreis (von 0 bis 360) | 0/360 ist Rot, 120 ist Grün, 240 ist Blau | |||||
| 2 | saturation | Definiert die Sättigung von 0 – 100 (%) | 0% ist ein Grauton, 100% ist der Vollton (volle Sätigung) | |||||
| 3 | lightness | Definiert die Helligkeit von 0 – 100 | 0% ist Schwarz, 50% Normal, 100% Weiß | |||||
HSLA Farben
Auch hier kommt wieder nur die Opazität hinzu:
| CSS Syntax: hsla(1,2,3,4) | |||||||
| # | Wert | Beschreibung | |||||
| … | … | … | |||||
| 4 | alpha | Definiert die Opazität von 0 bis 1 | 0 = 0%, 1 = 100% | |||||
Ein paar Worte zur Anwendung (HTML, CSS)
Diese Farbcodes lassen sich generell überall innerhalb CSS verwenden, wo Farben verlangt werden (v.a. color, background-color ). Die Wahl der jeweiligen Systems (RGB, HSL, Hex) ist euch dabei natürlich selbst überlassen.
Innerhalb von HTML Tags wie <font color="xy">Text</font> sollte man vorzugsweise auf die standardisierten Farbnamen oder Hexadezimalzahlen zurückgreifen, wenn man dies nicht lieber gleich über CSS mittels color: xy; lösen möchte. In HTML5 sollte der <font>-Tag nicht mehr verwendet werden!
