Farbe im Web
Farben kommen an verschiedenen Stellen vor, als Textfarbe, als Hintergrundfarbe, als Rahmenfarbe.
Es gibt eine ganze Reihe von Farbnamen die Teil des CSS-Standards sind und von allen Browsern verstanden werden. Das sind zum einen die Grundfarben red, blue etc. Es sind aber auch ausgefallenere wie orchid, mediumvioletred, navi, seashell.
HTML ohne CSS wird meistens schwarz-weiss dargstellt, mit blauen Links und violett für bereits besuchte Links.
Mit der CSS-Anweisung
color: purple;
können wir dem Text in einem HTML-Element eine andere Farbe geben.
Wir können die Hintergrundfarbe der ganzen Seite anpassen:
body{
background-color: seashell;
}
Technische Hintergründe
Unsere Augen nehmen zum einen hell-dunkel sehr gut wahr, zum anderen sehen wir die drei Grundfarben Rot, Grün und Blau.
Dem nähert man sich bei Bildschirmbau an, in dem jeder Pixel aus einer roten, einer grünen und einer blauen LED besteht.
Jede LED, jede Grundfarbe kann ganz dunkel sein (0% Helligkeit) bis ganz hell (100% Helligkeit). Genauer sind es 256 Abstufungen von 0 (ganz dunkel) bis 255 (ganz hell) je Grundfarbe.
Rechnet man das zusammen, gibt das 16.7 Mio Farben, die man auf einem Bildschirm darstellen kann.
Wie funktioniert das Zusammenspiel dieser Farbkanäle? Hier kann man es ausprobieren:
https://www.csfieldguide.org.nz/en/interactives/rgb-mixer/
Im CSS
Im CSS können Prozente oder exakte Farbwerte notiert werden.
/* Das ist beides Mal das hellste mögliche Rot: */
Color: rgb(100%, 0%; 0%); color: rgb(255, 0, 0);
Zur Hexadezimalen Schreibweise, siehe weiter unten.
Accessibility
Beim gestalten von Websites darf nie vergessen gehen, die Barrierefreiheit zu beachten. Auch Menschen mit Einschränkungen sollten den Inhalt einer Website gut konsumieren können. In Bezug auf die Farbwahl bedeutet das vor allem, einen Mindestkontrast zwischen Text und Hintergrund zu gewährleisten. Denn eine Website muss nicht nur auf dem grossen Monitor im Büro gut aussehen, auch auf dem schwachen Beamer beim Kunden, für sehbeeinträchtige Besucher und Menschen die gerade in der prallen Sonne stehen muss die Website lesbar sein.
Es gibt viele Richtlinien für barrierefreies Webdesign.
Und es gibt Tools um zu testen ob die eigene Website bezüglich diversen Accessibility-Themen gut abschneidet.
Hier ein Tool um den Kontrast einer Website zu überprüfen:
Keine Kontrolle
Wir haben als Webdesigner keine Kontrolle darüber, wie eine Farbe beim Websitebesucher dargestellt wird. Je nach Bildschirmkalibrierung und -helligkeit wirkt eine Farbe ganz anders. Ein Hellgelb kann auf einem anderen Bildschirm grünlich wirken. Als Webdesigner müssen wir immer mal wieder einem Kunden erklären, dass es am Bildschirm keine Farbechtheitsgarantie gibt. Andererseits ist es an uns, diese Thematik bei der Farbwahl zu berücksichtigen.
Hexadezimale Schreibweise
Am meisten werdet ihr die hexadezimale Schreiweise sehen:
Color: #FF4500;
/* Das ist ein orangeroter Farbton, auch ansprechbar über den Farbnamen orangered */
Hexadezimal hat den Vorteil, dass man einen Farbwert sehr kompakt darstellen kann, pro Farbe zwei Zeichen.
Wie geht das? In dem man nicht von 0-9 zählt, sondern mit ein paar zusätzlichen Zeichen von 0-15.
Und das geht so:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9 und jetzt wollen wir die 10 nur mit einem Zeichen darstellen. Wir nehmen dafür das Zeichen a. Dann
b für 11
c (12)
d (13)
e (14)
f (15)
Dann wechseln wir doch noch auf eine zweite Stelle:
10 (16), 11, 12, 13, 14, 15, 16, 17, 18, 19, 1a, 1b, 1c, 1d, 1e, 1f(31), 20 (32)
Und so zählt man hoch bis man bei ff (255) angekommen ist.
Wenn wir möchten, dass eine LED so dunkel wie möglich bleibt, bekommt sie den Wert 00, so hell wie möglich FF. Dann setzt man Rot, Grün und Blau zusammen.
FF FF FF ist also weiss.
00 00 00 ist schwarz.
Damit klar ist, dass es um einen Hex-Code geht, kommt noch ein # (hash) davor und die Leerzeichen weg.
#FFFFFF
#000000
Obiger orangeroter Farbton bedeutet also:
#FF4500
Rot ist voll aufgedreht
Grün leutet schwach
Blau ist ausgeschalten
Auch Hex-Codes kann man online spielerisch erfahren:
https://codepen.io/robdimarzo/pen/xxZgKOR
Kurzform
Es gibt auch noch eine Kurzform, bei der weniger Farbabstufungen möglich sind.
#fff steht für #ffffff
#f80 steht für #ff8800
Weitere Möglichkeiten
Man kann Farben auch mit HSL darstellen (hue, saturation, lightness). Das ist eine intuitivere, aber selten gebrauchte Farbdarstellung.
Es gibt die Möglichkeit zum Farbwert einen Transparenzanteil mitzugeben: rgba(), hsla()
Es gibt das keyword currentColor, damit kann festgelegt werden, dass z.B. die Rahmenfarbe immer die Farbe des Textes hat.