Farben

Farben lassen sich in CSS auf ein halbes Dutzend Arten hinschreiben. Im Browser landet am Ende dieselbe Farbe. Die Notationen unterscheiden sich aber darin, wie gut du mit ihnen arbeiten kannst.

01 / 02Vier Notationen für dieselbe Farbe

<div class="kasten schluessel">Schlüsselwort</div>
<div class="kasten hex">Hexadezimal</div>
<div class="kasten rgb">rgb</div>
<div class="kasten hsl">hsl</div>

.kasten {
  padding: 12px;
  margin-bottom: 4px;
  color: #ffffff;
}

/* Rund 150 Namen gibt es, und sie sind selten genau
   der Ton, den man wollte. */
.schluessel {
  background-color: crimson;
}

/* Zwei Stellen je Kanal, Rot Grün Blau. */
.hex {
  background-color: #dc143c;
}

/* Dieselben Zahlen, nur dezimal statt hexadezimal. */
.rgb {
  background-color: rgb(220 20 60);
}

/* Farbton, Sättigung, Helligkeit. */
.hsl {
  background-color: hsl(348 83% 47%);
}

• Schlüsselwörter wie red, white oder crimson. Es gibt rund 150 davon, und für echte Gestaltung sind sie zu grob. Nützlich sind vor allem transparent und inherit.
• Hexadezimal, also #dc143c, je zwei Stellen für Rot, Grün und Blau. Die dreistellige Form #f0a ist dasselbe wie #ff00aa. Design-Werkzeuge geben Farben meist so aus.
• rgb() nennt dieselben drei Kanäle als Zahlen von 0 bis 255. Lesbarer als Hex, sonst identisch.
• hsl() dreht die Sache um. Es nennt den Farbton in Grad auf dem Farbkreis, dazu Sättigung und Helligkeit in Prozent.

Genau genommen sind es drei gleiche und eine fast gleiche. Im Inspector steht an den ersten drei Kästen im Auskunftsstreifen background-color: rgb(220, 20, 60), am vierten rgb(219, 20, 60). Das ist ein Punkt Unterschied im Rotkanal, den kein Auge sieht. Die Kontrastzeile daneben springt trotzdem von 4,99:1 auf 5,03:1. Schuld ist die Rundung, denn hsl(348 83% 47%) ist auf ganze Prozent gekürzt und trifft die Farbe damit nicht exakt. Für die Gestaltung ist das egal. Fürs Verständnis heißt es, dass hsl() eine Farbe anders beschreibt, aber nicht genauer.

Drei der vier nehmen noch einen Wert für die Deckkraft, nur die Schlüsselwörter nicht. Bei rgb() und hsl() schreibst du ihn nach einem Schrägstrich, bei Hex als siebte und achte Stelle. rgb(0 0 0 / 10%) ist eine Linie, die zu zehn Prozent schwarz durchscheint.

Warum sich eine Farbe in hsl() leichter abwandeln lässt als in Hex und was oklch() an der Helligkeit noch besser macht, steht in der CSS-Referenz unter color.

02 / 02currentColor und der Kontrast

<div class="hinweis">
  <p>Ein Hinweis in Rot. Rahmen und Linie unten sind nirgends eingefärbt.</p>
  <hr>
</div>

<div class="hinweis gruen">
  <p>Dieselbe Komponente in Grün. Geändert wurde genau eine Zeile.</p>
  <hr>
</div>

.hinweis {
  color: #b91c1c;
  border: 2px solid currentColor;
  padding: 12px;
  margin-bottom: 12px;
}

/* Browser geben dem hr von Haus aus eine eigene Farbe
   mit, und die schlägt den geerbten Wert. Ohne das
   inherit bliebe die Linie grau. */
.hinweis hr {
  color: inherit;
  border: none;
  border-top: 2px solid currentColor;
}

/* Eine Zeile, und Text, Rahmen und Linie wechseln zusammen. */
.gruen {
  color: #15803d;
}

currentColor ist ein Verweis auf die Textfarbe des Elements. Rahmen, Trennlinien und SVG-Icons ziehen damit automatisch mit, sobald sich color ändert.

Die beiden Komponenten im Beispiel unterscheiden sich in genau einer Zeile. Trotzdem wechseln Text, Rahmen und Linie gemeinsam. Ohne currentColor stünde dieselbe Farbe an drei Stellen, und beim Ändern vergisst man verlässlich eine davon.

An der Trennlinie steht zusätzlich color: inherit, und das hat einen Grund. Browser geben dem hr von sich aus eine eigene Farbe mit, und so eine Vorgabe schlägt den geerbten Wert. Erst mit inherit bekommt die Linie die Farbe des Hinweises, und erst dann zieht currentColor dort wirklich mit.

Beim Kontrast hört Farbe auf, Geschmackssache zu sein. Fließtext braucht ein Verhältnis von 4,5 zu 1 zwischen Text und Hintergrund. Große Schrift kommt mit 3 zu 1 aus, und groß heißt ab 24px, fett schon ab rund 18,7px. Das sind die Schwellen der Barrierefreiheitsrichtlinien (WCAG 2.2, Kriterium 1.4.3).

Den Kontrast schätzt man nicht, man misst ihn. Am roten Kasten aus dem ersten Beispiel steht im Auskunftsstreifen unter color und background-color eine Zeile Kontrast, und darin steht 4,99:1 (reicht für Fließtext). Es reicht also, aber knapp. Und dass es knapp ist, siehst du der Farbe nicht an.

Im Streifen steht auch, gegen welche der beiden Schwellen geprüft wurde, denn das hängt an der Schriftgröße. Setzt du im Beispiel font-size: 24px dazu, wird dieselbe Zahl als große Schrift gemessen. Ein helles Grau auf Weiß fällt bei dieser Probe oft durch, obwohl es auf dem eigenen Monitor gut aussah.

In zwei Fällen gibt es keine Zahl, beide aus demselben Grund. Liegt hinter der Schrift ein Hintergrundbild oder eine halbdurchsichtige Fläche, gibt es keinen einzelnen Grund mehr, gegen den sich rechnen ließe. Dann fehlt die Zeile einfach, und das ist ehrlicher als eine ausgedachte Zahl. So ist es auch in Lektion 7.5, wo der Text auf einem Foto steht.

In der Aufgabe bekommen zwei Karten ihre Farben, und an der zweiten zeigt sich, wie weit currentColor trägt.