Farbe

The CSS Podcast – 006: Color Part One

Farbe ist ein wichtiger Bestandteil jeder Website und in CSS gibt es viele Optionen für Farbtypen, Funktionen und Behandlungen.

Wie entscheiden Sie, welcher Farbtyp verwendet wird? Wie machen Sie Ihre Farben halbtransparent? In dieser Lektion erfahren Sie, welche Optionen Ihnen zur Verfügung stehen, um die richtigen Entscheidungen für Ihr Projekt und Team zu treffen.

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

Numerische Farben

Es ist sehr wahrscheinlich, dass Sie zum ersten Mal Farben in CSS über numerische Farben kennen. Wir können mit numerischen Farbwerten in verschiedenen Formen arbeiten.

Hex-Farbcodes

h1 {
  color: #b71540;
}

Die Hexadezimalschreibweise (häufig auf Hexadezimalwert abgekürzt) ist eine Kurzsyntax für RGB, bei der Rot-Grün und Blau, also den drei Primärfarben, ein numerischer Wert zugewiesen wird.

Die Hexadezimalbereiche sind 0–9 und A–F. Bei Verwendung in einer sechsstelligen Sequenz werden sie in die numerischen RGB-Bereiche übersetzt, die zwischen 0 und 255 liegen und den roten, grünen und blauen Farbkanälen entsprechen.

Sie können auch einen Alphawert mit beliebigen numerischen Farben definieren. Ein Alphawert ist ein Prozentsatz der Transparenz. Im Hexadezimalcode fügen Sie der sechsstelligen Sequenz weitere zwei Ziffern hinzu, wodurch eine achtstellige Sequenz entsteht. Soll beispielsweise Schwarz im Hexadezimalcode angegeben werden, schreiben Sie #000000. Wenn Sie eine Transparenz von 50% hinzufügen möchten, ändern Sie sie in #00000080.

Da als Hex-Skala 0–9 und A–F verwendet werden, entsprechen die Transparenzwerte wahrscheinlich nicht ganz Ihren Erwartungen. Im Folgenden finden Sie einige allgemeine und wichtige Werte, die dem schwarzen Hexadezimalcode #000000 hinzugefügt werden:

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

Wenn Sie eine zweistellige Hexadezimalzahl in eine Dezimalzahl umwandeln möchten, multiplizieren Sie die erste Ziffer mit 16 (da die Hexadezimalzahl die Basis 16 ist) und addieren Sie dann die zweite Ziffer. Verwenden von BF als Beispiel für eine Alphaversion von 75 %:

  1. B ist gleich 11, was bei Multiplikation mit 16 also 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 zwischen 0-255 und die Prozentsätze zwischen 0-255 liegen. RGB funktioniert auf der Skala von 0 bis 255, sodass 255 100 % und 0 bis 0 % entspricht.

Um Schwarz in RGB festzulegen, definieren Sie es als rgb(0 0 0), also null Rot, null grün und null blau. Schwarz kann auch als rgb(0%, 0%, 0%) definiert werden. Weiß ist das genaue Gegenteil: rgb(255, 255, 255) oder rgb(100%, 100%, 100%).

In rgb() wird eine Alphaversion auf eine von zwei Arten festgelegt. Fügen Sie entweder nach den roten, grünen und blauen Parametern eine / ein oder verwenden Sie die Funktion rgba(). Der Alphawert kann mit einem Prozentsatz oder einer Dezimalzahl zwischen 0 und 1 definiert werden. Wenn Sie beispielsweise ein Alpha-Schwarz auf 50% in modernen Browsern festlegen möchten, geben Sie rgb(0 0 0 / 50%) oder rgb(0 0 0 / 0.5) ein. Verwenden Sie für eine umfassendere Unterstützung die Funktion rgba(), indem Sie rgba(0, 0, 0, 50%) oder rgba(0, 0, 0, 0.5) schreiben.

HSL (Farbton, Sättigung, Helligkeit)

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

HSL steht für Farbton, Sättigung und Helligkeit. Farbton beschreibt den Wert im Farbrad von 0 bis 360 Grad, beginnend mit Rot, wobei es sich sowohl um 0 als auch um 360 Grad handelt. Ein Farbton von 180 oder 50% liegt im Blaubereich. Es ist der Ursprung der Farbe, die wir sehen.

Ein Farbrad mit Beschriftungen für Gradwerte in 60-Grad-Schritten, um zu visualisieren, was jeder Winkelwert darstellt

Die Sättigung gibt an, wie hell der ausgewählte Farbton ist. Eine vollständig entsättigte Farbe (mit einer Sättigung von 0%) wird in Graustufen angezeigt. Und schließlich ist die Helligkeit der Parameter, der die Skala des hinzugefügten Lichts von Weiß nach Schwarz beschreibt. Bei einer Helligkeit von 100% siehst du immer Weiß.

Mit der Farbfunktion hsl() definieren Sie ein echtes Schwarz, indem Sie hsl(0 0% 0%) oder sogar hsl(0deg 0% 0%) schreiben. Dies liegt daran, dass der Farbton-Parameter den Grad des Farbrads definiert, der bei Verwendung des Zahlentyps 0-360 ist. Sie können auch den Winkeltyp (0deg) oder (0turn) verwenden. Sowohl Sättigung als auch Helligkeit werden in Prozent angegeben.

Die HSL-Farbfunktion wird visuell aufgeschlüsselt. Für den Farbton wird das Farbrad verwendet. Die Sättigung zeigt, dass Grau mit Blaugrün übergeht. Die Helligkeit geht von Schwarz zu Weiß über.

Alpha wird in hsl() auf die gleiche Weise wie in rgb() definiert. Dazu wird nach den Parametern für Farbton, Sättigung und Helligkeit ein / hinzugefügt oder mithilfe der Funktion hsla(). Der Alphawert kann mit einem Prozentsatz oder einer Dezimalzahl zwischen 0 und 1 definiert werden. Wenn Sie beispielsweise einen Alpha-Schwarz-Wert von 50% festlegen möchten, verwenden Sie hsl(0 0% 0% / 50%) oder hsl(0 0% 0% / 0.5). Schreiben Sie mit der Funktion hsla() hsla(0, 0%, 0%, 50%) oder hsla(0, 0%, 0%, 0.5).

Keywords für Farbe

Es gibt 148 benannte Farben in CSS. Dies sind einfache englische Namen wie Lila, Tomate und Goldrute. Einige der beliebtesten Namen sind laut Web Almanac schwarz, weiß, rot, blau und grau. Unsere Favoriten sind Goldrute, Aliceblue und Hotpink.

Neben den Standardfarben stehen auch spezielle Keywords zur Verfügung:

  • transparent ist eine vollständig transparente Farbe. Dies ist auch der Anfangswert von background-color
  • currentColor ist der kontextbezogene berechnete dynamische Wert des Attributs color. Wenn Sie die Textfarbe red haben und border-color auf currentColor festlegen, ist sie ebenfalls rot. Wenn für das Element, für das Sie currentColor definieren, kein Wert für color definiert ist, wird currentColor stattdessen über die Kaskade berechnet

Verwendung von Farben in CSS-Regeln

Wenn für eine CSS-Property der Datentyp <color> als Wert akzeptiert wird, akzeptiert sie eine der oben genannten Methoden zur Farbdarstellung. Verwenden Sie für den Stil von Text die Eigenschaften color, text-shadow und text-decoration-color, die alle Farbe als Wert oder Farbe als Teil des Werts akzeptieren.

Für Hintergründe können Sie eine Farbe als Wert für background oder background-color festlegen. Farben können auch für Farbverläufe wie linear-gradient verwendet werden. Farbverläufe sind ein Bildtyp, der in CSS programmatisch definiert werden kann. Farbverläufe akzeptieren zwei oder mehr Farben in einer beliebigen Kombination des Farbformats, z. B. hex, rgb oder hsl.

Abschließend legen border-color und outline-color die Farbe der Rahmen und Umrisse Ihrer Boxen fest. Bei der Eigenschaft box-shadow wird als einer der Werte auch Farbe akzeptiert.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Farben

Welche der folgenden Farben sind zulässig?

rbga(400 0 1)
rbga ist ein Tippfehler von rgba und 400 ist größer, als er ohnehin akzeptiert werden würde, wodurch er ungültig wird.
#0f08
🎉
#OOFZ2
Dies ist kein hexadezimaler Wert, sondern besteht nur aus fünf Zahlen und enthält ein Z. Dadurch ist er ungültig.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Ungültige HTML-Farbe erkennen.

hsl(5, 0%, 90%)
Dies ist ein gültiger hsl-Wert.
hsl(.5turn 40% 60%)
Dies ist ein gültiger hsl-Wert.
hsl(0, 0, 0)
🎉 Genau, der zweite und dritte Wert sollten Prozentsätze sein.
hsl(2rad 50% 50%)
Dies ist ein gültiger hsl-Wert.
hsl(0 0% 0% / 20%)
Dies ist ein gültiger hsl-Wert.

Ressourcen