Farbe

Farbe ist ein wichtiger Bestandteil jeder Website. In CSS gibt es viele Optionen für Farbtypen, ‑funktionen und ‑behandlungen.

Wie entscheiden Sie, welchen Farbtyp Sie verwenden? Wie mache ich meine Farben halbtransparent? In dieser Lektion erfahren Sie, welche Optionen Ihnen zur Verfügung stehen, um die richtigen Entscheidungen für Ihr Projekt und Ihr Team zu treffen.

CSS hat verschiedene Datentypen, z. B. Strings und Zahlen. Farbe ist einer dieser Typen und verwendet andere Typen, z. B. Zahlen für eigene Definitionen.

Farben für numerische Werte

Es ist sehr wahrscheinlich, dass Sie Farben in CSS zum ersten Mal über numerische Farben kennenlernen. Es gibt verschiedene Möglichkeiten, mit numerischen Farbwerten zu arbeiten.

Hexadezimalfarben

h1 {
  color: #b71540;
}

Die Hexadezimalschreibweise (oft zu „Hex“ abgekürzt) ist eine Kurzschreibweise für RGB, bei der Rot, Grün und Blau, die drei Grundfarben, einen numerischen Wert zugewiesen wird.

Die Hexadezimalbereiche sind 0–9 und A–F. In einer sechsstelligen Sequenz werden sie in die RGB-Zahlenbereiche von 0 bis 255 umgewandelt, die den Rot-, Grün- und Blaukanälen entsprechen.

Sie können einen Alphawert auch mit beliebigen numerischen Farben definieren. Ein Alphawert ist ein Prozentsatz der Transparenz. Im Hexadezimalcode werden der sechsstelligen Sequenz zwei weitere Ziffern hinzugefügt, sodass eine achtstellige Sequenz entsteht. Wenn Sie beispielsweise Schwarz im Hexadezimalcode festlegen möchten, geben Sie #000000 ein. Wenn Sie eine Transparenz von 50% hinzufügen möchten, ändern Sie den Wert in #00000080.

Da die Hexadezimalskala 0–9 und A–F umfasst, entsprechen die Transparenzwerte wahrscheinlich nicht ganz Ihren Erwartungen. Hier sind einige wichtige, gängige Werte, die dem schwarzen Hexadezimalcode #000000 hinzugefügt werden:

  • 0% Alpha – vollständig transparent – entspricht 00: #00000000
  • 50% Alpha entspricht 80: #00000080
  • 75% Alpha ist BF: #000000BF

Um eine zweistellige Hexadezimalzahl in eine Dezimalzahl umzuwandeln, multiplizieren Sie die erste Ziffer mit 16 (da Hexadezimalzahlen auf der Basis 16 basieren) und addieren Sie dann die zweite Ziffer. Beispiel für 75% Alpha mit BF:

  1. B ist gleich 11, was multipliziert mit 16 176 ergibt.
  2. F ist gleich 15
  3. 176 + 15 = 191
  4. Der Alphawert ist 191 – 75% von 255.

RGB (Rot, Grün, Blau)

h1 {
  color: rgb(183, 21, 64);
}

RGB-Farben werden mit der Farbfunktion rgb() definiert. Dabei werden entweder Zahlen oder Prozentsätze als Parameter verwendet. Die Zahlen müssen im Bereich 0–255 liegen und die Prozentsätze zwischen 0% und 100%. RGB arbeitet auf der Skala von 0 bis 255. 255 entspricht also 100 % und 0%.

Wenn Sie Schwarz in RGB festlegen möchten, definieren Sie es als rgb(0 0 0), was 0 Rot, 0 Grün und 0 Blau entspricht. Schwarz kann auch als rgb(0%, 0%, 0%) definiert werden. Weiß ist genau das Gegenteil: rgb(255, 255, 255) oder rgb(100%, 100%, 100%).

Es gibt zwei Möglichkeiten, ein Alpha in rgb() festzulegen. Fügen Sie entweder ein / nach den Rot-, Grün- und Blau-Parametern hinzu oder verwenden Sie die Funktion rgba(). Der Alpha-Wert kann als Prozentsatz oder als Dezimalzahl zwischen 0 und 1 definiert werden. Wenn Sie beispielsweise in modernen Browsern ein 50-prozentiges Alpha-Schwarz festlegen möchten, schreiben Sie rgb(0 0 0 / 50%) oder rgb(0 0 0 / 0.5). Wenn Sie die Funktion rgba() verwenden möchten, um eine größere Unterstützung zu erhalten, geben Sie rgba(0, 0, 0, 50%) oder rgba(0, 0, 0, 0.5) ein.

