CSS Color 4 ofrece una amplia gama de herramientas y capacidades de colores en la Web: más colores, funciones de manipulación y mejores gradientes.
Durante más de 25 años, sRGB (rojo verde y azul estándar) ha sido la única gamut de color para los gradientes y los colores de CSS, con ofertas de espacio de color como rgb(), hsl() y hexadecimal. Es la capacidad de gama de color más común entre las pantallas; un denominador común. Estamos acostumbrados a especificar colores dentro de esta gama.
A medida que las pantallas son más capaces de mostrar una amplia gama de colores, CSS necesita una forma de especificar colores dentro de estos rangos más amplios. Los formatos de color actuales no tienen un idioma para amplios rangos de color.
Si nunca se actualizara CSS, se quedaría atascado en los rangos de colores de los años 90 para siempre, lo que nunca habría coincidencia con la amplia gama de propuestas de las imágenes y los videos. Atrapado: Solo se muestra el 30% de los colores que puede ver el ojo humano. Agradece al nivel de color 4 del CSS por ayudarnos a escapar de esta trampa, escrita principalmente por Lea Verou y Chris Liley.
A partir de Chrome 111, se admite la compatibilidad con las gamas y los espacios de color del color 4 de CSS, y se une a Safari, que admite display-p3 desde 2016. CSS ahora puede admitir pantallas HD (alta definición) y especificar colores de gamas de HD, a la vez que ofrece espacios de color con especializaciones. En esta guía, se explicará cómo puedes comenzar a aprovechar este nuevo mundo del color.
Pruébalo tú mismo
En los navegadores compatibles, hay un 50% más de colores para elegir. Creías que 16 millones de colores sonaban demasiado. Espera hasta ver cuántos colores pueden mostrar algunos de estos nuevos espacios. Además, piensa en todos esos gradientes que se agruparon debido a que no había suficiente profundidad de bits, que también está resuelto.
Además de más colores, que posiblemente sean los más vívidos que admite la pantalla, los nuevos espacios de color proporcionan herramientas y métodos únicos para administrar y crear sistemas de color. Por ejemplo, antes teníamos HSL y su canal "lightness", que era el mejor que tenían los desarrolladores web. Ahora, en CSS, tenemos la “luz perceptual” de LCH.
Además, los gradientes y la mezcla tienen algunas mejoras: compatibilidad con el espacio de color, opciones de interpolación de matiz y menos bandas. En la siguiente imagen, se muestran algunas de las actualizaciones de la combinación. Las dos combinaciones de colores principales están en sRGB. Las dos combinaciones de colores inferiores están en la pantalla p3. La pantalla p3 tiene colores más intensos y las mezclas dan como resultado un blanco y negro completo en el medio. Cuando sRGB se ve un poco desaturado y las mezclas del medio no son resultados completos en blanco o negro.
https://codepen.io/web-dot-dev/pen/poZgXQb
En esta guía, se explica dónde estuvo el color, adónde va y cómo CSS permitirá que los desarrolladores web lo administren.
Descripción general
El problema con el color y la Web es que CSS no está listo para la alta definición, mientras que las pantallas que la mayoría de las personas tienen en sus bolsillos, vueltas o montadas en paredes tienen una amplia gama de colores listos para la alta definición. La capacidad de color de las pantallas creció más rápido que CSS, ahora que CSS está al día.
También hay mucho más que "más colores". Al final de este artículo, podrás especificar más colores, mejorar los gradientes y elegir los mejores espacios y gamuts de color para cada tarea.
¿Qué es una gama de colores?
Un gamut representa el tamaño de algo. La frase "millones de colores" es un comentario sobre la gama de una pantalla o el rango de colores que tiene para elegir. En la siguiente imagen, se comparan tres gamas y cuanto más grande es el tamaño, más colores ofrece.
Una gama de colores también puede tener un nombre. Como una pelota de básquetbol frente a una pelota de béisbol o una taza de café de vente frente a una grande; un nombre para el tamaño puede ayudar a las personas a comunicarse. Aprender estos nombres de la gama de colores te ayuda a comunicarte y comprender rápidamente una gama de colores.
En este artículo, se presentan siete gamuts nuevos, todos con un rango más amplio que sRGB, y se describen sus diferentes funciones para ayudarte a elegir cuál usar:
Gama visual humana
La gama de colores a menudo se compara con la gama visual humana; la totalidad de los colores que creemos que el ojo humano puede ver. El HVS a menudo se representa con un diagrama de cromaticidad como el siguiente:
La forma más externa es la que podemos ver como humanos, y el triángulo interno es el rango de funciones rgb(), también conocido como espacio de color sRGB.
Como viste triángulos arriba, donde se comparan los tamaños de la gama, encontrarás triángulos abajo. Esta es la forma en que la industria comunica las gamas de color y las compara.
¿Qué es un espacio de color?
Los espacios de color son disposiciones de una gama que establecen una forma y un método para acceder a los colores. Muchas son formas simples en 3D, como cubos o cilindros. Esta disposición de colores determina qué colores están uno al lado del otro y cómo funcionará el acceso a los colores y su interpolación.
RGB es como un espacio de color rectangular en el que se puede acceder a los colores especificando coordenadas en 3 ejes. HSL es un espacio de color cilíndrico, en el que se accede a los colores con un ángulo de matiz y coordenadas en 2 ejes.
La especificación de nivel 4 presenta 12 espacios de color nuevos para buscar colores de las 7 nuevas gamas que se compartieron anteriormente:
Estos se suman a los 4 espacios de color que antes estaban disponibles:
Resumen de la gama de colores y el espacio de color
Un espacio de color es una asignación de colores en la que una gama de colores es un rango de colores. Considera una gama de color como un total de partículas y un espacio de color como una botella hecha para contener ese rango de partículas.
Esta es una imagen interactiva de Alexey Ardov que demuestra los espacios de color. Apunta, arrastra y acerca la imagen en esta demostración. Cambia el espacio de color para visualizar otros espacios.
- Usa gamuts de colores para hablar sobre una variedad de colores, como rango bajo o gama estrecha frente a rango alto o gamut amplio.
- Usa espacios de color para hablar sobre la disposición de colores y la sintaxis que se usa para especificar un color, manipularlo e interpolar a través del color.
Cómo acceder a más colores, espacios nuevos y resultados de depuración
El color 4 de CSS describe una variedad de funciones y herramientas nuevas para CSS y color. Primero, un repaso de dónde estaba el color antes de estas nuevas funciones. A continuación, se incluye una descripción general de los nuevos espacios de color, sintaxis y herramientas.
El siguiente Codepen muestra juntas todas las sintaxis de color nuevas y antiguas:
Un repaso de los espacios de color clásicos
Desde la década del 2000, puedes usar lo siguiente para cualquier propiedad de CSS que acepte un color como valor: hexadecimal (números hexadecimales), rgb(), rgba(), por nombre como hotpink o con palabras clave como currentColor.
Alrededor del año 2010, según el navegador, CSS podría usar colores hsl(). Luego, en 2017, apareció hex with alpha. Por último, hace poco tiempo, hwb() comenzó a obtener compatibilidad con navegadores.
Todos estos espacios de color clásicos hacen referencia al color dentro de la misma gama, sRGB.
HEX
El espacio de color hexadecimal especifica R, G, B y A con números hexadecimales. En los siguientes ejemplos de código, se muestran todas las formas en que esta sintaxis puede especificar el rojo, el verde y el azul, además de la opacidad.
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
El espacio de color RGB ofrece acceso directo a los canales rojo, verde y azul. Permite especificar una cantidad entre 0 y 255, o como un porcentaje del 0 al 100. Esta sintaxis existía antes de que se incluyera alguna normalización de la sintaxis en las especificaciones, por lo que verás sintaxis con y sin coma en general. De ahora en adelante, ya no se requieren comas.
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
HSL (saturación y luminosidad de los tonos), uno de los primeros espacios de color en orientarse hacia el lenguaje y la comunicación humanos, ofrece todos los colores de la gama sRGB sin que el cerebro sepa cómo interactúan el rojo, el verde y el azul. Al igual que en RGB, también tenía comas en la sintaxis original. Sin embargo, a partir de ahora, las comas ya no son obligatorias.
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
Otro espacio de color de la gamut sRGB orientado a la forma en que los humanos describen el color es HWB (tono, blanqueidad y negrita). Los autores pueden elegir un matiz y mezclar en blanco o negro para encontrar el color deseado.
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
Conoce los nuevos espacios de color para la Web
Los siguientes espacios de color ofrecen acceso a gamuts más amplios que sRGB. El espacio de color display-p3 ofrece casi el doble de colores que RGB, mientras que Rec2020 ofrece casi el doble que display-p3. Hay muchos colores.
La función color()
La nueva función color() se puede usar para cualquier espacio de color que especifique colores con los canales R, G y B. color() toma primero un parámetro de espacio de color, luego una serie de valores de canal para RGB y, opcionalmente, algunos alfa.
Verás que muchos de los nuevos espacios de color usan esta función porque tener funciones especializadas, como rgb, srgb, hsl, hwb, etc., estaba creciendo a una lista larga, y era más fácil que el espacio de color fuera un parámetro.
Ventajas
- Es un espacio normalizado para acceder a espacios de color que usan canales RGB.
- Puede escalar verticalmente a cualquier espacio de color basado en RGB de amplia gama.
Desventajas
- No funciona con HSL, HWB, LCH, okLCH ni okLAB.
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
sRGB mediante color()
Este espacio de color ofrece las mismas funciones que rgb(). Además, ofrece decimales entre 0 y 1, que se usan exactamente como el 0% al 100%.
Ventajas
- Casi todas las pantallas admiten el rango de este espacio de color.
- Compatibilidad con herramientas de diseño.
Desventajas
- No es lineal en la percepción (como lo es
lch()) - No tiene una amplia gama de colores.
- Los gradientes suelen pasar por una zona sin conexión.
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
sRGB lineal mediante color()
Esta alternativa lineal a RGB ofrece una intensidad de canal predecible.
Ventajas
- Acceso directo a canales RGB, muy útil para motores de juegos o programas de luces.
Desventajas
- No es lineal en la percepción.
- Los bordes están empaquetados en blanco y negro.
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
Los gradientes se analizarán en detalle más adelante, pero rápidamente es significativo ver un gradiente de negro a blanco de srgb y linear-srgb para ilustrar sus diferencias:
LCH
El primer espacio de esta publicación en el que se presenta la sintaxis para acceder a colores fuera de la gama RGB. También es el primero en facilitar la creación de colores fuera de la gama para una pantalla. Esto se debe a que cualquier color de espacio de CIE (lch, oklch, lab, oklab) es capaz de representar todo el espectro de colores visibles de los seres humanos.
Este espacio de color se basa en la visión humana y ofrece sintaxis para especificar cualquiera de esos colores y más. Los canales LCH son luminosidad, croma y matiz. El tono es un ángulo, como en HSL y HWB. La luminosidad es un valor entre 0 y 100, pero no como la luminosidad de HSL, se trata de una luminosidad especial, "perceptualmente lineal", centrada en el ser humano. El croma es similar a la saturación; puede variar de 0 a 230, pero no tiene límites técnicos.
Ventajas
- Es la manipulación predecible del color gracias a ser lineal perceptualmente, en su mayoría (consulta oklch).
- Utiliza canales conocidos.
- Suele tener gradientes vibrantes.
Desventajas
- Es fácil salir de la gama.
- En muy pocas ocasiones, el gradiente puede necesitar un punto medio de ajuste para evitar el cambio de matiz.
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
LAB
Otro espacio de color creado para acceder a la gama CIE, nuevamente con una dimensión de luminosidad lineal (L) perceptualmente. A y B en LAB representan los ejes únicos de la visión del color humano: rojo-verde y azul-amarillo. Cuando se le asigna un valor positivo a A, se agrega rojo y verde cuando está por debajo de 0. Cuando se da un número positivo a B, se agrega amarillo, mientras que los valores negativos se acercan al azul.
Ventajas
- Gradientes con coherencia perceptual.
- Alto rango dinámico
Desventajas
- Posible cambio de matiz.
- Es difícil reconocer manualmente o adivinar un color cuando se leen los valores.
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
ACEPTAR
Este espacio de color es correctivo para LCH. Y, al igual que LCH, (L) sigue representando la luminosidad lineal en la percepción, C para la croma y H para el matiz.
Este espacio te resultará familiar si trabajaste con HSL o LCH. Elige un ángulo de la paleta de colores para H, elige una cantidad de brillo u oscuridad ajustando L, pero, luego, tenemos croma en lugar de saturación. Son bastante idénticos, excepto que los ajustes de luminosidad y croma tienden a ser de pares, o bien puede ser fácil solicitar colores de croma alto que se queden fuera de una gama objetivo.
Ventajas
- No hay sorpresas cuando trabajas con tonos azules y púrpuras.
- luminosidad perceptualmente lineal.
- Utiliza canales conocidos.
- Alto rango dinámico
- Tiene un selector de color moderno de Evil Martians.
Desventajas
- Es fácil salir de la gama.
- Nuevo y relativamente sin explorar.
- Pocos selectores de color.
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
OKLAB
Este espacio es correctivo para LAB. Se afirma como un espacio optimizado para la calidad de procesamiento de imágenes, lo que para nosotros en CSS significa que se usan gradientes y calidad de manipulación de las funciones de color.
Ventajas
- Espacio predeterminado para interpolaciones y animaciones.
- luminosidad perceptualmente lineal.
- Sin cambio de matiz como LAB.
- Gradientes con coherencia perceptual.
Desventajas
- Nuevo y relativamente sin explorar.
- Pocos selectores de color.
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
Pantalla P3
La gama de pantallas P3 y el espacio de color se volvieron populares desde que Apple los admitía desde 2015 en su iMac. Apple también admite display-p3 en páginas web a través de CSS desde 2016, cinco años más que que cualquier otro navegador. Si proviene de sRGB, este es un excelente espacio de color para comenzar a trabajar a medida que mueves los diseños a un rango dinámico más alto.
Ventajas
- Gran compatibilidad, considerada el modelo de referencia para pantallas HDR.
- 50% más de colores que sRGB.
- Las Herramientas para desarrolladores ofrecen un excelente selector de color.
Desventajas
- Con el tiempo, se lo superarán los espacios Rec2020 y CIE.
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
Rec2020 es parte del movimiento hacia UHDTV (televisión de ultraalta definición), que ofrece una amplia gama de colores para usar en contenido multimedia 4K y 8K. Rec2020 es otra gama basada en RGB, más grande que display-p3, pero no tan común entre los consumidores como Display P3.
Ventajas
- Colores Ultra HD
Desventajas
- No es tan común entre los consumidores (todavía).
- No suele encontrarse en dispositivos portátiles ni tablets.
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
A98 RGB
Adobe creó la abreviatura de Adobe 1998 RGB, A98 RGB, para incluir la mayoría de los colores que se pueden alcanzar con impresoras CMYK. Ofrece más colores que sRGB, sobre todo en los tonos turquesa y verde.
Ventajas
- Es más grande que los espacios de color sRGB y Display P3.
Desventajas
- No es un espacio común en el que trabajen diseñadores digitales.
- No muchas personas están portando paletas de CMYK.
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
ProPhoto RGB
Creado por Kodak, este espacio de amplia gama ofrece exclusivamente un rango de colores primarios muy amplio y presenta cambios de tono mínimos cuando se cambia la luminosidad. También declara que cubre el 100% de los colores de superficie del mundo real, según lo documentó Michael Pointer en 1980.
Ventajas
- El matiz mínimo cambia cuando se cambia la luminosidad.
- Colores primarios brillantes
Desventajas
- Alrededor del 13% de los colores que se ofrecen son imaginarios, lo que significa que no están dentro del espectro visible de los humanos.
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ, XYZ-d50 y XYZ-d65
El espacio de color CIE XYZ abarca todos los colores que son visibles para una persona con una visión promedio. Es por eso que se usa como referencia estándar para otros espacios de color. Y es la luminancia, X y Z son posibles cromas dentro de la luminancia Y determinada.
La diferencia entre d50 y d65 es el punto blanco, donde d50 usa los puntos blancos de d50 y d65 usa el punto blanco d65.
Ventajas
- El acceso a la luz lineal ofrece casos de uso prácticos.
- Ideal para mezclar colores físicos.
Desventajas
- No son lineales en la percepción como lch, oklch, lab y oklab.
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
Espacios de color personalizados
La especificación de CSS Color 5 también tiene una ruta de acceso para enseñarle al navegador un espacio de color personalizado. Este es un perfil de ICC que le indica al navegador cómo resolver los colores.
@color-profile --foo {
src: url(path/to/custom.icc);
}
Una vez cargado, accede a los colores de este perfil personalizado con la función color() y especifica los valores del canal.
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
Interpolación de colores
La transición de un color a otro se encuentra en la animación, los gradientes y la mezcla de colores. Por lo general, esta transición se especifica como un color inicial y un color final, donde se espera que el navegador interpole entre ellos. Interpolar, en este caso, significa generar una serie de colores intermedios para crear una transición fluida en lugar de una instantánea.
Con un gradiente, la interpolación es una serie de colores a lo largo de una forma. En la animación, se trata de una serie de colores a lo largo del tiempo.
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
Con un gradiente, los colores intermedios se muestran todos a la vez:
Novedades sobre la interpolación de colores
Con la incorporación de nuevos gamuts y espacios de color, hay nuevas opciones adicionales de interpolación. La transición de un color in hsl de azul a blanco genera algo muy diferente de sRGB.
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
¿No puedes ver la demostración de CodePen?
Luego, ¿qué sucede si pasas de un color en un espacio a un color en un espacio completamente diferente?:
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
¿No puedes ver la demostración de CodePen?
Afortunadamente para ti, la especificación de Color 4 tiene instrucciones para los navegadores sobre cómo manejar estas interpolaciones de espacio de color cruzado. En el caso anterior para .gradient, los navegadores notarán los espacios de color diferenciadores y usarán el espacio de color predeterminado oklab.
Tal vez creas que el navegador usaría lch como espacio de color, ya que ese es el primer color, pero no lo hace. Por eso, muestro un segundo gradiente de comparación .lch. El gradiente .lch es un gradiente del espacio de color lch.
Menos bandas gracias al color de 16 bits
Antes de que se funcionara este color, todos los colores se guardaban en un número entero de 32 bits para representar los cuatro canales (rojo, verde, azul y alfa). Es de 8 bits por canal y 2^ 24 colores posibles (si se ignora el alfa). 2 ^ 24 = 16,777,216, "millones de colores".
Después de que este color funcione, cuatro valores de punto flotante de 16 bits, cada canal tiene su propio número de punto flotante en lugar de agruparse. Son un total de 64 bits de datos, lo que da como resultado muchos más de millones de colores.
Este trabajo es necesario para admitir el color HD. Esto aumenta la cantidad de información de color que se puede almacenar, lo que tiene un buen efecto secundario de que el navegador puede usar más colores en un gradiente.
Las bandas de gradientes se producen cuando no hay suficientes colores para crear un gradiente suave y se hacen visibles "tiras" de color. Las bandas se mitigaron en gran medida con la actualización a un color de mayor resolución.
Cómo controlar la interpolación
La distancia más corta entre dos puntos es siempre una línea recta. Con la interpolación de colores, los navegadores toman la ruta corta de forma predeterminada. Considera una situación en la que hay dos puntos en un cilindro de color HSL. Un gradiente adquiere sus pasos de color viajando a lo largo de la línea entre los dos puntos.
linear-gradient(to right, #94e99c, #e06242)
Vista de arriba abajo de un cilindro HSL con una línea entre los elementos detenidos de color
La línea de gradiente anterior va directamente entre el color verdoso y el rojizo, y pasa por el centro del espacio de color. Si bien la información anterior es ideal para facilitar la comprensión inicial, no se trata de lo que sucede exactamente. A continuación, se muestra el gradiente que se muestra en el siguiente CodePen. Está claro que no es blanco en el medio, como se mostró en la demostración de simulación.
Sin embargo, el área central del gradiente perdió su vitalidad. Esto se debe a que los colores más brillantes están en el borde de la forma del espacio de color, no en el centro donde se recorrió la interpolación. Por lo general, esto se conoce como la “zona sin conexión”. Existen algunas formas de solucionar este problema o resolverlo.
Cómo especificar más paradas de gradiente para evitar la zona muerta
En la actualidad, una técnica para evitar la zona muerta es agregar puntos de color adicionales en el gradiente que guíen intencionalmente la interpolación para mantenerse dentro de los rangos vibrantes de un espacio de color. Literalmente, es una solución, ya que las paradas adicionales lo ayudan a sortear la zona sin conexión.
Hay una herramienta de gradiente creada por Erik Kennedy que calcula las marcas de color adicionales para ti, para ayudarte a evitar la zona muerta incluso en espacios de color que tienden a atraer a ella. Cuando se usan los mismos colores del primer ejemplo, pero se cambia la interpolación de color a HSL, se produce lo siguiente:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
Vista descendente de un cilindro HSL con una línea curva con 9 puntos de color
Con los puntos de parada guiados, la interpolación ya no es una línea recta, pero parece curvarse alrededor de la zona muerta, lo que ayuda a mantener la saturación y genera un gradiente mucho más vibrante.
Si bien la herramienta funciona muy bien, ¿y si pudieras tener un control similar o mayor directamente desde CSS?
Cómo dirigir la interpolación de colores
En el Color 4, se agregó la capacidad de controlar la estrategia de interpolación de tono y representa una nueva forma de evitar (:wink:) la zona muerta. Piensa en un ángulo de matiz y considera un gradiente de 2 paradas que solo cambia el ángulo, cambiando el matiz de 140deg a 240deg, por ejemplo.
Interpolación de tono más corto frente a más largo
De forma predeterminada, el gradiente tomará la ruta shorter que puede, a menos que especifiques que tome la ruta longer. Las opciones de interpolación de tono dirigen la rotación del ángulo, como decirle a alguien que gire a la izquierda en lugar de a la derecha (jeje, Zoolander):
En el ejemplo visual anterior de distancias de interpolación de matiz, el trazado corto y el largo se simulan para ilustrar la diferencia. La distancia corta tiene menos tonos entre ella porque se recorre la menor distancia posible, en la que la larga distancia habrá recorrido más tonos.
Interpolación de tono que aumenta o disminuye
Existen dos estrategias de interpolación de matiz más en el Color 4, pero son exclusivas de los espacios de color cilíndricos. Manteniéndose con los dos colores de los ejemplos anteriores, la imagen ahora muestra cómo funcionan el aumento y la disminución.
El Codepen anterior usó ColorJS para demostrar el resultado esperado. La CSS que escribirías para lograr el mismo efecto sin una biblioteca de JavaScript sería la siguiente:
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
Para cerrar la interpolación de matiz, aquí te mostramos una divertida zona de pruebas en la que puedes cambiar el matiz entre 2 paradas de color y ver los efectos de una elección de interpolación de matiz y cómo los espacios de color cambian los resultados de gradiente. Los efectos pueden ser muy diferentes; considéralo como cuatro trucos nuevos que acabamos de incorporar en tu cinturón de herramientas de color.
Gradientes en diferentes espacios de color
Cada espacio de color, dada su forma y disposición de colores únicas, generará un gradiente diferente. Observa los ejemplos que aparecen a continuación, especialmente en “azul a blanco”. Observa cómo cada espacio de color maneja eso de manera diferente. Observa cuántos se vuelven de color púrpura en el medio, lo que se denomina “cambio de tono” durante la interpolación.
¿No puedes ver la demostración de CodePen?
La imagen que se muestra es solo 1 de los muchos ejemplos de CodePen. Vale la pena probar Canary o Safari Tech Preview para verlos por tu cuenta.
Algunos gradientes en estos espacios serán más vibrantes que otros o pasarán menos a través de zonas muertas.
Los espacios como lab empaquetan los colores de una manera optimizada para la saturación, a diferencia de los espacios optimizados para que los humanos escriban color en hwb().
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
La demostración anterior, si bien es sutil en los resultados, muestra una interpolación más coherente con el lab. Sin embargo, la sintaxis del lab no es fácil de leer. Hay números negativos que son muy desconocidos cuando provienen de rgb o hsl. Tenemos buenas noticias: podemos usar hwb para una sintaxis conocida, pero pedir que el gradiente se interpola por completo dentro de otro espacio de color, como oklab.
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
¿No puedes ver la demostración de CodePen?
En este ejemplo, se usan los mismos colores en hwb, pero se especifica el espacio de color para interpolar a hwb u oklab. hwb es un espacio de color excelente para alto brillo, pero posibles zonas sin cobertura o puntos brillantes (consulta la zona activa de cian en el ejemplo superior). oklab es excelente para gradientes perceptualmente lineales que se mantienen saturados. Esta función es muy divertida, ya que puedes probar diferentes espacios de color para ver el gradiente que más te gusta.
A continuación, se muestra un Codepen que experimenta con gradientes y espacios de color, y estrategias de combinación y coincidencia para explorar las posibilidades. ¡Incluso una transición del negro al blanco es diferente en cada espacio de color!
¿No puedes ver la demostración de CodePen?
Sujeción Gamut
Existen escenarios en los que un color puede solicitar algo fuera de un gamut. Considera el siguiente color:
rgb(300 255 255)
El máximo para un canal de color en el espacio de color rgb es 255, pero en este caso se especificó 300 para el rojo. ¿Qué ocurre? Sujetación de Gamut.
La sujeción se produce cuando simplemente se quita información adicional. 300 se convertirá internamente en 255 en el motor de color. El color ya quedó fijado dentro de su espacio.
Cómo elegir un espacio de color
Después de aprender sobre estos espacios de color y sus efectos, muchas personas se sienten abrumadas y quieren saber cuál elegir. Por mis estudios y experiencia, no veo un espacio de color como el único para todas mis tareas. Cada uno tiene momentos en los que producen el resultado deseado.
Si hubiera un mejor espacio, no se introducirían tantos nuevos.
Sin embargo, puedo decir que los espacios de CIE (lab, oklab, lch y oklch) son mis puntos de partida. Si el resultado no es el que busco, probaré otros espacios. Para mezclar colores y crear gradientes, estoy de acuerdo con la especificación predeterminada de oklab. Para los sistemas de color y los colores generales de la IU, me gusta oklch.
Estos son algunos artículos en los que varias personas compartieron sus estrategias de color actualizadas a partir de estos nuevos espacios de color y funciones. Por ejemplo, Andrey Sitnik aportó todo en oklch, quizás te convenzan de hacer lo mismo:
- OKLCH en CSS: por qué migramos de RGB y HSL por Andrey Sitnik
- Formatos de color de Josh W. Comeau
- OK, OKLCH de Chris Coyier
Cómo migrar a color HD CSS
Existen dos estrategias principales para actualizar el color de tu proyecto web y admitir pantallas de amplia gama:
Degradación elegante
Usa los nuevos espacios de color y permite que el navegador y el sistema operativo determinen qué color mostrar en función de las capacidades de visualización.Mejora progresiva
Usa@supportsy@mediapara evaluar las capacidades del navegador del usuario y, si se cumplen las condiciones, proporciona una amplia gama de colores.
Si un navegador no entiende el color display-p3:
color: red;
color: color(display-p3 1 0 0);
Si un navegador entiende el color display-p3, haz lo siguiente:
color: red;
color: color(display-p3 1 0 0);
Cada uno tiene ventajas y desventajas. A continuación, se incluye una lista rápida de ventajas y desventajas:
Degradación correcta
- Ventajas
- La ruta más sencilla.
- El navegador aplicará un mapa de gamut o se restringirá a sRGB si no es una pantalla de amplia gama. Por lo tanto, la responsabilidad es el navegador.
- Desventajas
- El navegador puede restringir el gamut o restringirlo a un color que no te guste.
- Es posible que el navegador no comprenda la solicitud de color y falle por completo. Sin embargo, esto se puede mitigar si se especifica el color dos veces, lo que permite que la cascada recurra al color anterior que sí comprenda.
Mejora progresiva
- Ventajas
- Más control con la fidelidad de colores administrada
- Es una estrategia adicional que no afecta los colores actuales.
- Desventajas
- Debes administrar dos sintaxis de color separadas.
- Debes administrar dos gamuts de color separados.
Cómo comprobar la compatibilidad con el gamut y el espacio de color
El navegador permite comprobar la compatibilidad con una amplia gama de capacidades y la compatibilidad con la sintaxis de colores de CSS y JavaScript. La gama exacta de colores que tiene el usuario no está disponible, se proporciona una respuesta generalizada para mantener la privacidad del usuario. Sin embargo, está disponible la compatibilidad exacta con el espacio de color, ya que no es específica de las capacidades del hardware del usuario, como la gama.
Consultas de compatibilidad con la gama de colores
Los siguientes ejemplos de código verifican el rango de colores del usuario que visita en su pantalla.
Verificando desde CSS
La consulta de asistencia menos específica es la consulta de medios dynamic-range:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
Se puede solicitar asistencia aproximada o superior con la consulta de medios color-gamut:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Hay dos consultas de medios adicionales para verificar la asistencia:
Verificando desde JavaScript
En el caso de JavaScript, se puede llamar a la función window.matchMedia() y pasar una consulta de medios para su evaluación.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
El patrón anterior se puede copiar para el resto de las consultas de medios.
Consultas de compatibilidad con el espacio de color
Los siguientes ejemplos de código verifican el navegador del usuario que visita y su selección de espacios de color con los que trabajar.
Verificando desde CSS
La compatibilidad con espacios de color individuales se puede solicitar a través de una consulta @supports:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
Verificando desde JavaScript
En el caso de JavaScript, se puede llamar a la función CSS.supports() y pasarle una propiedad y un par de valor para ver si el navegador lo entiende.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Cómo reunir el hardware y analizar las verificaciones
Mientras esperas a que cada navegador implemente estas nuevas funciones de color, se recomienda comprobar la capacidad del hardware y la de análisis de color. Esto suele ser lo que uso cuando mejoro progresivamente los colores a alta definición:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Cómo depurar el color con las Herramientas para desarrolladores de Chrome
Se actualizaron las Herramientas para desarrolladores de Chrome y están equipadas con herramientas nuevas para ayudar a los desarrolladores a crear, convertir y depurar el color HD.
Se actualizó el selector de color
El selector de color ahora admite todos los nuevos espacios de color. Esto permite que los autores interactúen con los valores del canal como lo harían.
Límites de Gamut
También se agregó una línea de límite de gamut, que dibuja una línea entre srgb y display-p3 gamuts. Definir con claridad el gamut del color seleccionado
Esto ayuda a los autores a diferenciar visualmente los colores HD y los que no son HD.
Resulta especialmente útil cuando se trabaja con la función color() y los nuevos espacios de color porque pueden producir colores que no sean HD y HD. Si quieres comprobar en qué gamut se encuentra tu color, abre el selector de color y descúbrelo.
Convirtiendo colores
Desde hace muchos años, Herramientas para desarrolladores pudo convertir colores entre formatos compatibles, como hsl, hwb, rgb y hexadecimal. shift + click en una muestra de color cuadrada en el panel Estilos para realizar esta conversión Las nuevas herramientas de color no solo permiten recorrer las conversiones, sino que generan una ventana emergente en la que los autores pueden ver y elegir la conversión que desean.
Cuando se realiza una conversión, es importante saber si se recortó la conversión para que se ajuste al espacio. Las Herramientas para desarrolladores ahora tienen un ícono de advertencia para el color convertido que te alerta sobre este recorte.
Descubre más funciones de depuración de CSS en Herramientas para desarrolladores en su anuncio reciente.
Conclusión
Los espacios de color en la Web que no son sRGB se encuentran en sus inicios, pero creo que veremos un aumento en el uso de los diseñadores y desarrolladores con el tiempo. Saber en qué espacio de color compilar un sistema de diseño, por ejemplo, es una buena herramienta para estar en el cinturón de herramientas de un creador. Cada espacio de color ofrece características únicas y un motivo por el que se agregó a la especificación CSS, y está bien comenzar con estas características de a poco y agregarlas según sea necesario.
Disfruta jugando con estos nuevos juguetes de colores. Más vitalidad, interpolaciones y manipulaciones coherentes y, en general, brindan una experiencia más colorida a tus usuarios.
Lecturas adicionales
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/