CSS Colors HEX: CSS unterstützt die Definition von Farben im HEX-Format, das auf hexadezimalen Werten basiert. HEX-Farben bestehen aus sechs Zeichen und beginnen mit einem #, gefolgt von jeweils zwei Zeichen für die Farbkomponenten Rot, Grün und Blau (RGB).
HEX-Farbsystem in CSS
Ein HEX-Wert hat die Form #RRGGBB, wobei:
- RR den Rotanteil beschreibt,
- GG den Grünanteil und
- BB den Blauanteil.
Jede Komponente reicht von 00 (kein Farbanteil) bis FF (maximaler Farbanteil). Der Wert #000000 steht für Schwarz, und #FFFFFF steht für Weiß.
h1 {
color: #FF0000; /* Rot */
}Beispiele für HEX-Farben
- Schwarz:
#000000 - Weiß:
#FFFFFF - Rot:
#FF0000 - Grün:
#00FF00 - Blau:
#0000FF - Grau:
#808080
Kurznotation für HEX-Farben
Einige HEX-Farben können auf drei Zeichen verkürzt werden, wenn die Farbwerte identisch in Paaren vorkommen (z. B. #FFFFFF kann als #FFF geschrieben werden). Diese Kurznotation ist nützlich für einfache Farben:
- Weiß:
#FFF(anstelle von#FFFFFF) - Schwarz:
#000 - Rot:
#F00(anstelle von#FF0000)
p {
color: #F00; /* Kurznotation für Rot */
}HEX-Farben mit Transparenz (Alpha-Kanal)
Neuere CSS-Versionen unterstützen achtstellige HEX-Werte mit einem Alpha-Kanal (#RRGGBBAA), der die Deckkraft festlegt. Der Wert für Alpha reicht ebenfalls von 00 (vollständig transparent) bis FF (vollständig deckend).
div {
background-color: #FF000080; /* Halbtransparentes Rot */
}HEX- und RGBA-Vergleichstabelle
| Farbe | HEX-Wert | Kurz-HEX | RGBA-Äquivalent |
|---|---|---|---|
| Schwarz | #000000 | #000 | rgba(0, 0, 0, 1) |
| Weiß | #FFFFFF | #FFF | rgba(255, 255, 255, 1) |
| Rot | #FF0000 | #F00 | rgba(255, 0, 0, 1) |
| Grün | #00FF00 | #0F0 | rgba(0, 255, 0, 1) |
| Blau | #0000FF | #00F | rgba(0, 0, 255, 1) |
| Halbtransparentes Rot | #FF000080 | – | rgba(255, 0, 0, 0.5) |
Tipps zur Arbeit mit HEX-Farben
- HEX-Farben sind kompakt und ideal für die schnelle Farbcodierung.
- Verwenden Sie die achtstellige Variante für Transparenzeffekte, wenn Sie die Deckkraft festlegen möchten.
- Die Kurznotation eignet sich, wenn Sie einfache Farben verwenden und den Code schlanker halten möchten.
Häufig gestellte Fragen
Warum HEX statt RGB verwenden?
HEX-Werte sind kürzer und lassen sich einfacher lesen und kopieren, insbesondere wenn die Kurznotation möglich ist.
Kann ich Transparenz mit HEX angeben?
Ja, moderne Browser unterstützen die achtstellige HEX-Notation (#RRGGBBAA), wobei die letzten beiden Stellen die Transparenz regeln.
Wie konvertiere ich HEX in RGB?
Die einzelnen HEX-Werte lassen sich leicht in Dezimalzahlen umrechnen. Online-Tools und Code-Editoren bieten oft automatische Konvertierung.