Farbe, Tag- und Nachtmodus
Farbe am Bildschirm
Additive Farbmischung
Farben am Bildschirm werden durch die Mischung von farbigem Licht hergestellt. Für jeden Pixel können drei Lämplein in den Farben rot, grün und blau (abgekürzt «RGB») in unterschiedlicher Intensität leuchten. Leuchten alle drei Lämplein mit voller Kraft, entsteht weisse Farbe.
Additive Farbmischung gibts nicht nur am Bildschirm, sondern auch mit Sonnenlicht. Das Gegenteil von additiver Farbmischung ist subtraktive Farbmischung, z.B. in Malerei, Druck und analoger Fotografie.
256 RGB-Farbstufen
Zur Definition der Licht-Intensität pro Rot/Grün/Blau-Lampe hat sich eine Skala mit 256 Stufen (0–255) etabliert. Zum Beispiel können in CSS RGB-Mischungen mit Werten wie rgb(255, 0, 0) (Rot-Lampe volle Kraft, Grün und Blau aus) geschrieben werden. Auch in DTP-Software wie Illustrator und Sketch wird diese Skala verwendet.
Damit lassen sich 255 × 255 × 255 – über 16 Millionen Farbmischungen beschreiben.
256 Werte sind es, weil 2 × 2 × 2 × 2 x 2 x 2 × 2 x 2 = 28 = 256 nicht zu viel Speicherplatz verbraucht. Binär kann der Wert mit einer Reihe von acht Nullen und Einsen geschrieben werden. Hast du sicher schon mal gehört: achtstellige Binär-Zahlen (8 Bit) heissen ein Byte. Um einen RGB-Farbwert zu speichern, braucht es 3 Byte Speicherplatz.
Hier einige Beispiele:
11111111 = 25510000000 = 12800001100 = 1200001000 = 8
Erklärung: Von rechts nach links verdoppeln die Einsen ihren Wert und werden addiert.
Binär 111 als Dezimalwert: 1 + 2 + 4 = 7.
21 (16 + 4 + 1) binär geschrieben: 10101.
Fun Fact: Du kannst mit 10 Fingern bis 1023 zählen. (Hausaufgabe: Wenn du Kinder hast, bring ihnen bei, mit einer Hand bis 31 zu zählen.)
Hexadezimalwerte
Vollständigkeitshalber hier noch eine Erklärung der sogenannten Hex-Farbwerte (#FA9E0B und Ähnliches). «Hexadezimal» bedeutet «im Sechzehner-System».
Nach der Raute stehen sechs Werte von Null bis «F». Jeder einzelne Wert steht für eine Zahl zwischen Eins und 16. Damit es nach 9 nicht zwei Stellen braucht, um bis 16 zu kommen, werden die Buchstaben A–F verwendet.
Einstellig von 0 bis 16 zählen: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Damit gibt es pro RGB-Kanal zwei Zahlen von 0 bis 16, die – miteinander kombiniert – Werte von 0–255 ergeben: 16 × 16 = 256.
TL;DR: Es ist genau das Gleiche wie oben, also eine Kombination aus drei Werten von 0–255, einfach anders geschrieben.
Farbnamen
In CSS sind auch Farbangaben mit Namen erlaubt. Es gibt aber «nur» 140 solcher Farben.
Nachteile der RGB-Mischung
Mit RGB-Werten kannst du alle möglichen Farben am Bildschirm beschreiben. Dieses Format hat aber gewisse Nachteile. Auch mit Erfahrung ist es z.B. schwierig abzuschätzen, welche Werte zu welchen Farbmischungen führen. Eigenschaften wie Sättigung und Helligkeit sind extrem schwierig zu bestimmen. Vollkommen unmöglich ist es, aus einer bestimmten RGB-Mischung weitere, passende Mischungen abzuleiten, um beispielsweise aus einer durch den Benutzer gewählten Farbe ein passendes Farbschema zu generieren.
Der HSL-Farbraum
Eine Alternative zu einer Farbmischung aus Rot, Grün und Blau gibt es mit dem HSL-Modell. HSL steht für hue (Farbton), saturation (Sättigung) und lightness (Helligkeit).
Ein HSL-Wert sieht z.B. so aus: hsl(0, 100%, 50%). Die erste Zahl steht für einen Farbton von 0–360, die Zweite (in Prozenten) für die Sättigung und die Dritte (in Prozenten) für die Helligkeit.
Es gibt auch die verwandten Farbräume HSI und HSB, wobei das I für ‘intensity’ und das B für ‘brightness’ steht. Das Prinzip ist aber das Gleiche. Der Überbegriff lautet «HSV-Farbraum».
Farbton (Hue), 0–360
Der HSL-Farbraum beschreibt Farbtöne auf einem Kreis (richtig: dem guten alten Farbkreis). Die Werte von 0–360 entsprechen der Grad-Skala. Das heisst, 0 und 360 ist das Gleiche, 180 liegt gegenüber.
So lässt sich z.B. von jedem Farbton die Komplementärfarbe bestimmen, indem 180 addiert wird.
Sättigung (Saturation), 0–100%
Sättigung bedeutet Farbintensität. Hier reicht die Bandbreite von voller Intensität (100%) bis gar keine Farbintensität (0%), was in einem Grauton resultiert. Auf dieser Skala kannst du also (bei gleichbleibender Helligkeit) von Grau zu Bunt interpolieren.
Helligkeit (Lightness), 0–100%
Die Helligkeit reicht von 0% über 50% bis 100%. Kein Licht führt zu Schwarz, volle Lichtintensität zu Weiss. Bei 50% ist die Farbe in «neutralem Licht» sichtbar, d.h. ohne Zusatz von Schwarz oder Weiss.
Auf diese Weise lassen sich vom gleichen Farbton hellere und dunklere Mischungen ableiten.
Du kannst mit diesem Beispiel für HSL-Farben in Codepen üben.
Farbschemata mit HSL-Farben
Mit dem HSL-Farbraum kannst du leicht aufeinander abgestimmte Farbwerte generieren. Ein monchromes Farbschema besteht aus Varianten des gleichen Farbtons entlang der Helligkeits- und Sättigungsachse.
Ein analoges Farbschema besteht aus auf dem Farbenkreis benachbarten Farbwerten. Analoge Farbschemata sind häufig in der Natur anzutreffen und wirken harmonisch. Um ein analoges Farbschema zu erhalten, kannst Du z.B. versuchen, zu einem Farbwert jeweils 30 zu addieren. Es funktioniert aber nicht immer, weil die Farbtöne auf dem Farbkreis nicht ausgeglichen verteilt sind. So ist das gelbe Spektrum viel kleiner als das Grüne. Das heisst, auch mit HSL bleibt ein gewisses Mass an Trial & Error notwendig.
Schliesslich gibt es noch die Möglichkeit, maximal kontrastierende Farbwerte zu bestimmen, indem ein Dreieck (Triadisches Farbschema) oder ein Viereck (Tetradisches Farbschema) über den Farbenkreis gelegt wird – wobei diese Drei-oder Vierecke nicht regelmässig sein müssen.
Tag- und Nachtmodus
Auf immer mehr Geräten ist es möglich, zwischen Tag- und Nachtmodus zu wählen. Dies kann sehr nützlich sein, z.B. im sind Texte bei hellem Umgebungslicht besser lesbar, wenn der Inhalt schwarz auf weiss angezeigt wird. Im Nachtmodus blendet der Screen im Dunkel weniger, was viele Menschen als angenehmer empfinden. Auf OS X kannst du den den Systemeinstellungen unter «Allgemein» wählen.
Im Stylesheet einer Website kannst du diese Einstellung abfragen und je nach Modus verschiedene Farbeinstellungen definieren. Dazu braucht es eine Media Query.
body {
background: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background: black;
color: white;
}
}
Die Regeln innerhalb der Media Query mit der Bedingung prefers-color-scheme: dark gelten nur, wenn der Nacht-Modus aktiviert ist.
Umgekehrt kann auch ein dunkles Farbschema als Grundeinstellung definiert werden, dann wird abgefragt, ob der Tag-Modus aktiviert ist:
@media (prefers-color-scheme: light) {
body {
background: black;
color: white;
}
}
Ein Beispiel für eine Farbmodus-Query in CodePen
Einen Farbmodus auf Knopfdruck
Es ist auch möglich, den Farbmodus direkt aus einem User Interface heraus einstellbar zu gestalten. Dazu braucht es keine Media Query, sondern einen HTML-Schalterelement (Checkbox, Radio Button). Der Zustand des Schalters und Änderungen davon müssen mit JavaScript abgefragt werden. Das wird im zweiten Semester Thema.
Ein Beispiel eines Dokuments mit drei Modi in CodePen
CSS Variablen
Sogenannte CSS Custom Properties sind ein relativ neues CSS Element. Mit ihnen definierst du an einer zentralen Stelle (häufig für den Selektor :root) einen Wert, den du nachher an anderen Orten wiederverwenden kannst. Änderst du den zentral definierten Wert, ändern sich auch alle übrigen Instanzen.
Das kann sehr nützlich sein, z.B. im Zusammenhang mit Farben und Schriftgrössen.
Schreibweise
Eine CSS Variablen wird wie eine CSS-Eigenschaft geschrieben, mit zwei vorangestellten Bindestrichen: --foo.
Ein Wert wird ihr mit einem Doppelpunkt zugeordnet: --foo: rgb(255, 120, 40);
Um die Variable als Platzhalter einzusetzen, wird sie in so geschrieben: var(--foo).
Beispiel CSS Variable
:root {
--txt: black;
--bg: whitesmoke;
}
body {
color: var(--txt);
background: var(--bg);
}
@media (prefers-color-scheme: light) {
:root {
--txt: lightgrey ;
--bg: black;
}
}
Hier gibt es in der Media Query keine neuen Regeln sondern die Variablen erhalten neue Werte.
Ein Beispiel für CSS Variablen in Codepen
Downloads
- Code Beispiel Farbmodus mit Media Query
- Code Beispiel Farbmodus auf Knopfdruck