Eine hexadezimale Farbe wird angegeben mit: #RRGGBB, wobei die RR (rot), GG (grün) und BB (blau) hexadezimale Ganzzahlen geben die Komponenten von an die Farbe.
In CSS kann eine Farbe mithilfe eines Hexadezimalwerts in der Form angegeben werden:
#rrggbb
Dabei sind rr (rot), gg (grün) und bb (blau) Hexadezimalwerte zwischen 00 und ff (dasselbe wie Dezimal 0-255).
Beispielsweise wird #ff0000 als Rot angezeigt, da Rot auf den höchsten Wert (ff) und die anderen auf eingestellt sind der niedrigste Wert (00).
Um Schwarz anzuzeigen, setzen Sie alle Werte auf 00, etwa so: #000000.
Um Weiß anzuzeigen, setzen Sie alle Werte auf ff, z dies: #ffffff.
Experimentieren Sie, indem Sie die folgenden HEX-Werte mischen:
RED
GREEN
BLUE
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using HEX values</h1>
<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>
</body>
</html>
Grautöne werden oft durch gleiche Werte für alle drei Lichtquellen definiert:
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>
<h2 style="background-color:#3c3c3c;">#3c3c3c</h2>
<h2 style="background-color:#616161;">#616161</h2>
<h2 style="background-color:#787878;">#787878</h2>
<h2 style="background-color:#b4b4b4;">#b4b4b4</h2>
<h2 style="background-color:#f0f0f0;">#f0f0f0</h2>
<h2 style="background-color:#f9f9f9;">#f9f9f9</h2>
</body>
</html>
Manchmal sehen Sie in der CSS-Quelle einen dreistelligen Hex-Code.
Der 3-stellige Hex-Code ist eine Abkürzung für einige 6-stellige Hex-Codes.
Der 3-stellige Hex-Code hat die folgende Form:
#rgb
Dabei stellen r, g und b die roten, grünen und blauen Komponenten mit Werten zwischen 0 und f dar.
Der dreistellige Hex-Code kann nur verwendet werden, wenn beide Werte (RR, GG und BB) gleich sind jede Komponente. Wenn wir also #ff00cc haben, kann es so geschrieben werden: #f0c.
Hier ist ein Beispiel:
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
} Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
}
</style>
</head>
<body>
<h1>CSS 3-digit Hex Code</h1>
<p>This is a paragraph.</p>
</body>
</html>