CSS-Farben

CSS-Unterstützung Über 140 verschiedene Farbnamensowie Hexadezimalwerte, RGB-Werte, RGBA-Werte, HSL-Werte, HSLA-Werte und Transparenz.

RGBA-Farbe

RGBA-Farbwerte sind eine Erweiterung der RGB-Farbwerte, die einen Alpha-Kanal haben - dieser Kanal legt die Transparenz der Farbe fest.

RGBA-Farbwerte sind so definiert: rgba(red, green, blue, alpha) alpha Die Parameter sind Zahlen zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Nachfolgender Beispiel definiert verschiedene RGBA-Farben:

Beispiel

#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 */

Versuchen Sie es selbst

HSL-Farbe

HSL steht für Farbton, Sättigung und Helligkeit (Hue, Saturation und Lightness).

Die HSL-Farbwerte sind so definiert: hsl(hue, saturation, lightness).

Der Farbton ist der Grad am Farbtonring (von 0 bis 360):

  • 0 (oder 360) ist rot
  • 120 ist grün
  • 240 ist blau

Der Sättigungswert ist ein prozentualer Wert: 100% ist vollfarbig.

Die Helligkeit ist ein prozentualer Wert: 0% ist dunkel (schwarz), und 100% ist weiß.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Nachfolgendes Beispiel definiert verschiedene HSL-Farben:

Beispiel

#p1 {background-color: hsl(120, 100%, 50%);}  /* Grün */
#p2 {background-color: hsl(120, 100%, 75%);}  /* Hellgrün */
#p3 {background-color: hsl(120, 100%, 25%);}  /* Dunkles grün */
#p4 {background-color: hsl(120, 60%, 70%);}   /* Faint grün */

Versuchen Sie es selbst

HSLA-Farbe

Die HSLA-Farbe ist eine Erweiterung der HSL-Farbe mit Alpha-Kanal - sie legt die Transparenz der Farbe fest.

Der Wert der HSLA-Farbe wird durch die folgenden Parameter bestimmt: hsla(hue, saturation, lightness, alpha)，wobei der alpha-Parameter die Transparenz definiert. Der alpha-Parameter ist eine Zahl zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Nachfolgendes Beispiel definiert verschiedene HSLA-Farben:

Beispiel

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* Grün mit Transparenz */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* Hellgrün mit Transparenz */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* Dunkles grün mit Transparenz */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* Faint grün mit Transparenz */

Versuchen Sie es selbst

Transparenz

CSS opacity Die Eigenschaft legt die Transparenz des gesamten Elements fest (sowohl Hintergrundfarbe als auch Text werden durchsichtig oder undurchsichtig sein).

opacity Der Wert muss eine Zahl zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig) sein.

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

Beachten Sie, dass der obige Text ebenfalls transparent/undurchsichtig sein wird!

Der folgende Beispiel zeigt verschiedene Elemente mit Transparenz:

Beispiel

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

Versuchen Sie es selbst