Farben-Tutorial
Farben werden in Kombination aus rotem (RED), grünem (GREEN) und blauem (BLUE) Licht angezeigt.
Farbnamen
Mit CSS können Farben mithilfe von Farbnamen festgelegt werden:
CSS-Farbwerte
Mit CSS können Farben auf verschiedene Arten angegeben werden:
- Nach Farbnamen
- Als RGB-Werte
- Als Hexadezimalwerte
- Als HSL-Werte (CSS3)
- Als HWB-Werte (CSS4)
- Mit dem Schlüsselwort
currentcolor
RGB-Farben
RGB-Farbwerte werden in allen Browsern unterstützt.
Ein RGB-Farbwert wird angegeben mit: rgb( RED , GREEN , BLUE ).
Jeder Parameter definiert die Intensität der Farbe als Ganzzahl zwischen 0 und 255.
Zum Beispiel wird rgb(0,0,255) als blau gerendert, da der blaue Parameter auf den höchsten Wert (255) festgelegt ist und die anderen auf 0 festgelegt sind.
Grautöne werden oft mit gleichen Werten für alle 3 Lichtquellen definiert:
Beispiel
| Farbe | RGB | Farbe |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
Hexadezimale Farben
Hexadezimale Farbwerte werden ebenfalls in allen Browsern unterstützt.
Eine hexadezimale Farbe wird angegeben mit: #RRGGBB.
RR (rot-red), GG (grün-green) und BB (blau-blue) sind hexadezimale Ganzzahlen zwischen 00 und FF, die die Intensität der Farbe angeben.
#0000FF wird z. B. blau angezeigt, da die blaue Komponente auf den höchsten Wert (FF) und die anderen auf 00 festgelegt sind.
Beispiel
| Farbe | HEX | RGB | Farbe |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
Grautöne werden oft mit gleichen Werten für alle 3 Lichtquellen definiert:
Beispiel
| Farbe | HEX | RGB | Farbe |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
Groß- oder Kleinschreibung?
Sie können Groß- oder Kleinbuchstaben verwenden, um Hexadezimalwerte anzugeben.
Kleinbuchstaben sind einfacher zu schreiben. Großbuchstaben sind leichter zu lesen.
Farbnamen
CSS unterstützt 140 Standardfarbnamen.
Im nächsten Kapitel finden Sie eine vollständige alphabetische Liste von Farbnamen mit Hexadezimalwerten:
| Name der Farbe | Hex | Farbe |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
Das currentcolor-Schlüsselwort
Das Schlüsselwort currentcolor bezieht sich auf den Wert der color-Eigenschaft eines Elements.
Beispiel
Die Rahmenfarbe des folgenden <div>-Elements ist blau, da die Textfarbe des <div>-Elements blau ist:
#myDIV {
color: blue; /* Blaue Textfarbe */
border: 10px solid currentcolor; /* Blaue Rahmenfarbe */
}
Try it Yourself »
