<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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
RGB hexadecimal notation (#RRGGBB, #RGB, …)
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch