CSS Farben
Farben in CSS können mit den folgenden Methoden angegeben werden:
- Hexadezimal Farben
- RGB-Farben
- RGBA Farben
- HSL Farben
- HSLA Farben
- Vordefinierte / Cross-Browser-Farbnamen
Hexadezimal Farben
Hexadezimal-Farbwerte werden in allen gängigen Browsern unterstützt.
Eine hexadezimale Farbe wird angegeben mit: #RRGGBB, wo die RR (red) , GG (green) und BB (blue) hexadezimale Zahlen angeben , die Komponenten der Farbe. Alle Werte müssen zwischen 00 und FF sein.
Zum Beispiel wird der # 0000ff Wert als blau gemacht, weil die blaue Komponente auf den höchsten Wert eingestellt ist (ff) und die anderen werden auf 00.
Beispiel
Definieren Sie unterschiedliche HEX Farben:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Versuch es selber " RGB-Farben
RGB-Farbwerte sind in allen gängigen Browsern unterstützt.
: Ein RGB - Farbwert wird mit dem angegebenen 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 einem Prozentwert (from 0% to 100%) .
Zum Beispiel kann die rgb(0,0,255) wird der Wert als blau gemacht, weil der blaue Parameter auf den höchsten Wert eingestellt ist (255) , und die anderen werden auf 0 gesetzt.
Außerdem definieren die folgenden Werte gleich Farbe: rgb(0,0,255) und rgb(0%,0%,100%) .
Beispiel
Definieren Sie unterschiedliche 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 */
Versuch es selber " RGBA Farben
RGBA-Farbwerte werden in IE9 +, Firefox 3+, Chrome, Safari und Opera in 10+ unterstützt.
RGBA-Farbwerte sind eine Erweiterung der RGB-Farbwerte mit einem Alphakanal -, die die Opazität des Objekts angibt.
: Ein RGBA - Farbwert wird mit dem angegebenen rgba(red, green, blue, alpha) . Der Alpha - Parameter ist eine Zahl zwischen 0.0 (fully transparent) und 1,0 (fully opaque) .
Beispiel
Definieren Sie unterschiedliche RGB-Farben mit einer Undurchsichtigkeit:
#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 */
Versuch es selber " HSL Farben
HSL-Farbwerte werden in IE9 +, Firefox, Chrome, Safari und Opera in 10+ unterstützt.
HSL steht für Farbton, Sättigung und Helligkeit - und stellt eine zylindrische-Koordinatendarstellung von Farben.
: Ein HSL - Farbwert wird mit dem angegebenen hsl(hue, saturation, lightness) .
Der Farbton ist ein Grad auf dem Farbrad (from 0 to 360) - 0 (or 360) ist rot, 120 grün, 240 blau ist. Die Sättigung ist ein Prozentwert; 0% bedeutet einen Grauton und 100% ist die Farbe. Leichtigkeit ist auch ein Prozentsatz; 0% ist schwarz, 100% ist weiß.
Beispiel
Definieren Sie unterschiedliche 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 */
Versuch es selber " HSLA Farben
HSLA Farbwerte werden in IE9 +, Firefox 3+, Chrome, Safari und Opera in 10+ unterstützt.
HSLA Farbwerte sind eine Erweiterung der HSL-Farbwerte mit einem Alphakanal -, die die Opazität des Objekts angibt.
: Ein HSLA Farbwert wird mit dem angegebenen hsla(hue, saturation, lightness, alpha) , wobei der Alpha - Parameter , um die Opazität definiert. Der Alpha - Parameter ist eine Zahl zwischen 0.0 (fully transparent) und 1,0 (fully opaque) .
Beispiel
Definieren Sie unterschiedliche HSL Farben mit einer Undurchsichtigkeit:
#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 */
Versuch es selber " Vordefinierte / Cross-Browser-Farbnamen
140 Farbnamen werden in der HTML und CSS-Farbspezifikation vorgegeben.
Schauen Sie sich die Tabelle der vordefinierten Farbnamen .