Farbe

CSS-Podcast – 006: Farbe Teil 1

Farbe ist ein wichtiger Bestandteil jeder Website und in CSS gibt es viele Funktionen und Behandlungen.

Wie entscheiden Sie, welchen Farbtyp Sie verwenden möchten? Wie machen Sie Ihre Farben halbtransparent? In dieser Lektion lernen Sie, welche Optionen Ihnen zur Verfügung stehen, um die richtigen Entscheidungen für Ihr Projekt und Ihr Team zu treffen.

CSS umfasst verschiedene unterschiedliche Datentypen, wie Zeichenfolgen und Zahlen. „Farbe“ ist einer dieser Typen. z. B. Zahlen für ihre eigenen Definitionen.

Numerische Farben

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

Hex-Farbcode

h1 {
  color: #b71540;
}

Die Hexadezimal-Schreibweise (oft abgekürzt) ist eine Kurzsyntax für RGB, mit einem numerischen Wert rot, grün und blau, Dies sind die drei Primärfarben.

Die hexadezimalen Bereiche sind 0–9 und A–F. Bei Verwendung in einer sechsstelligen Sequenz werden sie in die numerischen RGB-Bereiche von 0–255 übersetzt. die den roten, grünen und blauen Kanä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 zwei weitere Ziffern hinzu, eine achtstellige Sequenz. Um beispielsweise Schwarz als Hexadezimalcode festzulegen, schreiben Sie #000000. Wenn Sie eine Transparenz von 50% hinzufügen möchten, ändern Sie dies in #00000080.

Da die hexadezimale Skala von 0–9 und A–F verwendet wird, entsprechen die Transparenzwerte wahrscheinlich nicht ganz Ihren Erwartungen. Hier sind einige gängige Schlüsselwerte, die zum schwarzen Hexadezimalcode #000000 hinzugefügt werden:

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

Um eine zweistellige Hexadezimalzahl in eine Dezimalzahl umzuwandeln, multiplizieren wir die erste Ziffer mit 16 (da die Hexadezimalzahl die Basis 16 ist), und dann die zweite Ziffer. Verwendung von BF als Beispiel für 75% Alpha:

  1. B ist gleich 11, was bei Multiplikation 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 dem rgb()-Farbfunktion, entweder Zahlen oder Prozentsätze als Parameter. Die Zahlen müssen im Bereich 0–255 liegen und die Prozentsätze zwischen 0% und 100%. RGB verwendet eine Skala von 0 bis 255, sodass 255 100 % und 0 bis 0 % entspricht.

Um Schwarz im RGB-Format festzulegen, definiere es als rgb(0 0 0), nämlich null Rot, Null Grün und Null Blau. Schwarz kann auch als rgb(0%, 0%, 0%) definiert werden. Weiß ist genau das Gegenteil: rgb(255, 255, 255) oder rgb(100%, 100%, 100%).

Ein Alpha wird in rgb() auf eine von zwei Arten festgelegt. Fügen Sie entweder nach den roten, grünen und blauen Parametern eine / hinzu. oder die Funktion rgba() verwenden. Der Alpha-Wert kann mit einem Prozentsatz oder einer Dezimalzahl zwischen 0 und 1 definiert werden. Wenn beispielsweise ein Alpha-Schwarzwert in modernen Browsern von 50% festgelegt werden soll, schreibe: rgb(0 0 0 / 50%) oder rgb(0 0 0 / 0.5). Wenn Sie eine umfassendere Unterstützung benötigen, verwenden Sie die Funktion rgba(), Schreibvorgang: rgba(0, 0, 0, 50%) oder rgba(0, 0, 0, 0.5).

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 (sowohl 0 als auch 360). Ein Farbton von 180 oder 50% würde im Blaubereich liegen. Es ist der Ursprung der Farbe, die wir sehen.

Ein Farbrad mit Beschriftungen für Gradwerte in 60-Grad-Schritten zur Veranschaulichung der jeweiligen Winkelwerte

Die Sättigung gibt an, wie kräftig der ausgewählte Farbton ist. Eine vollständig entsättigte Farbe (mit einer Sättigung von 0%) erscheint in Graustufen. Und schließlich ist Helligkeit der Parameter, der den Maßstab von Weiß zu Schwarz des hinzugefügten Lichts beschreibt. Bei einer Helligkeit von 100% erscheint immer Weiß.

Mit der Farbfunktion hsl() definieren Sie ein echtes Schwarz, indem Sie hsl(0 0% 0%) oder sogar hsl(0deg 0% 0%) schreiben. Das liegt daran, dass der Parameter hue den Grad im Farbrad definiert. wenn Sie den Zahlentyp verwenden, ist 0-360. Sie können auch den Winkeltyp (0deg) oder (0turn) verwenden. Sowohl die Sättigung als auch die Helligkeit werden in Prozentsätzen angegeben.

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

Alpha ist in hsl() definiert, auf dieselbe Weise wie rgb(), indem Sie / nach den Parametern für Farbton, Sättigung und Helligkeit hinzufügen oder verwenden Sie hsla(). Der Alpha-Wert kann mit einem Prozentsatz oder einer Dezimalzahl zwischen 0 und 1 definiert werden. Wenn Sie beispielsweise ein Alphaschwarz 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 Farben

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

Neben Standardfarben sind auch spezielle Keywords verfügbar:

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

Wo werden Farben in CSS-Regeln verwendet?

Wenn eine CSS-Property <color>-Datentyp als Wert, alle oben genannten Methoden zur Farbdarstellung akzeptiert. Verwende zum Gestalten 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 in Farbverläufen verwendet werden, z. B. linear-gradient. Farbverläufe sind eine Art von Bild, das programmatisch in CSS definiert werden kann. Farbverläufe akzeptieren zwei oder mehr Farben in einer beliebigen Kombination von Farbformaten, z. B. Hex, RGB oder HSL.

Zum Schluss legen border-color und outline-color die Farbe für die Rahmen und Umrisse Ihrer Rechtecke fest. Die Eigenschaft box-shadow akzeptiert auch Farbe als einen der Werte.

Wissen testen

Testen Sie Ihr Wissen über Farben

Welche der folgenden Farben sind gültig?

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 Hexadezimalwert. Es besteht nur aus 5 Zahlen und einem Z, wodurch er ungültig wird.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Suchen Sie nach der ungültigen HSL-Farbe.

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)
🎉 Du hast es gefunden. Der 2. und 3. 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