Accede a más colores y espacios nuevos

Este documento forma parte de la guía de colores de CSS de alta definición.

El Color 4 de CSS detalla un conjunto de funciones y herramientas para CSS y color. El siguiente Codepen muestra todas las y sintaxis de colores anteriores:

Lee el resumen de los espacios de color clásicos.

La especificación para el nivel 4 introdujo 12 nuevos espacios de color para buscar colores, de los 7 nuevos gamuts compartidos anteriormente:

• sRGB lineal
• LCH
• okLCH
• LAB
• okLAB
• Pantalla p3
• Rec2020
• RGB a98
• ProPhoto RGB
• XYZ
• XYZ d50
• XYZ d65

Presentamos los nuevos espacios de color web

Los siguientes espacios de color ofrecen acceso a gamuts más grandes que sRGB. El El espacio de color display-p3 ofrece casi el doble de colores que RGB, mientras que Rec2020 ofrece casi el doble que display-p3. Son muchos colores.

La función color()

Navegadores compatibles

• 111
• 111
• (113)
• (15)

Origen

La nueva herramienta color() se puede utilizar para cualquier espacio de color que especifique colores con R, G y B canales. color() toma primero un parámetro de espacio de color y, luego, una serie de valores de canal para RGB y, opcionalmente, algo de alfa.

Encontrarás que muchos de los nuevos espacios de color usan esta función porque tener funciones especializadas, como rgb, srgb, hsl, hwb, etc., crecía a un lista larga, es más fácil hacer que el espacio de color sea un parámetro.

Ventajas

• Es un espacio normalizado para acceder a espacios de color que usan canales RGB.
• Se puede escalar verticalmente a cualquier espacio de color basado en RGB de gamut amplio.

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);
}

Nota: Los colores pueden estar en sRGB Gamut, Display P3 Gamut o Rec2020 Gamut. Hasta un 77.6% del espectro visible.

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 0% a 100%.

Ventajas

• Casi todas las pantallas admiten el rango de este espacio de color.
• Asistencia con las herramientas de diseño.

Desventajas

• No lineal perceptualmente (como lch() sí lo es)
• No se permite una amplia gama de colores.
• Los gradientes suelen pasar por una zona muerta.

.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() {#linear-sRGB}

Esta alternativa lineal a RGB ofrece una intensidad de canal predecible.

Ventajas

• Acceso directo a canales RGB, útil para motores de juegos o espectáculos de luces.

Desventajas

• No es lineal en términos perceptuales.
• Los bordes están delineados 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 analizan en detalle más adelante. pero, rápidamente, es significativo ver una srgb y una linear-srgb de negro a blanco. gradiente para ilustrar sus diferencias:

LCH

Navegadores compatibles

• (111)
• 111
• (113)
• (15)

Origen

El LCH introduce sintaxis para acceder a colores fuera del gamut RGB. También el primero en hacer que sea muy fácil crear color para una pantalla. Esto se debe a que cualquier color de espacio CIE (lch, oklch, lab, oklab) puede representar el todo el espectro de color visible por humanos.

Este espacio de color se basa en una visión humana y ofrece sintaxis para especificar cualquiera de esos colores y mucho más. Los canales LCH son ligereza, el croma y el matiz. que el tono sea un ángulo, como en HSL y HWB. La luminosidad es un valor entre 0 y 100. Es un modelo "perceptivamente lineal" centrado en el ser humano ligereza. El croma es similar a la saturación. puede variar de 0 a 230, pero técnicamente no delimitado.

Ventajas

• Manipulación del color predecible gracias a que es lineal en gran medida perceptivamente y es mayoritaria (consulta oklch).
• Usa canales conocidos.
• Suele tener gradientes brillantes.

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);
}

Precaución: Chroma puede permitir que los autores superen fácilmente el gamut de una pantalla. Ten cuidado con valores de C de croma altos.

LAB

