Se especifica un color hexadecimal con: #RRGGBB, donde el RR (rojo), GG (verde) y BB (azul) los enteros hexadecimales especifican los componentes de el color.
En CSS, se puede especificar un color utilizando un valor hexadecimal en la forma:
#rrggbb
Donde rr (rojo), gg (verde) y bb (azul) son valores hexadecimales entre 00 y ff (igual que el decimal 0-255).
Por ejemplo, #ff0000 se muestra en rojo, porque el rojo está configurado en su valor más alto (ff) y los demás están configurados en el valor más bajo (00).
Para mostrar negro, establezca todos los valores en 00, así: #000000.
Para mostrar blanco, establezca todos los valores en ff, como esto: #ffffff.
Experimente mezclando los valores HEX a continuación:
RED
GREEN
BLUE
Pruébelo usted mismo →
<!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>
Los tonos de gris a menudo se definen utilizando valores iguales para las 3 fuentes de luz:
Pruébelo usted mismo →
<!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>
A veces verás un código hexadecimal de 3 dígitos en la fuente CSS.
El código hexadecimal de 3 dígitos es una abreviatura de algunos códigos hexadecimales de 6 dígitos.
El código hexadecimal de 3 dígitos tiene la siguiente forma:
#rgb
Donde r, g y b representan los componentes rojo, verde y azul con valores entre 0 y f.
El código hexadecimal de 3 dígitos sólo se puede utilizar cuando ambos valores (RR, GG y BB) son iguales para cada componente. Entonces, si tenemos #ff00cc, se puede escribir así: #f0c.
Aquí hay un ejemplo:
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
} Pruébelo usted mismo →
<!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>