En hexadecimal farve er angivet med: #RRGGBB, hvor RR (rød), GG (grøn) og BB (blå) hexadecimale heltal angiver komponenterne i farven.
I CSS kan en farve angives ved hjælp af en hexadecimal værdi i formen:
#rrggbb
Hvor rr (rød), gg (grøn) og bb (blå) er hexadecimale værdier mellem 00 og ff (samme som decimal 0-255).
For eksempel vises #ff0000 som rød, fordi rød er indstillet til sin højeste værdi (ff), og de andre er indstillet til den laveste værdi (00).
For at vise sort skal du indstille alle værdier til 00, sådan her: #000000.
For at vise hvid skal du indstille alle værdier til ff, f.eks dette: #ffffff.
Eksperimenter ved at blande HEX-værdierne nedenfor:
RED
GREEN
BLUE
Prøv det selv →
<!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>
Nuancer af grå er ofte defineret ved hjælp af lige værdier for alle de 3 lyskilder:
Prøv det selv →
<!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>
Nogle gange vil du se en 3-cifret hex-kode i CSS-kilden.
Den 3-cifrede hex-kode er en forkortelse for nogle 6-cifrede hex-koder.
Den 3-cifrede hex-kode har følgende form:
#rgb
Hvor r, g og b repræsenterer de røde, grønne og blå komponenter med værdier mellem 0 og f.
Den 3-cifrede hex-kode kan kun bruges, når begge værdier (RR, GG og BB) er ens for hver komponent. Så hvis vi har #ff00cc, kan det skrives sådan her: #f0c.
Her er et eksempel:
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
} Prøv det selv →
<!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>