Color

The CSS Podcast - 006: Color Part One

El color es una parte importante de cualquier sitio web y, en CSS, hay muchas opciones para especificar y manipular colores.

¿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.

Cómo elegir los colores

Colores con nombre

La forma más sencilla de elegir un color es elegir uno de los 148 colores con nombre en CSS. Estos son nombres en inglés simple, como purple, tomato y goldenrod. Algunos de los nombres más populares, según el Web Almanac, son black, white, red, blue y gray. Entre nuestros favoritos, se incluyen goldenrod, aliceblue y hotpink.

Colores numéricos

Si bien los colores con nombre pueden ser convenientes, es probable que debas usar colores específicos que no están disponibles en ese conjunto. Puedes especificar colores con valores 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).

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).

Colores de alta definición

RGB y HSL definen los colores en la gama sRGB. Los monitores más nuevos admiten muchos más colores que los que pueden describir estos formatos y fuera de la gama sRGB. Puedes elegir estos colores con una variedad de funciones de CSS.

.

La función color()

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

La función color() de CSS te permite elegir un color en un espacio de color específico. El primer argumento es el espacio de color que se usará, que define las opciones para los siguientes canales. Al igual que con rgb(), puedes establecer el canal alfa configurando un número entre 0 y 1, o un porcentaje, después de un /.

Por ejemplo, el color RGB rojo oscuro en el fragmento de código anterior, que se define como rgb(183 21 64), se puede definir con porcentajes como rgb(72% 8% 25%). Puedes usar la función color() con la palabra clave srgb para especificar el mismo color con color(srgb .72 .08 .25).

srgb establece el espacio de color y nos indica que los siguientes tres argumentos son rojo, verde y azul. Los valores van de 0 a 1 en lugar de 0 a 255.

Al igual que con rgb(), podemos establecer la alfa con un / y un porcentaje, o un decimal entre 0 y 1.

Hay muchos espacios de color que puedes usar con la función color(), cada uno con diferentes fortalezas y casos de uso.

P3 de pantalla

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

La gama Display P3 contiene un 50% más de colores que sRGB. Puedes especificar todos los colores de la gama Display P3 con el espacio de color Display P3 mediante la función color().

Para establecer el negro en Display P3, defínelo como color(display-p3 0 0 0). Después de especificar el espacio de color display-p3 para la función color(), tienes tres canales: rojo, verde y azul, similares a color(srgb). Sin embargo, como los valores de los canales representan coordenadas en un espacio de color más amplio, los mismos valores de los canales tendrán significados diferentes.

color(srgb 1 .5 0) es un color naranja que equivale a color(display-p3 0.93596 0.52724 0.1983). Podemos hacer que el naranja sea aún más vibrante extendiéndolo fuera del espacio sRGB, a color(display-p3 1 .5 0).

Oklab

Oklab se define con la función oklab(), con canales de luminosidad, a y b. Es útil para crear gradientes suaves y ajustar la saturación de un color, a la vez que se mantiene el tono y la luminosidad.

h1 {
  color: oklab(75% 0.1 0.1)
}

El canal de luminosidad va de 0 a 1 o de 0% a 100%. Los colores con una luminosidad de 0 siempre serán negros.

El canal a va de -0.4 a 0.4 o de 0% a 100%. Los valores más bajos son más verdes y los más altos son más rojos.

El canal b va de -0.4 a 0.4 o de 0% a 100%. Los valores más bajos son más azules y los más altos son más amarillos.

OkLCh

OkLCh es la forma polar o cilíndrica de OKLab y se define con canales de luminosidad, cromaticidad y tono. Es útil para ajustar los colores de manera uniforme a nivel perceptivo. Esto significa que los cambios en el tono no afectarán la apariencia de un color, ya sea claro o saturado.

h1 {
  color: oklch(80% 0.1 200)
}

Ya trabajaste con la luminosidad y el tono en HSL, y la cromaticidad es similar a la saturación. Puedes establecer el negro con oklch(0 0 0) y el blanco con oklch(1 0 0).

El canal de luminosidad va de 0 a 1 o de 0% a 100%. Los colores con una luminosidad de 0 siempre serán negros.