HSL (Farbton, Sättigung, Helligkeit)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL steht für „Hue, Saturation, Lightness“ (Farbton, Sättigung, Helligkeit). Der Farbton beschreibt den Wert auf dem Farbkreis von 0 bis 360 Grad, beginnend mit Rot (0 und 360). Ein Farbton von 180 oder 50% würde in den blauen Bereich fallen. Sie ist der Ursprung der Farbe, die wir sehen.

Ein Farbkreis mit Labels für Gradwerte in 60-Grad-Schritten, die veranschaulichen, was die einzelnen Winkelwerte bedeuten

Die Sättigung gibt an, wie intensiv der ausgewählte Farbton ist. Eine vollständig entsättigte Farbe (mit einer Sättigung von 0%) erscheint in Graustufen. Der Parameter „Helligkeit“ beschreibt schließlich die Skala von Weiß bis Schwarz des hinzugefügten Lichts. Ein Helligkeitswert von 100% ergibt immer Weiß.

Mit der Farbfunktion hsl() definieren Sie ein echtes Schwarz, indem Sie hsl(0 0% 0%) oder sogar hsl(0deg 0% 0%) eingeben. Das liegt daran, dass der Farbton den Grad auf dem Farbkreis definiert, der bei Verwendung des Zahlentyps 0–360 beträgt. Sie können auch den Winkeltyp (0deg) oder (0turn) verwenden. Sowohl Sättigung als auch Helligkeit werden in Prozent angegeben.

Die HSL-Farbfunktion in einer visuellen Aufschlüsselung Der Farbton wird anhand des Farbkreises bestimmt. Die Sättigung zeigt, wie Grau in Türkis übergeht. Die Helligkeit zeigt Schwarz bis Weiß.

Alpha wird in hsl() auf die gleiche Weise wie rgb() definiert. Dazu wird nach den Parametern für Farbton, Sättigung und Helligkeit ein / hinzugefügt oder die Funktion hsla() verwendet. Der Alpha-Wert kann als Prozentsatz oder als Dezimalzahl zwischen 0 und 1 definiert werden. Wenn Sie beispielsweise einen Alpha-Schwarzwert von 50% festlegen möchten, verwenden Sie hsl(0 0% 0% / 50%) oder hsl(0 0% 0% / 0.5). Verwenden Sie die Funktion hsla(), um hsla(0, 0%, 0%, 50%) oder hsla(0, 0%, 0%, 0.5) zu schreiben.

Farb-Keywords

Es gibt 148 benannte Farben in CSS. Das sind einfache englische Namen wie „purple“ (lila), „tomato“ (Tomate) und „goldenrod“ (Goldrute). Laut dem Web Almanac sind einige der beliebtesten Namen „schwarz“, „weiß“, „rot“, „blau“ und „grau“. Zu unseren Favoriten gehören „Goldenrod“, „AliceBlue“ und „HotPink“.

Neben den Standardfarben sind auch spezielle Keywords verfügbar:

  • transparent ist eine vollständig transparente Farbe. Dies ist auch der Anfangswert von background-color.
  • currentColor ist der kontextabhängig berechnete dynamische Wert der Property color. Wenn Sie eine Textfarbe von red haben und dann border-color auf currentColor festlegen, wird auch dieser Text rot. Wenn für das Element, für das Sie currentColor definieren, kein Wert für color festgelegt ist, wird currentColor stattdessen durch die Kaskade berechnet.

Wo Farben in CSS-Regeln verwendet werden

Wenn eine CSS-Property den Datentyp <color> als Wert akzeptiert, werden alle oben genannten Methoden zur Farbdarstellung akzeptiert. Verwenden Sie die Eigenschaften color, text-shadow und text-decoration-color, um Text zu formatieren. Bei allen drei Eigenschaften kann Farbe als Wert oder als Teil des Werts verwendet werden.

Für Hintergründe können Sie eine Farbe als Wert für background oder background-color festlegen. Farben können auch in Farbverläufen verwendet werden, z. B. linear-gradient. Farbverläufe sind eine Art von Bild, die programmatisch in CSS definiert werden kann. Für Farbverläufe können zwei oder mehr Farben in beliebiger Kombination von Farbformaten wie Hexadezimal, RGB oder HSL verwendet werden.

Mit border-color und outline-color können Sie die Farbe für Rahmen und Umrisse der Felder festlegen. Für das Attribut box-shadow ist auch „color“ (Farbe) zulässig.

Wissen testen

Testen Sie Ihr Wissen über Farben

Welche der folgenden Farben sind gültig?

rbga(400 0 1)
hsl(180deg 50% 50%)
hotpink
#0f08
#OOFZ2
rgb(255, 0, 0)

Ungültige HSL-Farbe erkennen

hsl(5, 0%, 90%)
hsl(.5turn 40% 60%)
hsl(0 0% 0% / 20%)
hsl(0, 0, 0)
hsl(2rad 50% 50%)

Ressourcen