CSS HEX-färger

Innehållsförteckning

En hexadecimal färg anges med: #RRGGBB, där RR (röd), GG (grön) och BB (blå) hexadecimala heltal anger komponenterna i färgen.

HEX-värde

I CSS kan en färg anges med ett hexadecimalt värde i formen:

#rrggbb

Där rr (röd), gg (grön) och bb (blå) är hexadecimala värden mellan 00 och ff (samma som decimal 0-255).

Till exempel visas #ff0000 som rött, eftersom rött är inställt på sitt högsta värde (ff) och de andra är inställt på det lägsta värdet (00).

För att visa svart, ställ in alla värden till 00, så här: #000000.

För att visa vitt, ställ in alla värden på ff, som detta: #ffffff.

Experimentera genom att blanda HEX-värdena nedan:

RED

ff

GREEN

0

BLUE

0

Exempel

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

Prova själv →

<!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>

Nyanser av grått definieras ofta med lika värden för alla de tre ljuskällorna:

Exempel

#3c3c3c
#616161
#787878
#b4b4b4
#f0f0f0
#f9f9f9

Prova själv →

<!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>

3-siffrigt HEX-värde

Ibland ser du en 3-siffrig hex-kod i CSS-källan.

Den 3-siffriga hex-koden är en förkortning för vissa 6-siffriga hex-koder.

Den 3-siffriga hexadecimalkoden har följande form:

#rgb

Där r, g och b representerar de röda, gröna och blå komponenterna med värden mellan 0 och f.

Den 3-siffriga hex-koden kan endast användas när båda värdena (RR, GG och BB) är desamma för varje komponent. Så om vi har #ff00cc kan det skrivas så här: #f0c.

Här är ett exempel:

Exempel

 body {
  background-color: #fc9; /* same as #ffcc99 */
}
h1 {
  
  color: #f0f; /* same as #ff00ff */
}
p {
  
  color: #b58; /* same as #bb5588 */
}

Prova själv →

<!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>