Navegadores compatibles

• 111
• 111
• (113)
• (15)

Origen

Otro espacio de color creado para acceder a la gama CIE, de nuevo con una dimensión de luminosidad lineal (L). En LAB, A y B representan los ejes únicos de visión humana en color: rojo-verde y azul-amarillo. Cuando A se le da un valor positivo agrega rojo y verde cuando está por debajo de 0. Cuando B recibe un número positivo, agrega amarillo, donde los valores negativos van cerca del azul.

Ventajas

• Gradientes con coherencia perceptiva.
• Alto rango dinámico

Desventajas

• Posible cambio de matiz.
• Es difícil escribirlos 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);
}

OKLCH

Navegadores compatibles

• (111)
• 111
• (113)
• 15,4

Origen

Este espacio de color es correctivo a LCH Y al igual que el LCH, (L) continúa representando la luminosidad lineal perceptivamente lineal, C para la croma y la H para el matiz.

Este espacio te resultará familiar si trabajaste con HSL o LCH. Escoge un ángulo en la rueda de color para H, elige una luminosidad o la cantidad de 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 vienen en pares, o puede ser fácil pedir colores de croma alto que se fuera de un espectro objetivo.

Ventajas

• No hay sorpresas cuando se trabaja con tonos azules y púrpuras.
• Luz lineal perceptualmente lineal.
• Usa canales conocidos.
• Alto rango dinámico
• Tiene un selector de color moderno de Evil Martians.

Desventajas

• Es fácil salir de la gama.
• Es nuevo y relativamente inexplorado.
• 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

Navegadores compatibles

• (111)
• (111)
• (113)
• 15,4

Origen

Este espacio es correctivo para LAB. Se considera un espacio optimizado para la calidad del procesamiento de imágenes en CSS significa que los gradientes y la calidad de manipulación de la función de color.

Ventajas

• Espacio predeterminado para interpolaciones y animaciones.
• Luz lineal perceptivamente lineal.
• Sin cambio de matiz como LAB.
• Gradientes con coherencia perceptiva.

Desventajas

• Es nuevo y relativamente inexplorado.
• 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

Navegadores compatibles

• 111
• 111
• (113)
• (15)

Origen

Nota: Los colores se encuentran en Display P3 Gamut. el 45.5% del espectro visible.

La gama de pantallas P3 y el espacio de color se han vuelto populares porque Apple admite desde 2015 en su iMac. Apple también admite display-p3 en páginas web mediante CSS desde 2016, cinco años antes que en cualquier otro navegador. Si viene de sRGB, es un gran color espacio para comenzar a trabajar a medida que mueves estilos a un rango dinámico más alto.

Ventajas

• Excelente compatibilidad, considerada como modelo de referencia para las pantallas HDR.
• Un 50% más de colores que sRGB.
• Las Herramientas para desarrolladores ofrecen un excelente selector de color.

Desventajas

• Con el tiempo, será superado por 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

Navegadores compatibles

• 111
• 111
• (113)
• (15)

Origen

Nota: Los colores se encuentran en Rec2020 Gamut. el 77.6% del espectro visible.

Rec2020 es parte del movimiento a UHDTV (TV de ultraalta definición) que ofrece una amplia variedad de colores para usar en medios 4K y 8K. Rec2020 es otra Gama basada en RGB, más grande que display-p3, pero no tan común entre consumidores como Display P3.

Ventajas

• Colores Ultra HD.

Desventajas

• No es tan común entre los consumidores (todavía).
• No se encuentra comúnmente en dispositivos de mano 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);
}

RGB A98 {#a98-RGB}

Navegadores compatibles

• (111)
• (111)
• (113)
• (15)

Origen

Nota: Los colores se encuentran en RGB 98 Gamut. el 52.1% del espectro visible.

Abreviatura de Adobe 1998 RGB, Adobe creó A98 RGB para mostrar la mayoría de los colores disponibles en las impresoras CMYK. Ofrece más colores que sRGB, sobre todo en tonos cian y verde.

Ventajas

• Más grande que los espacios de color sRGB y Display P3.

Desventajas

• No es un espacio común en el que trabajan los diseñadores digitales.
• Pocas personas están migrando 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

Navegadores compatibles

• 111
• 111
• (113)
• (15)

Origen

Nota: Los colores se encuentran en ProPhoto Gamut. el 90% del espectro visible.

Creado por Kodak, este espacio de amplia gama ofrece de forma única colores y funciones con cambios de tono mínimos cuando se cambia la luminosidad. También afirma cubrir el 100% de colores de superficie del mundo real según lo documentado Michael Pointer en 1980.

Ventajas

• Cambia el tono mínimo cuando se cambia la luminosidad.
• Colores primarios brillantes.

Desventajas

• Aproximadamente el 13% de los colores que se ofrecen son imaginarios, es decir, que fuera del espectro humano visible.

.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

Navegadores compatibles

• 111
• 111
• (113)
• (15)

Origen

Nota: Los colores se encuentran en HVS Gamut. el 100% del espectro humano visible (HVS).

El espacio de color CIE XYZ abarca todos los colores que son visibles para una persona con visión normal. Por eso se utiliza como referencia estándar para otros colores y espacios. Y es la luminancia, X y Z son cromas posibles dentro de la Y dada. de la luminancia.

La diferencia entre d50 y d65 es el punto blanco, donde d50 utiliza el d50. puntos blancos y d65 usa el punto blanco d65.

Término clave: el punto blanco es un atributo de un espacio de color, es donde verdadero blanco dentro del espacio. Para las pantallas electrónicas, D65 es el punto blanco común y es la abreviatura de 6, 500 kelvin. Es importante por el color de conversión que coinciden con la temperatura del color (calidez o enfriamiento) no se ven afectadas.

Ventajas

• El acceso por luz lineal tiene casos de uso prácticos.
• Ideal para mezclar colores físicos.

Desventajas

• No es lineal desde un punto de vista perceptivo, como lo son 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 Color 5 de CSS también tiene un para enseñarle al navegador un espacio de color personalizado. Este es un perfil de ICC que le indica al navegador cómo para resolver los colores.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

Una vez cargados, accede a los colores de este perfil personalizado con la función color() y especifica los valores de canal para ella.

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

Interpolación de color

La transición de un color a otro se encuentra en la animación, los gradientes y mezcla de colores. Normalmente, esta transición se especifica como un color de inicio y una color final, donde se espera que el navegador interpole entre ellos. En este caso, "interpolar" 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. Con animación, es 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 nuevas gamas y espacios de color, se agregan nuevos opciones de interpolación. Cómo hacer la transición de un color in hsl de azul a blanco da como resultado 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);
}

.

Entonces, ¿qué sucede si pasas de un color en un espacio a un color en un 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%));
}

Por suerte, el Color 4 contiene instrucciones para los navegadores sobre cómo manejar estos problemas interpolaciones de espacio de color. Para .gradient, los navegadores detectan la diferenciación y utiliza el espacio de color predeterminado oklab.

Tal vez creas que el navegador usaría lch como el espacio de color, ya que ese es el primer color, pero no es así. 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 este color, todos los colores se guardaban en un número entero de 32 bits en representar los cuatro canales; rojo, verde, azul y alfa. Esto es de 8 bits por y 2^ 24 colores posibles (ignorando alfa). 2 ^ 24 = 16.777.216, "millones de colores".

Después de este color, cuatro valores de punto flotante de 16 bits, cada canal tiene su propia flotación en lugar de estar agrupadas. Esto es un total de 64 bits de datos lo que genera más que millones de colores.

Este trabajo es necesario para admitir el color HD. Esto aumentará la cantidad de color información que se puede almacenar, lo que tiene un efecto secundario agradable de significar que hay más colores para que el navegador los use en un gradiente.

Las bandas de gradientes ocurren cuando no hay suficientes colores para crear un gradiente suave. y “tiras” de color se vuelven visibles. Las bandas se mitigan en gran medida con el actualizar a un color de mayor resolución.

Fuente de la imagen

.

Interpolación de controles

La distancia más corta entre dos puntos es siempre una línea recta. Con color los navegadores toman la ruta corta de manera predeterminada. Considera una situación en el que hay dos puntos en un cilindro de color HSL. Un gradiente adquiere su los pasos de color viajando a lo largo de la línea entre los dos puntos.

linear-gradient(to right, #94e99c, #e06242)

(simulación de demostración)
Vista desde arriba de un cilindro HSL con una línea entre los puntos máximos de color

.

La línea del gradiente anterior va directamente entre el color verdoso y el rojizo color, pasando por el centro del espacio de color. Si bien lo anterior es genial, para ayudar con la comprensión inicial, no es exactamente lo que sucede. Este es el con gradiente en el siguiente Codepen y claramente no es blanco en el medio, que mostró la demostración simulada.

Sin embargo, el área del medio 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 central cerca del cual viajó la interpolación. Por lo general, esto se conoce como la "zona sin conexión". Hay hay algunas formas de solucionar este problema o solucionarlo.

Especificar más paradas de gradiente para evitar la zona muerta

Una técnica para evitar la zona muerta es agregar paradas de color adicionales en el gradiente que guía intencionalmente la interpolación para que permanezca dentro del los rangos vibrantes de un espacio de color. Es literalmente una solución alternativa, ya que paradas adicionales lo ayudan a sortear la zona sin conexión.

Hay una herramienta de gradiente que creó Erik Kennedy que calcula los colores adicionales para evitar la zona muerta, incluso en espacios de color que tienden a que te atraen. Usarlo y pasar los mismos colores del primer ejemplo pero al cambiar la interpolación de color a HSL, se produce lo siguiente:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

(simulación de demostración)
Vista cenital de un cilindro HSL con una línea curva con 9 topes de color

.

Con los puntos de paradas guiados, la interpolación ya no es una línea recta, sino parece curva alrededor de la zona muerta, lo que ayuda a mantener la saturación un gradiente mucho más intenso.

Si bien la herramienta funciona muy bien, ¿qué pasaría si tuviera directamente desde CSS?

Cómo dirigir la interpolación de color

En Color 4, la capacidad de controlar la estrategia de interpolación de matiz y es una nueva forma de (:wink:) la zona muerta. Piensa en un tono y considera un gradiente de 2 paradas que solo cambia el ángulo, pasando al tono. cambiando de 140deg a 240deg, por ejemplo.

Interpolación de tono más corto y más largo

El gradiente toma por defecto el valor shorter que puede, a menos que que especifiques para que tome longer ruta. Tono las opciones de interpolación dirigen la rotación del ángulo, como decirle a alguien que gire izquierda en lugar de derecha (je, Zoolander):

En el ejemplo de distancias de interpolación de matiz, la ruta corta y se simulan la ruta larga para ilustrar la diferencia. La distancia corta tiene menos matices entre él porque se desplaza a través de la menor cantidad de distancia posible, donde la larga distancia ha viajado a través de más tonalidades.

Aumento y disminución de la interpolación de matiz

Existen dos estrategias más de interpolación de matiz en Color 4, pero son exclusivas para modelos cilíndricos. espacios de color. A partir de los dos colores de los ejemplos anteriores, el elemento visual ahora muestra cómo funcionan el aumento y la disminución.

El Codepen anterior usó ColorJS para demostrar la resultado esperado. El CSS que escribirías para lograr el mismo efecto sin una La biblioteca de JavaScript sería:

.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 concluir la interpolación de matiz, a continuación se muestra un área de juegos divertida donde puedes cambiar la entre 2 paradas de color y verás los efectos de una opción de interpolación de matiz como y cómo los espacios de color cambian los resultados del gradiente. Los efectos pueden ser different; considera esto como cuatro nuevos trucos para tu cinturón de herramientas de color.

Gradientes en diferentes espacios de color

Cada espacio de color, dada su forma y organización de color únicas, da como resultado una con un gradiente diferente. En los siguientes ejemplos, observa cómo cada espacio de color maneja eso de manera diferente, especialmente en azul a blanco. ¿Observas cuántos se vuelve púrpura en el medio; que se llama cambio de matiz durante la interpolación.

Algunos gradientes de estos espacios son más vibrantes que otros o se desplazan menos. a través de zonas muertas. Los espacios como lab empaquetan los colores de una forma optimizada para la saturación, ya que a diferencia de los espacios optimizados para que las personas escriban colores 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, aunque sutil en los resultados, muestra una coherencia más coherente interpolación con el lab. Sin embargo, la sintaxis de un lab no es fácil de leer, números negativos muy desconocidos cuando provienen de rgb o hsl. Bueno podemos usar hwb para una sintaxis familiar, pero solicitar que el gradiente interpolado completamente 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%));
}

Este ejemplo utiliza los mismos colores en hwb, pero especifica el espacio de color para interpolación a hwb u oklab. hwb es un gran espacio de color para alta pero posibles zonas muertas o puntos brillantes (observa el punto caliente de cian en la ejemplo principal). Oklab es ideal para gradientes lineales perceptivamente que permanecen saturado. Esta función es muy divertida, ya que puedes probar con varios colores diferentes. espacios para ver qué gradiente te gusta más.

Este es un códec que experimenta con gradientes y espacios de color, mezclando estrategias de coincidencia para explorar las posibilidades. Incluso una transición del color negro a blanco es diferente en cada espacio de color.

Cierre de gama

Existen situaciones en las que un color puede pedir algo fuera de un espectro. Ten en cuenta el siguiente color:

rgb(300 255 255)

El máximo para un canal de color en el espacio de color rgb es 255, pero aquí Se especificó 300 para rojo. ¿Qué ocurre entonces? Restricción de gamma.

El aislamiento ocurre cuando simplemente se quita información adicional. 300 pasa a ser 255. internamente al motor de color. El color se acople a su espacio.

Cómo elegir un espacio de color

Muchas personas, después de aprender sobre estos espacios de color y sus efectos, sienten se siente abrumado y quiere saber cuál "uno" para elegir. A partir de mis estudios y experiencia, no veo un espacio de color único para todas mis tareas. Cada tiene momentos en los que producen el resultado deseado.

Si existiera un mejor espacio, no habría tantos espacios nuevos presentación.

Sin embargo, puedo decir que los espacios CIE (lab, oklab, lch y oklch) son mis puntos de partida. Si el resultado no es lo que busco, probar otros espacios. Para mezclar colores y crear gradientes, estoy de acuerdo con el la opción de especificaciones predeterminada de oklab. Para los sistemas de color y los colores generales de la interfaz de usuario, me gusta oklch

Aquí hay un par de artículos donde las personas compartieron su color actualizado a partir de estos nuevos espacios de color y funciones. Por ejemplo, Andrey Sitnik ha asumido oklch, tal vez te convencerán de que hagas lo mismo:

1. OKLCH en CSS: ¿por qué pasamos de RGB y HSL? Andrey Sitnik
2. Formatos de color por Josh W. Comeau
3. OK, OKLCH de Chris Coyier

Próximos pasos

Ahora que estás familiarizado con los nuevos espacios de color y herramientas, puedes migrar a color HD.

Más vitalidad, manipulaciones e interpolaciones coherentes y, en general, ofrecen un una experiencia más colorida a tus usuarios.

Leer más recursos de color en la guía.