Guía de colores de CSS de alta definición

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.

Adam Argyle

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.

.

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.

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.

.

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.

.

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:

.

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

.

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:

• Hexadecimal
• RGB
• HSL
• HWB

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.

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.

• Sintaxis de colores relativos de CSS
• Combinación de colores de CSS

Además, puedes encontrar material de lectura adicional en la Web:

• Nivel 4 del módulo de color de CSS de W3C

• Nivel 5 del módulo de color de CSS de W3C

• Colores LCH en CSS: ¿qué, por qué y cómo?

• ¿Mejor que en Lab? Reducción de gamma: CIE Lab y OKLab

• Hacia el uso de colores más vivos en la Web

• Okhsv y Okhsl: dos nuevos espacios de color para elegir los colores

• Hacia el uso de colores más vivos en Chromium (PDF)

• ¡LCH es el mejor espacio de color!

• Diseño de sistemas de color accesibles

• Espacios de color, por Hannah Weller

• Amplia gama de colores en CSS con Display-P3

• Espacio de color CIE 1931

• Formatos de color en CSS

• Espacios de color de Bartosz Ciechanowski

Y herramientas:

• afc163.github.io/color3d/
• Visualización de gama
• Generador de gradientes vivo