<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ärfarbenkomponenten (Rot, Grün, Blau), die als hexadezimale Zahlen geschrieben sind, sowie ihrer Transparenz.
Ein <hex-color>-Wert kann überall dort 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 case-sensitieve hexadezimale Zahl zwischen
0undff(255). Wenn nur eine Zahl angegeben ist, wird sie dupliziert:1bedeutet11. GoderGG-
Die grüne Komponente der Farbe als nicht case-sensitieve hexadezimale Zahl zwischen
0undff(255). Wenn nur eine Zahl angegeben ist, wird sie dupliziert:cbedeutetcc. BoderBB-
Die blaue Komponente der Farbe als nicht case-sensitieve hexadezimale Zahl zwischen
0undff(255). Wenn nur eine Zahl angegeben ist, wird sie dupliziert:9bedeutet99. AoderAAOptional-
Die alpha Komponente der Farbe, die ihre Transparenz angibt, als nicht case-sensitieve hexadezimale Zahl zwischen
0undff(255). Wenn nur eine Zahl angegeben ist, wird sie dupliziert:ebedeutetee.0oder00steht für eine vollständig transparente Farbe, undfoderfffür eine vollständig undurchsichtige.
Hinweis:
Die Syntax ist nicht case-sensitiv: #00ff00 ist dasselbe wie #00FF00.
Beispiele
Hexadezimaler Pink-Farbton
Dieses Beispiel enthält vier Quadrate in einem kräftigen Pink mit vollständig oder halbtransparenten Hintergründen, erstellt mit vier verschiedenen Längen case-insensitieve hex-color-Syntaxen.
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 Pink-Hintergrundfarben werden mit den drei-, vier-, sechs- und achtstelligen hexadezimalen Notationen erstellt, wobei sowohl Groß- als auch Kleinbuchstaben verwendet werden.
[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