El canal de cromatismo establece la intensidad de un color: 0 o 0% se desaturará, y los valores más altos tendrán más color. Un valor de 100% es igual a .4, pero es posible salir rápidamente del gamut con valores cercanos a .4.

El tono se especifica en grados, al igual que hsl().

OkLCh no está limitado por una gama como Display P3, por lo que debes asegurarte de crear colores que se puedan mostrar. oklch(80% 50% 200) es un azul brillante que, numéricamente, parece un color razonable, pero está fuera de la gama de Display P3.

Otros espacios

Existen muchas formas de especificar colores en CSS, y no necesitas aprenderlos todos. Los formatos rgb() y hexadecimal se usan comúnmente en herramientas de diseño y en código existente, y es útil conocerlos. También es útil familiarizarse con un formato que se pueda manipular de manera predecible. Puedes cambiar los valores de hsl o oklch directamente y tener una idea de cuál será el color resultante.

Obtén más información en Accede a más colores y espacios nuevos.

Colores del sistema

Además de los colores con nombre, como púrpura o verde azulado, 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, configuras border-color como currentColor, también será red. Si el elemento en el que defines currentColor no tiene un valor de color definido, la cascada calculará currentColor.

Cómo manipular colores

Si bien es posible que tengas una paleta de colores para usar en tu sitio, es posible que necesites variantes de esos colores para los estados de desplazamiento del mouse, los bordes y otros elementos de la IU. Podrías especificar cada color, pero CSS también proporciona formas de transformar los colores para crear estas variantes.

color-mix()

Para usar el resultado de mezclar dos colores, puedes usar el método color-mix(). Esto es útil para mezclar un color con blanco o negro y crear una variante más clara o más oscura.

Para usar color-mix(), deberás definir los dos colores, cómo deseas que se mezclen (el método de interpolación) y cuánto de cada color deseas.

En el caso de los espacios de color que tienen un tono, también puedes decidir en qué dirección quieres girar la rueda de color. La opción predeterminada es usar la ruta de acceso shorter, pero también puedes elegir longer, increasing y decreasing.

Juntos, el espacio de color y la dirección son el método de interpolación.

También puedes proporcionar la cantidad de cada color que se combinará.

Sintaxis de color relativa

También puedes trabajar más directamente con un color usando la sintaxis de color relativa, que te permite tomar cualquier color y realizar cálculos en él para crear uno nuevo.

h1 {
  color: oklch(from red l c h);
}

Si usas la función oklch(), trabajarás con los canales de luminosidad, croma y tono. Después de la palabra clave from, puedes especificar cualquier color en cualquier sintaxis. Luego, se te muestra cada valor de canal para usarlo como una letra. Esto se resolverá en un color rojo, sin ningún ajuste.

Para realizar ajustes, puedes usar la función calc() para cambiar los valores del canal o reemplazarlo por completo. Aquí, usamos el mismo color red, pero lo definimos con oklch(62% 0.25 29).

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

El canal de luminosidad es 62% / 2 o 31%. El canal de cromatismo no cambia, por lo que es 0.25. El canal de tono es 180. Esto crea el nuevo color oklch(31% 0.25 180), un color verde oscuro.

A menudo, usarás una propiedad personalizada como el color de entrada. Esto te permite crear variaciones de color de forma dinámica.

Puedes hacerlo con cualquier función de color, y es útil hacerlo con funciones de color que tengan canales que describan los cambios que deseas realizar. Por ejemplo, si deseas ajustar la luminosidad de un color, elige oklch o hsl, ya que puedes cambiar directamente el canal de luminosidad.

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

Con la sintaxis de colores relativa, o RCS, puedes crear una paleta de colores para usar en tu sitio.

Colores fuera de la gama

Tu contenido se mostrará en diferentes pantallas que pueden admitir o no colores de gama amplia. Si especificas un color que no es compatible con una pantalla, se realizará un proceso llamado asignación de gama para encontrar un color similar que se pueda mostrar en la pantalla. Si deseas definir colores específicos en esos casos, puedes usar la consulta de medios color-gamut.

Dónde usar el color en las reglas de CSS

Si una propiedad CSS acepta el tipo de datos <color> como valor, aceptará cualquiera de los métodos descritos anteriormente 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 degradados, 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