<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 zwischen Groß- und Kleinschreibung unterscheidende hexadezimale Zahl zwischen 0 und ff (255). Wenn nur eine Zahl angegeben ist, wird sie verdoppelt: 1 bedeutet 11.

G oder GG

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

B oder BB

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

A oder AA Optional

Die alpha Komponente der Farbe, die ihre Transparenz angibt, als nicht zwischen Groß- und Kleinschreibung unterscheidende hexadezimale Zahl zwischen 0 und ff (255). Wenn nur eine Zahl angegeben ist, wird sie verdoppelt: e bedeutet ee. 0 oder 00 repräsentiert eine vollständig transparente Farbe und f oder ff eine vollständig opake.

Beispiele

Hexadezimales Hot Pink

In diesem Beispiel sind vier Hot Pink Quadrate enthalten, mit vollständig opaken oder halbtransparenten Hintergründen, die unter Verwendung von vier unterschiedlich langen und nicht von der Groß- und Kleinschreibung abhängigen Hex-Farbsyntaxen erstellt wurden.

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 unter Verwendung der drei-, vier-, sechs- und achtstelligen Hex-Notation erstellt, unter Verwendung von Groß- und 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