Zulässige CSS -Farbwerte
CSS-Farben
Farben in CSS können durch die folgenden Methoden angegeben werden:
- Hexadezimale Farben
- Hexadezimale Farben mit Transparenz
- RGB-Farben
- RGBA-Farben
- HSL-Farben
- HSLA-Farben
- Vordefinierte/browserübergreifende Farbnamen
- Mit dem
currentcolorStichwort
Hexadezimale Farben
Eine hexadezimale Farbe wird angegeben mit: #RRGGBB, wobei die hexadezimalen Ganzzahlen RR (Rot), GG (Grün) und BB (Blau) die Komponenten der Farbe angeben. Alle Werte müssen zwischen 00 und FF liegen.
Beispielsweise wird der Wert #0000ff als blau gerendert, weil die blaue Komponente auf ihren höchsten Wert (ff) gesetzt ist und die anderen auf 00 gesetzt sind.
Beispiel
Definieren Sie verschiedene HEX-Farben:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Hexadezimale Farben mit Transparenz
Eine hexadezimale Farbe wird angegeben mit: #RRGGBB. Um Transparenz hinzuzufügen, fügen Sie zwei zusätzliche Ziffern zwischen 00 und FF hinzu.
Beispiel
Definieren Sie verschiedene HEX-Farben mit Transparenz:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
RGB-Farben
Ein RGB-Farbwert wird mit der Funktion rgb() angegeben , die folgende Syntax hat:
rgb(red, green, blue)
Jeder Parameter (Rot, Grün und Blau) definiert die Intensität der Farbe und kann eine ganze Zahl zwischen 0 und 255 oder ein Prozentwert (von 0 % bis 100 %) sein.
Beispielsweise wird der Wert rgb(0,0,255) als blau gerendert, da der blaue Parameter auf seinen höchsten Wert (255) und die anderen auf 0 gesetzt sind.
Außerdem definieren die folgenden Werte gleiche Farben: rgb(0,0,255) und rgb(0%,0%,100%).
Beispiel
Definieren Sie verschiedene RGB-Farben:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
RGBA-Farben
RGBA-Farbwerte sind eine Erweiterung von RGB-Farbwerten mit einem Alphakanal, der die Deckkraft des Objekts angibt.
Eine RGBA-Farbe wird mit der Funktion rgba() angegeben , die die folgende Syntax hat:
rgba(red, green, blue, alpha)
Der Alpha-Parameter ist eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig).
Beispiel
Definieren Sie verschiedene RGB-Farben mit Deckkraft:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
HSL-Farben
HSL steht für Farbton, Sättigung und Helligkeit – und stellt eine Zylinderkoordinatendarstellung von Farben dar.
Ein HSL-Farbwert wird mit der Funktion hsl() angegeben , die die folgende Syntax hat:
hsl(hue, saturation, lightness)
Farbton ist ein Grad auf dem Farbrad (von 0 bis 360) – 0 (oder 360) ist rot, 120 ist grün, 240 ist blau. Die Sättigung ist ein Prozentwert; 0 % bedeutet einen Grauton und 100 % ist die volle Farbe. Helligkeit ist auch ein Prozentsatz; 0 % ist schwarz, 100 % ist weiß.
Beispiel
Definieren Sie verschiedene HSL-Farben:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
HSLA-Farben
HSLA-Farbwerte sind eine Erweiterung der HSL-Farbwerte mit einem Alphakanal, der die Deckkraft des Objekts angibt.
Ein HSLA-Farbwert wird mit der Funktion hsla() angegeben , die die folgende Syntax hat:
hsla(hue, saturation, lightness, alpha)
Der Alpha-Parameter ist eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig).
Beispiel
Definieren Sie verschiedene HSL-Farben mit Deckkraft:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Vordefinierte/browserübergreifende Farbnamen
140 Farbnamen sind in der HTML- und CSS-Farbspezifikation vordefiniert.
Zum Beispiel: blue, red, coral, brown, usw.:
Beispiel
Definieren Sie verschiedene Farbnamen:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
Eine Liste aller vordefinierten Namen finden Sie in unserer Farbnamen-Referenz .
Das Schlüsselwort currentcolor
Das currentcolorSchlüsselwort bezieht sich auf den Wert der Farbeigenschaft eines Elements.
Beispiel
Die Rahmenfarbe des folgenden <div>-Elements ist blau, da die Textfarbe des <div>-Elements blau ist:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}