Día 08: Colores Hexadecimales

---

Un color hexadecimal se especifica con: #RRGGBB, donde los enteros hexadecimales RR(red), GG(green) y BB(blue) especifican los componentes del color.

---

Valor hexadecimal

En CSS, se puede especificar un color usando un valor hexadecimal de la siguiente forma:

#rrggbb

Donde rr(red), gg(green) y bb(blue) 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.

Pruebe mezclando los valores HEX a continuación:

Ejemplo:

<h1>Establezca colores usando valores hexadecimales</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>

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

Ejemplo:

<h1>Tonos de gris</h1>
<p>Establezca valores iguales para las tres fuentes, y conseguirá diferentes tonos de gris</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>

---

Valor hexadecimal de 3 dígitos

Algunas veces verás un código hexadecimal de 3 dígitos en 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 red, green y blue 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.

Ejemplo:

body {
  background-color: #fc9; /* Lo mismo que #ffcc99 */
}

h1 {
  color: #f0f; /* Lo mismo que #ff00ff */
}

p {
  color: #b58; /* Lo mismo que #bb5588 */
}

---

Resumen

El código hexadecimal se utiliza para especificar colores en CSS. Se compone de valores hexadecimales para los componentes rojo, verde y azul (#RRGGBB). Los valores van de 00 a ff (0 a 255). El código de 3 dígitos es una forma abreviada de algunos códigos hexadecimales de 6 dígitos. Solo se puede usar cuando ambos valores (RR, GG y BB) son iguales para cada componente. El artículo incluye ejemplos de colores y tonos de gris.

---

Traducido con 💚 desde W3Schools.com