Farben-Tutorial
Farben werden angezeigt, indem sie ROTES, GRÜNES und BLAUES Licht kombinieren.
Farbnamen
Mit CSS können Farben mithilfe von Farbnamen festgelegt werden:
Beispiel
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
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
currentcolorStichwort
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 ganze Zahl zwischen 0 und 255.
Beispielsweise wird rgb(0,0,255) als Blau gerendert, da der blaue Parameter auf seinen höchsten Wert (255) und die anderen auf 0 gesetzt sind.
Beispiel
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
Graustufen werden oft mit gleichen Werten für alle 3 Lichtquellen definiert:
Beispiel
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
Hexadezimale Farben
Auch hexadezimale Farbwerte werden in allen Browsern unterstützt.
Eine hexadezimale Farbe wird angegeben mit: # RR GG BB .
RR (Rot), GG (Grün) und BB (Blau) sind hexadezimale Ganzzahlen zwischen 00 und FF, die die Intensität der Farbe angeben.
Beispielsweise wird #0000FF blau angezeigt, weil die Blaukomponente auf ihren höchsten Wert (FF) und die anderen auf 00 gesetzt sind.
Beispiel
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
Graustufen werden oft mit gleichen Werten für alle 3 Lichtquellen definiert:
Beispiel
| Color | HEX | RGB | Color |
|---|---|---|---|
| #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 besser lesbar.
Farbnamen
CSS unterstützt 140 Standardfarbnamen.
Im nächsten Kapitel finden Sie eine vollständige alphabetische Liste der Farbnamen mit Hexadezimalwerten:
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
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 */
}