Color

The CSS Podcast - 006: Color Part One

El color es una parte importante de cualquier sitio web y, en CSS, hay muchas opciones de tipos de color, funciones y tratamientos.

¿Cómo decides qué tipo de color usar? ¿Cómo haces que tus colores sean semitransparentes? En esta lección, aprenderás qué opciones tienes para tomar las decisiones correctas para tu proyecto y equipo.

CSS tiene varios tipos de datos diferentes, como cadenas y números. El color es uno de estos tipos y usa otros, como los números, para sus propias definiciones.

Colores numéricos

Es muy probable que tu primera exposición a los colores en CSS sea a través de los colores numéricos. Podemos trabajar con valores de color numéricos de diferentes formas.

Códigos hexadecimales

h1 {
  color: #b71540;
}

La notación hexadecimal (a menudo abreviada como hexadecimal) es una sintaxis abreviada para RGB, que asigna un valor numérico a los colores rojo, verde y azul, que son los tres colores primarios.

Los rangos hexadecimales son 0-9 y A-F. Cuando se usan en una secuencia de seis dígitos, se traducen a los rangos numéricos RGB que van del 0 al 255 y que corresponden a los canales de color rojo, verde y azul, respectivamente.

También puedes definir un valor alfa con cualquier color numérico. Un valor alfa es un porcentaje de transparencia. En el código hexadecimal, se agregan otros dos dígitos a la secuencia de seis dígitos, lo que genera una secuencia de ocho dígitos. Por ejemplo, para establecer el negro en código hexadecimal, escribe #000000. Para agregar una transparencia del 50%, cámbiala a #00000080.

Debido a que la escala hexadecimal es de 0 a 9 y de A a F, es probable que los valores de transparencia no sean exactamente lo que esperas. Estos son algunos valores clave y comunes que se agregaron al código hexadecimal negro, #000000:

  • El 0% de alfa, que es completamente transparente, es 00: #00000000
  • El 50% de alfa es 80: #00000080
  • El 75% de alfa es BF: #000000BF

Para convertir un hexadecimal de dos dígitos a decimal, toma el primer dígito y multiplícalo por 16 (porque el hexadecimal es de base 16) y, luego, suma el segundo dígito. Usando BF como ejemplo para un 75% de alfa:

  1. B es igual a 11, que, cuando se multiplica por 16, es igual a 176.
  2. F es igual a 15.
  3. 176 + 15 = 191
  4. El valor de alfa es 191 (el 75% de 255).

RGB (rojo, verde y azul)

h1 {
  color: rgb(183, 21, 64);
}

Los colores RGB se definen con la función de color rgb(), que usa números o porcentajes como parámetros. Los números deben estar dentro del rango de 0 a 255 y los porcentajes deben estar entre 0% y 100%‌. RGB funciona en la escala de 0 a 255, por lo que 255 equivale al 100% y 0 al 0%.

Para establecer el negro en RGB, defínelo como rgb(0 0 0), que es cero rojo, cero verde y cero azul. El negro también se puede definir como rgb(0%, 0%, 0%). El blanco es exactamente lo opuesto: rgb(255, 255, 255) o rgb(100%, 100%, 100%).

Se establece un alfa en rgb() de una de las siguientes dos maneras. Agrega un / después de los parámetros rojo, verde y azul, o usa la función rgba(). El valor alfa se puede definir con un porcentaje o un decimal entre 0 y 1. Por ejemplo, para establecer un 50% de alfa negro en navegadores modernos, escribe: rgb(0 0 0 / 50%) o rgb(0 0 0 / 0.5). Para obtener una compatibilidad más amplia, usa la función rgba() y escribe rgba(0, 0, 0, 50%) o rgba(0, 0, 0, 0.5).

HSL (matiz, saturación y luminosidad)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL significa tono, saturación y luminosidad. El tono describe el valor en la rueda de colores, de 0 a 360 grados, comenzando con el rojo (0 y 360). Un tono de 180 o 50% estaría en el rango azul. Es el origen del color que vemos.

