Este documento forma parte de la guía de colores de CSS de alta definición.
El color 4 de CSS describe una variedad de funciones y herramientas nuevas para CSS y color. En Codepen, se muestran todas las sintaxis de color nuevas y antiguas juntas:
Lee el resumen de los espacios de color clásicos.
La especificación de nivel 4 introdujo 12 nuevos espacios de color para buscar colores, en comparación con los 7 nuevos gamuts que se compartieron anteriormente:
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() {#linear-srgb}
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
LCH presenta sintaxis para acceder a colores fuera de la gama RGB. También es el primero en facilitar la creación de colores fuera de rango para una pantalla. Esto se debe a que cualquier color de espacio de CIE (lch, oklch, lab, oklab) puede 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. Es una luminosidad especial "lineal perceptualmente", centrada en los seres humanos. El croma es similar a la saturación; puede variar de 0 a 230, pero técnicamente no tiene límites.
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 {#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.
Clave-Término: El punto blanco es un atributo de un espacio de color, es donde existe el blanco verdadero dentro del espacio. Para pantallas electrónicas, D65 es el punto blanco más común y es la abreviatura de 6, 500 Kelvin. Para la conversión de color, es importante que los puntos blancos coincidan, de modo que no se vea afectada la temperatura de color (calidez o frío).
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);
}
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%));
}
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 de .gradient, los navegadores notan los espacios de color diferenciadores y usan 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. Es por eso que 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 descendente 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, ¿qué pasaría 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 toma 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 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 sí porque se recorre la menor distancia posible, en la que la larga distancia ha 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, genera un gradiente diferente. En los siguientes ejemplos, observa cómo cada espacio de color controla esto de manera diferente, especialmente en azul y blanco. Observa cuántos se vuelven de color púrpura en el medio, lo que se denomina cambio de matiz durante la interpolación.
Algunos gradientes en estos espacios son más vibrantes que otros o atraviesan menos 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%));
}
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!
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 convierte en 255 internamente 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
Próximos pasos
Ahora que conoces las herramientas y los espacios de color nuevos, puedes migrar a los colores HD.
Más vitalidad, interpolaciones y manipulaciones coherentes y, en general, ofrecen una experiencia más colorida a tus usuarios.
Obtén más información sobre los recursos de color en la guía.