<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 January 2020.

Der <hex-color> CSS Datentyp ist eine Notation zur Beschreibung der hexadezimalen Farbsyntax einer sRGB-Farbe, die die primären Farbkomponenten (Rot, Grün, Blau) als hexadezimale Zahlen sowie deren Transparenz verwendet.

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

R oder RR

Die rote Komponente der Farbe als hexadezimale Zahl, die zwischen 0 und ff (255) liegt und nicht zwischen Groß- und Kleinschreibung unterscheidet. Wenn es nur eine Zahl gibt, wird sie verdoppelt: 1 bedeutet 11.

G oder GG

Die grüne Komponente der Farbe als hexadezimale Zahl, die zwischen 0 und ff (255) liegt und nicht zwischen Groß- und Kleinschreibung unterscheidet. Wenn es nur eine Zahl gibt, wird sie verdoppelt: c bedeutet cc.

B oder BB

Die blaue Komponente der Farbe als hexadezimale Zahl, die zwischen 0 und ff (255) liegt und nicht zwischen Groß- und Kleinschreibung unterscheidet. Wenn es nur eine Zahl gibt, wird sie verdoppelt: 9 bedeutet 99.

A oder AA Optional

Die Alpha-Komponente der Farbe, die die Transparenz angibt, als hexadezimale Zahl, die zwischen 0 und ff (255) liegt und nicht zwischen Groß- und Kleinschreibung unterscheidet. Wenn es nur eine Zahl gibt, wird sie verdoppelt: e bedeutet ee. 0 oder 00 steht für eine vollständig transparente Farbe, f oder ff für eine vollständig undurchsichtige.

Hinweis: Die Syntax unterscheidet nicht zwischen Groß- und Kleinschreibung: #00ff00 ist dasselbe wie #00FF00.

Beispiele

Hexadezimales Hot Pink

Dieses Beispiel zeigt vier Hot Pink Quadrate mit vollständig undurchsichtigen oder halbtransparenten Hintergründen, die mit vier verschiedenen fallunterscheidungsfreien hexadezimalen Farbsyntaxen erstellt wurden.

HTML

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 Hot Pink Hintergrundfarben werden mit den drei-, vier-, sechs- und achtstelligen hexadezimalen Notationen erstellt, wobei sowohl Groß- als auch Kleinbuchstaben verwendet werden.

css
[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

BCD tables only load in the browser

Siehe auch