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. Ya nos acostumbramos a especificar colores dentro de ella.
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. Agradécele al nivel de color 4 del CSS por ayudarnos a escapar, lo que se escribió principalmente por Lea Verou y Chris Liley.
Chrome admite los espacios de color y las gamuts del color 4 de CSS. CSS ahora admite pantallas HD (alta definición), que especifica colores de gamuts HD y, al mismo tiempo, ofrece espacios de color con especializaciones.
Pruébalo tú mismo
Esta guía consta de tres partes. Sigue leyendo para recordar dónde estuvo el color. Luego, lee adónde va el color y cómo administrar el color en el futuro migrando a color HD.
Descripción general
En los navegadores compatibles, hay un 50% más de colores para elegir. Si creías que 16 millones de colores sonaban demasiado, espera hasta ver la cantidad de colores que 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 pueden decirse que son los colores 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.
https://codepen.io/web-dot-dev/pen/poZgXQb
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.
Hay mucho más que solo "más colores". Al final de estos documentos, podrás especificar más colores, mejorar los gradientes y elegir los mejores espacios de color y gamuts 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 revisan las gamas de colores anteriores. Puedes obtener información sobre las siete combinaciones nuevas en Cómo acceder a más colores y espacios nuevos.
Gama visual humana
La gama de colores a menudo se compara con la gamut visual humana, es decir, 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 nuevos espacios de color para buscar colores. 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.
Repaso de los espacios de color clásicos {#classic-color-spaces}
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.
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%);
}
Próximos pasos
Lee sobre los nuevos espacios de color, sintaxis y herramientas, y luego obtén información para migrar a color HD.
Los espacios de color que no son sRGB en la Web se encuentran en sus inicios, pero con el tiempo veremos un aumento en el uso de los diseñadores y desarrolladores. 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.
Recursos
Lee más artículos sobre el nivel de color 5.
Además, puedes encontrar lecturas adicionales en la Web:
- Nivel 4 de módulo de color CSS de W3C
¿Mejor que el laboratorio? Reducción de Gamut: CIE Lab y OKLab
Okhsv y Okhsl: Dos nuevos espacios de color para la selección de colores
Y herramientas: