Color

Podcast de CSS - 006: Color Part One

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

¿Cómo decides qué tipo de color usar? ¿Cómo puedes hacer que los colores sean semitransparentes? En esta lección, descubrirás qué opciones tienes para ayudarte a tomar las decisiones correctas para tu proyecto y equipo.

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

Colores numéricos

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

Colores 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 rojo, verde y azul, que son los tres colores primarios.

Los rangos hexadecimales son 0-9 y A-F. Cuando se usa en una secuencia de seis dígitos, se traducen a los rangos numéricos RGB que son de 0 a 255 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, agregas otros dos dígitos a la secuencia de seis dígitos, haciendo una secuencia de ocho dígitos. Por ejemplo, para establecer el color negro en código hexadecimal, escribe #000000. Para agregar una transparencia del 50%, cámbiala a #00000080.

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

  • Alfa del 0% (que es completamente transparente) es 00: #00000000
  • El valor alfa del 50% es 80: #00000080
  • El alfa del 75% es BF: #000000BF

Para convertir un hexadecimal de dos dígitos en un decimal, tomar el primer dígito y multiplicarlo por 16 (porque X es la base 16) luego agrega el segundo dígito. Uso de BF como ejemplo para un alfa del 75%:

  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 alfa es 191-75% de 255

RGB (rojo, verde, azul)

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

Los colores RGB se definen con el función de color rgb(), usando números o porcentajes como parámetros. Los números deben estar entre 0 y 255, y los porcentajes deben estar entre 0% y 100%. RGB funciona en la escala de 0 a 255 por lo que 255 equivaldría a 100% y 0 a 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 color blanco es exactamente lo opuesto: rgb(255, 255, 255) o rgb(100%, 100%, 100%).

Se configura una versión alfa en rgb() de dos maneras diferentes. 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% Alfa negro en navegadores modernos, escribe: rgb(0 0 0 / 50%) o rgb(0 0 0 / 0.5). Para una compatibilidad más amplia, con la función rgba(), escribe: rgba(0, 0, 0, 50%) o rgba(0, 0, 0, 0.5).

HSL (matiz, saturación, luminosidad)

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

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

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

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

Con la función de color hsl(), defines un verdadero negro escribiendo hsl(0 0% 0%), o incluso hsl(0deg 0% 0%). Esto se debe a que el parámetro de matiz define el grado en la paleta de colores, que, si usas el tipo de número, es 0-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 matiz usa la rueda de colores. La saturación se combina de color gris con el de verde azulado. La luminosidad se muestra de negro a blanco.

Alfa se define en hsl(), de la misma manera que rgb() si agregas / después de los parámetros de matiz, saturación y luminosidad, o usa el función hsla(). El valor alfa se puede definir con un porcentaje o un decimal entre 0 y 1. Por ejemplo, para establecer un negro alfa del 50%, 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 simples en inglés, como púrpura, tomate y vara de oro. Algunos de los nombres más populares, según el almanaque web, son negro, blanco, rojo, azul y gris. Nuestras favoritas incluyen vara dorada, aliceblue y hotpink.

Además de los colores estándares, 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 de forma contextual de la propiedad color. Si tienes un color de texto de red y, luego, configuras border-color como currentColor, también será rojo. Si el elemento en el que defines currentColor no tiene un valor para color definido, En cambio, currentColor se calculará por la cascada.

Dónde usar el color en las reglas de CSS

Si una propiedad de CSS acepta <color> como un valor. aceptará cualquiera de los métodos anteriores para expresar el color. Para darle estilo al texto, usa las propiedades color, text-shadow y text-decoration-color que aceptan el color como valor o el color 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 manera 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 contornos de tus cuadros. La propiedad box-shadow también acepta el color como uno de los valores.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre color

¿Cuáles de los siguientes son colores válidos?

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

Localiza el color hsl no válido.

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

Recursos