Uma cor hexadecimal é especificada com: #RRGGBB, onde o RR (vermelho), GG (verde) e BB (azul) números inteiros hexadecimais especificam os componentes de a cor.
Em CSS, uma cor pode ser especificada usando um valor hexadecimal no formato:
#rrggbb
Onde rr (vermelho), gg (verde) e bb (azul) são valores hexadecimais entre 00 e ff (o mesmo que o decimal 0-255).
Por exemplo, #ff0000 é exibido em vermelho, porque vermelho está definido para seu valor mais alto (ff) e os outros estão definidos para o valor mais baixo (00).
Para exibir preto, defina todos os valores como 00, assim: #000000.
Para exibir branco, defina todos os valores como ff, como isso: #ffffff.
Experimente misturar os valores HEX abaixo:
RED
GREEN
BLUE
Experimente você mesmo →
<!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>
Os tons de cinza são frequentemente definidos usando valores iguais para todas as 3 fontes de luz:
Experimente você mesmo →
<!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>
Às vezes, você verá um código hexadecimal de 3 dígitos na fonte CSS.
O código hexadecimal de 3 dígitos é uma abreviação para alguns códigos hexadecimais de 6 dígitos.
O código hexadecimal de 3 dígitos tem o seguinte formato:
#rgb
Onde r, g e b representam os componentes vermelho, verde e azul com valores entre 0 e f.
O código hexadecimal de 3 dígitos só pode ser usado quando ambos os valores (RR, GG e BB) são iguais para cada componente. Então, se tivermos #ff00cc, pode ser escrito assim: #f0c.
Aqui está um exemplo:
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
} Experimente você mesmo →
<!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>