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:
- B ist gleich 11, was bei Multiplikation mit 16 176 ergibt
- F ist gleich 15
- 176 + 15 = 191
- 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.
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.
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 vonbackground-color
.currentColor
ist der kontextabhängige berechnete dynamische Wert des Attributscolor
. Wenn Sie die Textfarbered
haben undborder-color
aufcurrentColor
setzen, ist sie ebenfalls rot. Wenn für das Element, das SiecurrentColor
definieren, kein Wert fürcolor
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?
hsl(180deg 50% 50%)
hotpink
rbga(400 0 1)
#0f08
#OOFZ2
rgb(255, 0, 0)
Suchen Sie nach der ungültigen HSL-Farbe.
hsl(2rad 50% 50%)
hsl(5, 0%, 90%)
hsl(0, 0, 0)
hsl(0 0% 0% / 20%)
hsl(.5turn 40% 60%)