Una rueda de colores con etiquetas para los valores de grados en incrementos de 60 grados para ayudar a las visualizaciones a representar lo que representa cada valor de ángulo

La saturación indica qué tan intenso es el tono seleccionado. Un color completamente desaturado (con una saturación de 0%) aparecerá en escala de grises. Por último, la luminosidad es el parámetro que describe la escala del blanco al negro de la luz agregada. Una luminosidad de 100% siempre te dará un color blanco.

Con la función de color hsl(), puedes escribir hsl(0 0% 0%) o incluso hsl(0deg 0% 0%) para definir un negro verdadero. Esto se debe a que el parámetro de tono define el grado en la rueda de colores, que, si usas el tipo de número, es de 0 a 360. También puedes usar el tipo de ángulo, que es (0deg) o (0turn). Tanto la saturación como la luminosidad se definen con porcentajes.

La función de color HSL desglosada visualmente. El tono usa la rueda de colores. La saturación muestra el gris que se mezcla con el verde azulado. La luminosidad muestra el negro en blanco.

El alfa se define en hsl(), de la misma manera que rgb(), agregando un / después de los parámetros de tono, saturación y luminosidad o con la función hsla(). El valor alfa se puede definir con un porcentaje o un decimal entre 0 y 1. Por ejemplo, para establecer un 50% de negro alfa, usa hsl(0 0% 0% / 50%) o hsl(0 0% 0% / 0.5). Con la función hsla(), escribe: hsla(0, 0%, 0%, 50%) o hsla(0, 0%, 0%, 0.5).

Palabras clave de color

Hay 148 colores con nombres en CSS. Estos son nombres en inglés simple, como morado, tomate y dorado. Algunos de los nombres más populares, según el Web Almanac, son negro, blanco, rojo, azul y gris. Entre nuestros favoritos, se incluyen dorado, azul alice y rosa intenso.

Además de los colores estándar, también hay palabras clave especiales disponibles:

  • transparent es un color completamente transparente. También es el valor inicial de background-color.
  • currentColor es el valor dinámico calculado contextual de la propiedad color. Si tienes un color de texto de red y, luego, estableces border-color como currentColor, también será rojo. Si el elemento en el que defines currentColor no tiene un valor definido para color, la cascada calculará currentColor.

Dónde usar el color en las reglas CSS

Si una propiedad CSS acepta el tipo de datos <color> como valor, aceptará cualquiera de los métodos anteriores para expresar el color. Para aplicar diseño al texto, usa las propiedades color, text-shadow y text-decoration-color, que aceptan el color como valor o como parte del valor.

Para los fondos, puedes establecer un color como el valor de background o background-color. Los colores también se pueden usar en gradientes, como linear-gradient. Los gradientes son un tipo de imagen que se puede definir de forma programática en CSS. Los gradientes aceptan dos o más colores en cualquier combinación de formato de color, como hexadecimal, RGB o HSL.

Por último, border-color y outline-color establecen el color de los bordes y los contornos de tus cuadros. La propiedad box-shadow también acepta el color como uno de los valores.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre el color

¿Cuáles de las siguientes opciones son colores válidos?

rbga(400 0 1)
rbga es un error tipográfico de rgba y 400 es mayor que lo que aceptaría de todos modos, por lo que no es válido.
#0f08
🎉
#OOFZ2
Este no es un valor hexadecimal, solo tiene 5 números y una Z, por lo que no es válido.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Identifica el color hsl no válido.

hsl(5, 0%, 90%)
Este es un valor hsl válido.
hsl(.5turn 40% 60%)
Este es un valor hsl válido.
hsl(0, 0, 0)
🎉 Lo encontraste, el 2º y 3º valor deben ser porcentajes.
hsl(2rad 50% 50%)
Este es un valor hsl válido.
hsl(0 0% 0% / 20%)
Este es un valor hsl válido.

Recursos