Para decirlo sin rodeos, la interpolación de color es el proceso de determinar el color entre dos colores. Nos permite crear colores únicos, hermosas paletas, mejores gradientes y transiciones suaves.
Lo he escrito recientemente Guía de características de color CSS Pero no hay posibilidad de interpretar la interpolación de color a profundidades de cualquier profundidad: es una pena porque nos permite crear demostraciones geniales como esta:
¿Cómo te di cuenta oklch(80% 0.3 340) Interpolación oklch(80% 0.3 60),Entonces oklch(80% 0.3 180),Entonces oklch(80% 0.3 270) Entonces regresa oklch(80% 0.3 340) ¿Usando la animación CSS? Ok, lo hice! Este es solo un poderoso propósito de interpolación.
¿Dónde podemos usar la interpolación de color?
Del mismo modo, la interpolación de color se extiende por CSS. Estas características y funciones admiten la interpolación de color a través de una mezcla directa, gradientes o transiciones:
En el gradiente y color-mix() Función, incluso tenemos la sintaxis oficial para la interpolación de color:
<color-interpolation-method> = in ( <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? )
<color-space> = <rectangular-color-space> | <polar-color-space>
<rectangular-color-space> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65
<polar-color-space> = hsl | hwb | lch | oklch
<hue-interpolation-method> = ( shorter | longer | increasing | decreasing ) hueSí, esta es una definición confusa, pero si seguimos verificando cómo funciona esa sintaxis color-mix()por ejemplo, tendríamos algo como esto:
.element{
color: color-mix(in lch longer hue, red, blue);
}CSS color-mix() La función nos proporciona una forma de mezclar diferentes colores en cualquier espacio de color, y eso es lo que significa la interpolación de color: desde el color hasta otro color.
Nuestro enfoque es in lab longer hue Parte, especifique cómo color-mix() Realizar la interpolación. Esto básicamente dice: «Hola, CSS, inserte el siguiente color en el espacio de color Cielch usando un arco de tono más largo». Sí, in lab En parte significa que la interpolación se realiza en Cielch, que es mucho Espacio de color CSSpero que haremos longer hue Significa más tarde.
Atención – Recuerde:
- este
inLas palabras clave siempre preceden a los métodos de interpolación de color. - El segundo valor es el espacio de color utilizado para mezclar.
- El tercer valor es un método de interpolación de tono opcional,
huePalabras clave.
La misma sintaxis aparece en todas las funciones de gradiente, donde los colores se interpolan gradualmente para obtener gradientes suaves. Vea cómo ajustar el gradiente de la sintaxis de interpolación de color para darnos un gradiente nuevo:
.element {
background: linear-gradient(in oklch longer hue 90deg, magenta, cyan);
}Pero volvamos un poco. La interpolación se puede realizar en dos espacios de color principales: Rectangular y polaridad.
Espacio de color rectangular
Los espacios de color rectangulares usan coordenadas cartesianas en un plano tridimensional para representar los colores, que puede haber llamado a los ejes X (horizontal), Y (vertical) y Z (profundo).
El espacio de color rectangular es como el mismo gráfico, pero el mapa de puntos de color. Por ejemplo, el espacio de color SRGB tiene tres ejes responsables del enrojecimiento, el azul y la verdura del color.
Espacio de color extremo
El espacio de color polar también representa el color de un plano tridimensional, al igual que un espacio de color rectangular, pero con forma de cilindro en lugar de un rectángulo. Los puntos de color están representados por tres valores:
- este Altura de punto a centrogeneralmente asignado a luz o brillo.
- este Distancia radial desde el centrogeneralmente asignado a cromaticidad o saturación.
- este Ángulo alrededor del centroasignar a Hue.
Lo que hace que el espacio polar sea único es el tono ángulo. Dado que es un ángulo, y son bucles (por ejemplo, círculos continuos), tenemos más opciones para interpolar.
Interpolación de tono
Piense en la interpolación del tono, como encontrar la distancia entre dos veces en el reloj.
Supongamos que el reloj se puede realizar en sentido antihorario (hacia atrás) o en sentido antihorario en el tiempo.
Los minutos son 10 minutos (2). Si queremos hacer la distancia más corta (10) entre 50 minutos, giraremos en sentido antihorario, al igual que regresar en el tiempo, porque esto es más corto que ir en el sentido de las agujas del reloj.
Eso es porque si aceptas Más extenso Rutas, debe pasar 3, 4, 5, etc. hasta 10. corto Ruta en sentido antihorario), alcanzará los 10 (15 minutos) en menos tiempo.
La interpolación de tono funciona de manera similar. Este es un algoritmo CSS que determina cómo mezclar los tonos en el espacio de color polar y las direcciones que se tomarán entre los dos puntos de tono.
Hay cuatro tipos de interpolación de tono en CSS. A continuación, presentemoslos.
shorter y longer
este shorter (Predeterminado) El método de interpolación de tono solo usa corto Ruta y longer Se adopta el método de interpolación de Hue Más extenso Ruta al mezclar colores entre dos puntos de tono.
Imagina mezclar dos tonos de rojo (0deg) y azul (240deg). Hay dos formas de hacer esto:
- Tomar rutas más largas (distancia de distancia
240deg). - Tomar una ruta más corta (distancia de distancia
120deg).
si shorter Usado, navegador corto ruta(120deg). De lo contrario, si longer Usado, navegador Más extenso ruta(240deg).
Esto proporciona un color hermoso y único del color dependiendo de su preferencia. La interpolación de Hue ayuda a crear transiciones de color y gradientes suaves, usando color.
La interpolación de tono más corta o más larga depende de la distancia más corta o más larga entre los dos puntos de valor de tono y se puede girar en sentido horario o en sentido antihorario. También podemos establecer esta función automáticamente sin usar una de las siguientes palabras clave, veremos la siguiente palabra clave.
increasing y decreasing
Quédate con nuestra analogía del reloj, increasing El método de interpolación de Hue es como mover la mano del minuto de 2 a 10, siempre moverse en sentido horario. Incluso si el valor final es 1, seguirá en sentido horario, girando casi todos.
Sin embargo, si el método de interpolación de tono se establece en decreasingLa mano del minuto siempre estará en la dirección en sentido antihorario. Como Declaración de especificación,,,,, «(D) En términos de la diferencia entre los dos ángulos, esto se ve igual que un caso más corto o más largo».
Si el ángulo de 20deg llegar 50deg usar increasing Valor de interpolación de HUE, el valor se moverá Dextrorso de 20deg llegar 50degMuestre el color entre. Sin embargo, si el método de interpolación de tono se establece en decreasingy luego el algoritmo de 20deg llegar 50deg En la dirección en sentido antihorario.
desde increasing Significa que la pequeña mano del reloj avanza constantemente, lo que significa que el valor se puede lograr 360degun círculo completo. Si el ángulo alcanza 360degse restablece a 0deg Hasta que se alcance el siguiente punto. Pero si decreasing llegar 0degluego reinicie a 360degmantenga los cambios de tono consistentes.
¿Es esto útil?
Sí, todas estas teorías son geniales: podemos usar la interpolación para obtener la interpolación entre dos colores y hacer nuevos colores, pero ¿cómo lo usamos realmente para crear una mejor experiencia de color en CSS?
Crear gradientes
La interpolación de color ocurre con frecuencia entre todos Función de gradiente de CSS. Por ejemplo conic-gradient() Función, que crea fácilmente transiciones suaves de colores que giran alrededor del punto central:
background: conic-gradient(
from 0deg,
oklch(70% 0.3 0deg),
oklch(70% 0.3 120deg),
oklch(70% 0.3 240deg),
oklch(70% 0.3 360deg)
);Tenga en cuenta cómo el tono se combina suavemente entre cada punto de parada de color? es hermoso.
Mezcla de color
leer color-mix() En CSS-Tricks, el anuario le dará conceptos básicos sobre cómo hacerlo, pero si eres como yo y quieres el código original, es:
/* First Box */
background-color: color-mix(in oklch, rgb(255 0 0) 50%, lch(60% 40% 220deg) 50%);
/* Second Box */
background-color: color-mix(in oklch longer hue, rgb(255 0 0) 50%, lch(60% 40% 220deg) 50%);Una gran ventaja color-mix() Es que puede mezclar colores en diferentes espacios de color dentro de otro espacio de color para producir colores únicos. Una vez más, se está moviendo de un color a otro, y somos cruciales a la dirección en que mezclamos los colores.
dibujos animados
¡Podemos hacer la transición entre animaciones de colores! ¡Entonces podemos observar la transición de color entre todos los colores entre dos puntos, en lugar de mezclar dos puntos específicos!
@keyframes bg-shift {
from {
background-color: oklch(30% 0.3 20deg); /* dark pink */
}
to {
background-color: oklch(70% 0.3 200deg); /* Cool bluish */
}
}
