Color

El podcast de CSS 006: Color Parte uno

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 puedes hacer que los colores sean semitransparentes? En esta lección, aprenderás qué opciones tienes a fin de ayudarte a tomar las decisiones correctas para tu proyecto y equipo.

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

Colores numéricos

Es muy probable que tu primera exposición a colores en CSS sea mediante colores numéricos. Podemos trabajar con valores de color numéricos 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 al 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, los cuales 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, lo que crea 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 0-9 y A-F, es probable que los valores de transparencia no sean exactamente los esperados. Estos son algunos valores comunes clave que se agregan al código hexadecimal negro, #000000:

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

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

  1. B es igual a 11, que cuando multiplicado por 16 equivale a 176
  2. F es igual a 15
  3. 176 + 15 = 191
  4. El valor alfa es del 191 al 75% de 255

RGB (rojo, verde, azul)

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

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

Para configurar 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%).

Un valor alfa se establece en rgb() de una de 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 de negro en los navegadores modernos, escribe rgb(0 0 0 / 50%) o rgb(0 0 0 / 0.5). Para una mayor compatibilidad, 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 matiz, saturación y luminosidad. El matiz describe el valor en la rueda de color, de 0 a 360 grados, y comienza con rojo (es decir, 0 y 360). Un matiz de 180, o del 50%, estaría dentro del rango azul. Es el origen del color que vemos.

Círculo cromático con etiquetas para los valores de grados en incrementos de 60 grados para ayudar a las imágenes de lo que representa cada valor de ángulo

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

Con la función de color hsl(), para definir un negro verdadero, escribe hsl(0 0% 0%) o hsl(0deg 0% 0%). Esto se debe a que el parámetro de matiz define el grado de la rueda 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 muestra una mezcla de gris en verde azulado. La luminosidad es de negro a blanco.

Alfa se define en hsl(), de la misma manera que rgb(), si se agrega un / después de los parámetros de matiz, saturación y luminosidad, o bien usa 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

Existen 148 colores con nombre en CSS. Estos son nombres simples en inglés, como morado, tomate y vara de oro. Algunos de los nombres más populares, según el Almanaco web, son negros, blancos, rojos, azules y grises. Nuestras favoritas incluyen el dorado, azul alice y rosa.

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 contextual calculado de la propiedad color. Si tienes un color de texto de red y, luego, configuras border-color en currentColor, también será rojo. Si el elemento en el que defines currentColor no tiene un valor para color definido, currentColor se calculará mediante la cascada en su lugar.

Dónde usar el color en las reglas de CSS

Si una propiedad de CSS acepta el tipo de datos <color> como 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 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 con 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 los 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. El código 400 es más grande de 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, además, incluye una Z, por lo que no es válido.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Busca 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)
🎉 Encontrado, el 2o y el 3er 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