CSS HEX barvy

Obsah

Hexadecimální barva je určena pomocí: #RRGGBB, kde RR (červená), GG (zelená) a BB (modrá) hexadecimální celá čísla určují složky barva.

HEX hodnota

V CSS lze barvu zadat pomocí hexadecimální hodnoty ve tvaru:

#rrggbb

Kde rr (červená), gg (zelená) a bb (modrá) jsou hexadecimální hodnoty mezi 00 a ff (stejné jako desítkové 0-255).

Například #ff0000 se zobrazí jako červená, protože červená je nastavena na nejvyšší hodnotu (ff) a ostatní jsou nastaveny na nejnižší hodnota (00).

Chcete-li zobrazit černou, nastavte všechny hodnoty na 00 takto: #000000.

Chcete-li zobrazit bílou, nastavte všechny hodnoty na ff, např toto: #ffffff.

Experimentujte smícháním HEX hodnot níže:

RED

ff

GREEN

0

BLUE

0

Příklad

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

Zkuste to sami →

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

Odstíny šedé jsou často definovány pomocí stejných hodnot pro všechny 3 světelné zdroje:

Příklad

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

Zkuste to sami →

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

3místná HEX hodnota

Někdy ve zdroji CSS uvidíte 3místný hexadecimální kód.

3místný hexadecimální kód je zkratka pro některé šestimístné hexadecimální kódy.

3místný hexadecimální kód má následující tvar:

#rgb

Kde r, g a b představují červenou, zelenou a modrou složku s hodnotami mezi 0 a f.

3místný hexadecimální kód lze použít pouze v případě, že jsou obě hodnoty (RR, GG a BB) stejné pro každá součástka. Pokud tedy máme #ff00cc, lze to napsat takto: #f0c.

Zde je příklad:

Příklad

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

Zkuste to sami →

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