<hex-color>

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 nicht groß-/kleinschreibungssensitive hexadezimale Zahl zwischen 0 und ff (255). Wenn nur eine Zahl vorhanden ist, wird sie dupliziert: 1 bedeutet 11.

G oder GG

Die grüne Komponente der Farbe, als nicht groß-/kleinschreibungssensitive hexadezimale Zahl zwischen 0 und ff (255). Wenn nur eine Zahl vorhanden ist, wird sie dupliziert: c bedeutet cc.

B oder BB

Die blaue Komponente der Farbe, als nicht groß-/kleinschreibungssensitive hexadezimale Zahl zwischen 0 und ff (255). Wenn nur eine Zahl vorhanden ist, wird sie dupliziert: 9 bedeutet 99.

A oder AA Optional

Die Alpha-Komponente der Farbe, die ihre Transparenz angibt, als nicht groß-/kleinschreibungssensitive hexadezimale Zahl zwischen 0 und ff (255). Wenn nur eine Zahl vorhanden ist, wird sie dupliziert: e bedeutet ee. 0 oder 00 repräsentiert eine vollständig transparente Farbe, und f oder ff eine vollständig opake.

Beispiele

Hexadezimal Hot Pink

Dieses Beispiel umfasst vier hot pink Quadrate mit vollständig opaken oder halbtransparenten Hintergründen, erstellt mit vier unterschiedlich langen, nicht groß-/kleinschreibungssensitiven 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 hot pink Hintergrundfarben werden mit den drei-, vier-, sechs- und achtwertigen Hex-Notation erstellt, unter Verwendung sowohl von Groß- als auch Kleinbuchstaben.

body {
  display: flex;
  justify-content: space-evenly;
  font-family: monospace;
}
div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

[class] {
  width: 40px;
  height: 40px;
}
.c1 {
  background: #f09;
}
.c2 {
  background: #f09a;
}
.c3 {
  background: #ff0099;
}
.c4 {
  background: #ff0099aa;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <color> Datentyp
• <named-color> Datentyp
• rgb() Farb-Funktion
• CSS Farbe Modul