Gültige Farbenwerte in CSS

CSS-Farbe

Farben in CSS können auf folgende Weise spezifiziert werden:

  • Hexadezimale Farben
  • HEX-Farben mit Transparenz
  • RGB-Farbe
  • RGBA-Farbe
  • HSL-Farbe
  • HSLA-Farbe
  • Vorgegebene / browserübergreifende Farbennamen
  • Verwenden Sie currentcolor Schlüsselwort

Hexadezimale Farben

Farben werden mit #RRGGBB spezifiziert, wobei RR (Rot), GG (Grün) und BB (Blau) hexadezimale Ganzzahlen die Bestandteile (Anteile) der Farbe bestimmen. Alle Werte müssen zwischen 00 und FF liegen.

Beispielsweise wird der Wert #0000ff als Blau dargestellt, da der Blauanteil auf den höchsten Wert (ff) eingestellt ist, während die anderen Anteile auf 00 gesetzt sind.

Beispiel

Definiert verschiedene HEX-Farben:

#p1 {background-color: #ff0000;}   /* Rot */
#p2 {background-color: #00ff00;}   /* Grün */
#p3 {background-color: #0000ff;}   /* Blau */

Selbst ausprobieren

HEX-Farben mit Transparenz

Farben werden mit #RRGGBB spezifiziert. Um Transparenz hinzuzufügen, fügen Sie zwei zusätzliche Ziffern zwischen 00 und FF ein.

Beispiel

Definiert HEX-Farben mit Transparenz:

#p1a {background-color: #ff000080;}   /* Rot mit Transparenz */
#p2a {background-color: #00ff0080;}   /* Grün mit Transparenz */
#p3a {background-color: #0000ff80;}   /* Blau mit Transparenz */

Selbst ausprobieren

RGB-Farbe

RGB-Farbwerte werden durch Die rgb() -FunktionVorgeschrieben, die Syntax ist wie folgt:

rgb(red, grün, blue)

Jeder Parameter (red, grün, blueDefiniert die Intensität der Farbe, kann ein Integer oder ein Prozentsatzwert zwischen 0 und 255 (von 0% bis 100%) sein.

Beispielsweise wird der Wert rgb(0,0,255) als Blau dargestellt, da der blue-Parameter auf den höchsten Wert (255) eingestellt ist, während die anderen Parameter auf 0 gesetzt sind.

Darüber hinaus definieren folgende Werte die gleiche Farbe: rgb(0,0,255) und rgb(0%,0%,100%).

Beispiel

Definieren Sie verschiedene RGB-Farben:

#p1 {background-color: rgb(255, 0, 0);}   /* Rot */
#p2 {background-color: rgb(0, 255, 0);}   /* Grün */
#p3 {background-color: rgb(0, 0, 255);}   /* Blau */

Selbst ausprobieren

RGBA-Farbe

RGBA-Farbe ist eine Erweiterung der RGB-Farbe, die Alpha-Kanal hat - legt die Transparenz des Objekts fest.

RGBA-Farben werden durch rgba() FunktionVorgeschrieben, die Syntax ist wie folgt:

rgba(red, grün, blue, alpha)

alpha Die Parameter sind Zahlen zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig).

Beispiel

Definieren Sie verschiedene RGB-Farben mit Transparenz:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* rot mit Transparenz */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* grün mit Transparenz */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blau mit Transparenz */

Selbst ausprobieren

HSL-Farbe

HSL steht für Hue (Farbton), Sättigung (Sättigung) und Helligkeit (Helligkeit) - die zylindrische Koordinatenrepresentation einer Farbe.

Verwenden Sie hsl() FunktionGeben Sie die HSL-Farbe an, die Syntax der Funktion ist wie folgt:

hsl(Farbton, Sättigung, Helligkeit)

Hue ist der Winkel auf dem Farbtonring (von 0 bis 360) - 0 (oder 360) ist Rot, 120 ist Grün, 240 ist Blau.

Sättigung ist ein Prozentwert; 0% stellt Grauschattierungen dar, während 100% vollfarbig ist.

Helligkeit ist ebenfalls ein Prozentsatz; 0% ist Schwarz, 100% ist Weiß.

Beispiel

Definieren Sie verschiedene HSL-Farben:

#p1 {background-color: hsl(120, 100%, 50%);}   /* Grün */
#p2 {background-color: hsl(120, 100%, 75%);}   /* helles Grün */
#p3 {background-color: hsl(120, 100%, 25%);}   /* tiefgrünes Grün */
#p4 {background-color: hsl(120, 60%, 70%);}    /* Weiches Grün */

Selbst ausprobieren

HSLA-Farbe

HSLA-Farbwerte sind eine Erweiterung der HSL-Farbwerte und haben einen Alpha-Kanal - sie bestimmen die Transparenz des Objekts.

HSLA-Farbwerte bestehen aus hsla() FunktionBeispiel, die Syntax der Funktion ist wie folgt:

hsla(Farbton, Sättigung, Helligkeit, alpha)

alpha Die Parameter sind Zahlen zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig).

Beispiel

Definieren Sie verschiedene HSL-Farben mit Transparenz:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* Durchsichtiges Grün */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* Durchsichtiges, helles Grün */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* Durchsichtiges, dunkles Grün */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* Durchsichtige, weiche Grün */

Selbst ausprobieren

Vorgegebene / browserübergreifende Farbennamen

In den HTML- und CSS-Farbnormen sind 140 vorgegebene Farbennamen definiert.

Beispiel:blue,red,coral,brown u.a.:

Beispiel

Definieren Sie verschiedene Farbennamen:

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

Selbst ausprobieren

Die Liste aller prädefinierten Namen finden Sie in unserem Farbennamen-Handbuch.

currentcolor Schlüsselwort

currentcolor Schlüsselwortbezug auf den color-Attributwert des Elements.

Beispiel

Die Kante der folgenden <div>-Elemente wird blau sein, da die Textfarbe des <div>-Elements blau ist:

#myDIV {
  color: blue; /* blauer Textfarbe */
  border: 10px solid currentcolor; /* aktuellefarbe Kante */
}

Selbst ausprobieren