CSS Color 4 incorpora herramientas y capacidades de amplia gama de colores a 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) es el único color que
gamut para colores y gradientes de CSS, con espacio de color
ofertas dentro de ella, como rgb()
, hsl()
y hexadecimal. Es el color más común
la capacidad de gama entre las pantallas; un denominador común. Hemos crecido
a especificar colores en ella.
![Los formatos de color más populares según el porcentaje de casos.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/the-popular-color-format-b5aab67b4d3de.png?authuser=19&hl=es)
A medida que las pantallas se vuelven más capaces de mostrar una amplia gama de colores, CSS necesita una y permite especificar colores dentro de estos rangos más amplios. Los formatos de color actuales no tienen lenguaje para amplios rangos de color.
Si nunca actualizara CSS, quedaría atascado en los rangos de color de los 90 para siempre, lo forzaba nunca coincidir con la amplia gama de productos disponibles en imágenes y videos. Atrapado, solo se muestra 30% de los colores que puede ver el ojo humano. Agradece al Nivel de color 4 del CSS por ayudarnos a escapar. escrito principalmente por Lea Verou y Chris Liley.
Chrome admite los gamuts de CSS Color 4 y espacios de color. CSS ahora admite HD (alta definición) que especifica colores de gamuts HD y, al mismo tiempo, ofrece espacios de color con en todas sus especializaciones.
Pruébalo tú mismo
Esta guía consta de tres partes. Sigue leyendo para recordar dónde ha estado el color. Luego, lee dó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 pensaste en 16 millones de colores sonaban mucho, espera hasta ver cuántos colores de se pueden mostrar estos nuevos espacios. Además, piensa en todos esos gradientes que con bandas porque no había suficientes de bits, eso también se resolvió.
Además de más colores, podría decirse que son los colores más brillantes que admite la pantalla, Los nuevos espacios de color proporcionan herramientas y métodos únicos para administrar y crear y sistemas de color. Por ejemplo, antes teníamos HSL y su “ligereza” canal, que eran las mejores que tenían los desarrolladores web. Ahora en el CSS, tenemos la "luz perceptual" de LCH.
![Dos tablas de colores están una al lado de la otra. En la primera tabla, se muestra una HSL
un arco iris de 10 colores más o menos, y al lado hay colores en escala de grises que representan
la luminosidad de esos colores de HSL. La segunda tabla muestra un arcoíris de LCH,
mucho menos vibrante, pero los colores en escala de grises junto a él son coherentes.
Esto muestra cómo el LCH tiene un valor de luminosidad constante saludable, mientras que el HSL no.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/two-tables-color-are-sid-d7829619631b7.png?authuser=19&hl=es)
Además, los gradientes y la combinación reciben algunas mejoras: compatibilidad con el espacio de color, el matiz opciones de interpolación y menos bandas.
En la siguiente imagen, se muestran algunas de las mejoras de la combinación.
![](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/kleavbJG5AA2namwim8y.png?authuser=19&hl=es)
https://codepen.io/web-dot-dev/pen/poZgXQb
El problema con el color y la Web es que CSS no es compatible con la alta definición, mientras que las pantallas que la mayoría de las personas tienen en sus bolsillos, regazos o montadas en paredes son una amplia gama y alta definición para colores. La capacidad de color de las pantallas creció más rápido que CSS, ahora CSS está aquí para ponerse al día.
Hay mucho más que solo "más colores". Al final de estos documentos, especificar más colores, mejorar los gradientes y elegir y los espacios 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 que elegir de la imagen de la que se originó. En la siguiente imagen, se comparan tres gamuts, 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 taza de café de Vente frente a una grande; un nombre para el tamaño puede ayudar a las personas comunicarse. Aprender estos nombres de la gama de colores te ayuda a comunicarte y comunicarte rápidamente entender un rango de colores.
En este artículo, se revisan los gamuts de colores anteriores. Puedes leer acerca de las siete nuevos gamuts en Accede a más colores y nuevos espacios.
Gama visual humana
La gama de colores a menudo se compara con la gamut visual humana. la totalidad del color que creemos que el ojo humano puede ver. La HVS suele presentarse con un diagrama de cromaticidad, como el siguiente:
![Una forma de zapato se rellena con un degradado intenso y un triángulo hueco en el medio.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/a-horse-shoe-shape-is-fil-c574400e794bc.png?authuser=19&hl=es)
La forma más externa es lo que podemos ver como humanos, y el triángulo interno es la
Rango de funciones rgb()
, también conocido como espacio de color sRGB
Como viste arriba los triángulos, cuando comparas los tamaños de la gama, ¿encontrarás triángulos a continuación. Esta es la forma en que la industria se comunica sobre las gamas de color y compararlos.
¿Qué es un espacio de color?
Los espacios de color son disposiciones de una gama que establecen una forma y un método de acceder a los colores. Muchos son formas simples en 3D, como cubos o cilindros. Este color disposición determina qué colores están uno al lado del otro y cómo el acceso e interpolar colores funcionará.
RGB es como un espacio de color rectangular, donde se accede 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
![Se muestran un cubo RGB abierto semicortado y porciones en un cilindro HSL una al lado de la otra para mostrar cómo los colores se empaquetan en una forma en cada espacio.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/a-half-cut-open-rgb-cube-53a16bc324d2a.png?authuser=19&hl=es)
La especificación de nivel 4 introduce 12 nuevos espacios de color para buscar colores. Estas se suman a los 4 colores Espacios previamente disponibles:
Gama de colores y resumen del 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 colores como un total de partículas y un espacio de color como una botella. para contener ese rango de partículas.
Esta es una imagen interactiva de Alexey Ardov que demuestra espacios de color. Apunta, arrastra y acerca la imagen en esta demostración. Cómo cambiar el espacio de color para ver otros espacios.
- Usa gamuts de colores para hablar sobre una variedad de colores, como rango bajo o estrecho. amplia frente a rango alto o amplia.
- Usa espacios de color para hablar sobre distribuciones de color, la sintaxis que se usa para especificar una color, manipular color e interpolar a través del color.
![Un cubo lleno de muchos puntos de colores.](https://developer.chrome.com/static/docs/css-ui/high-definition-css-color-guide/image/a-cube-filled-many-multi-2ecb2e34ca6.png?authuser=19&hl=es)
Una revisión de los espacios de color clásicos {#classic-color-spaces}
El Color 4 de CSS detalla un conjunto de funciones y herramientas para CSS y color. Primero, un resumen de dónde estaba el color antes estas nuevas funciones.
Desde la década del 2000, ha podido usar lo siguiente para cualquier propiedad de CSS
que aceptan un color como valor: hexadecimales (números hexadecimales), rgb()
, rgba()
, por
con el nombre hotpink
o con palabras clave como
currentColor
Hacia el 2010, según tu navegador, CSS podría usar
hsl()
. Luego, en 2017,
hex con alfa. Por último, solamente
recientemente, hwb()
comenzó a recibir
compatibilidad con navegadores.
Todos estos espacios de color clásicos hacen referencia al color dentro del mismo gamut, sRGB.
HEX
El espacio de color hexadecimal especifica R, G, B y A con hexadecimales. Lo siguiente los ejemplos de código muestran todas las formas en que esta sintaxis puede especificar los signos más rojo, verde y azul 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 tiene acceso directo a los canales rojo, verde y azul. Permite especificar una cantidad entre 0 y 255 o como un porcentaje de 0 a 100. Esta sintaxis estaba presente antes de que la normalización de la sintaxis estuviera en el específicas, así que verás las sintaxis de coma y sin coma en el exterior. Para mudanza hacia adelante, ya no se necesitarán 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
Uno de los primeros espacios de color para orientarse hacia el lenguaje humano y comunicación, HSL (saturación de tono y luminosidad) ofrece todos los colores de que no requiere que tu cerebro sepa qué tan rojo, verde y azul interactúan. Al igual que RGB, originalmente tenía comas en la sintaxis, pero hacia adelante, ya no se necesitarán comas.
.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 del gamut sRGB orientado a cómo los humanos describen el color es HWB (matiz, blanco y negro). Los autores pueden elegir un tono 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, Luego, aprende a migrar a color HD.
Los espacios de color que no son sRGB en la Web están en sus primeros días, pero veremos un aumento en el uso por parte de diseñadores y desarrolladores con el tiempo. Saber cuál espacio de color para crear un sistema de diseño, por ejemplo, es una herramienta fuerte para estar en un cinturón de herramientas para creadores. Cada espacio de color ofrece características únicas y una razón por la que fue agregado a la especificación de CSS. Puedes comenzar de a poco y agregar según sea necesario.
Recursos
Lee más acerca de nuestros artículos de nivel de color 5.
Además, puedes encontrar material de lectura adicional en la Web:
- Nivel 4 del módulo de color de CSS de W3C
Okhsv y Okhsl: dos nuevos espacios de color para elegir los colores
Y herramientas: