08. Colores CSS HEX

Un color hexadecimal se especifica con: #RRGGBB, donde los enteros hexadecimales RR (rojo), GG (verde) y BB (azul) especifican los componentes del color. En CSS, se puede especificar un color usando un valor hexadecimal en la forma:

#rrggbb

Donde rr (rojo), gg (verde) y bb (azul) son valores hexadecimales entre 00 y ff (igual que decimal 0-255). Por ejemplo, #ff0000 se muestra en rojo, porque el rojo se establece en su valor más alto (ff) y los demás se establecen 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, así: #ffffff.

Tonos de grises

Los tonos de gris a menudo se definen utilizando valores iguales para las 3 fuentes de luz.

Ejm

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

Código hexadecimal de 3 dígitos

A veces verá un código hexadecimal de 3 dígitos en la fuente CSS. El código hexadecimal de 3 dígitos es una forma abreviada 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 solo se puede usar cuando ambos valores (RR, GG y BB) son iguales para cada componente. Entonces, si tenemos #ff00cc, se puede escribir así: #f0c.

Ejm

body {
  background-color: #fc9; /* same as #ffcc99 */
}

h1 {
  color: #f0f; /* same as #ff00ff */
}{
  color: #b58; /* same as #bb5588 */
}
Scroll al inicio