<hex-color>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Der <hex-color> CSS Datentyp ist eine Notation zur Beschreibung der hexadezimalen Farbsyntax einer sRGB Farbe unter Verwendung ihrer primären Farbkomponenten (Rot, Grün, Blau), die als hexadezimale Zahlen geschrieben sind, sowie ihrer Transparenz.
Ein <hex-color>-Wert kann überall verwendet werden, wo ein <color> verwendet werden kann.
Syntax
#RGB // The three-value syntax #RGBA // The four-value syntax #RRGGBB // The six-value syntax #RRGGBBAA // The eight-value syntax
Wert
RoderRR-
Die rote Komponente der Farbe, als nicht-empfindliche hexadezimale Zahl zwischen
0undff(255). Wenn nur eine Zahl vorhanden ist, wird sie dupliziert:1bedeutet11. GoderGG-
Die grüne Komponente der Farbe, als nicht-empfindliche hexadezimale Zahl zwischen
0undff(255). Wenn nur eine Zahl vorhanden ist, wird sie dupliziert:cbedeutetcc. BoderBB-
Die blaue Komponente der Farbe, als nicht-empfindliche hexadezimale Zahl zwischen
0undff(255). Wenn nur eine Zahl vorhanden ist, wird sie dupliziert:9bedeutet99. AoderAAOptional-
Die alpha Komponente der Farbe, die ihre Transparenz angibt, als nicht-empfindliche hexadezimale Zahl zwischen
0undff(255). Wenn nur eine Zahl vorhanden ist, wird sie dupliziert:ebedeutetee.0oder00steht für eine vollständig transparente Farbe undfoderfffür eine vollständig deckende.
Hinweis:
Die Syntax ist nicht-empfindlich: #00ff00 ist dasselbe wie #00FF00.
Beispiele
Hexadezimales Pink
Dieses Beispiel enthält vier pinkfarbene Quadrate mit vollständig und halbtransparenten Hintergründen, erstellt mit vier unterschiedlich langen, nicht-empfindlichen hexadezimalen Farbsyntaxen.
HTML
<div>
#F09
<div class="c1"></div>
</div>
<div>
#f09a
<div class="c2"></div>
</div>
<div>
#ff0099
<div class="c3"></div>
</div>
<div>
#FF0099AA
<div class="c4"></div>
</div>
CSS
Die pinkfarbenen Hintergrundfarben werden mit den drei-, vier-, sechs- und achtwertigen hexadezimalen Notationen erstellt, sowohl mit Groß- als auch Kleinbuchstaben.
[class] {
width: 40px;
height: 40px;
}
.c1 {
background: #f09;
}
.c2 {
background: #f09a;
}
.c3 {
background: #ff0099;
}
.c4 {
background: #ff0099aa;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Color Module Level 4 # hex-notation |
Browser-Kompatibilität
Siehe auch
<color>Datentyp<named-color>Datentyprgb()Farb-Funktion- CSS Farbe Modul