Acerca de Grabient

1 · Fotogramas clave

Un fotograma clave es un color que eliges. Como en animación, defines unos pocos y se rellenan los colores intermedios. Una paleta tiene de 2 a 8 fotogramas clave, espaciados uniformemente a lo largo del degradado, que pasa por cada uno:

Cada fotograma clave consta de tres números en OKLCH. La luminosidad L va de 0 (negro) a 1 (blanco). El croma C indica lo colorido que es: 0 es gris, y los colores más vivos de una pantalla rondan 0.3. El tono H es el ángulo en la rueda de colores, en grados.

2 · La fórmula

La luminosidad, el croma y el tono tienen cada uno su propia curva, dibujada en la gráfica de arriba. Cada curva pasa por los fotogramas clave y se dobla con suavidad entre ellos. El color en cualquier punto es el que dan las tres curvas en ese punto.

Los degradados de CSS y de Figma unen sus paradas de color con líneas rectas, así que puede verse un borde tenue donde la transición cambia de ritmo.

En la fórmula, t va de 0 al inicio del degradado a 1 al final. Con K fotogramas clave, el fotograma clave i está en t = i / (K − 1), contando desde 0. Cada curva es un spline de Catmull–Rom, y gamut() ajusta el color a la pantalla (sección 6):

color(t) = gamut( L(t), C(t), H(t) )

// one axis: a Catmull–Rom spline through K evenly spaced valuesconst { min, max, floor } = Math;function spline(v, t) {  const K = v.length, x = min(max(t, 0), 1) * (K - 1);  const i = min(K - 2, floor(x)), u = x - i;  const p0 = v[max(i - 1, 0)], p1 = v[i];  const p2 = v[i + 1], p3 = v[min(i + 2, K - 1)];  return p1 + 0.5 * u * (p2 - p0    + u * (2*p0 - 5*p1 + 4*p2 - p3    + u * (3*(p1 - p2) + p3 - p0)));}// the color at t from the keyframes' L, C and H. A spline can overshoot// between keyframes, so L is kept in 0..1 and C at 0 or more. The// browser fits an oklch() color to the screen (section 6).function color(L, C, H, t) {  const l = min(max(spline(L, t), 0), 1), c = max(spline(C, t), 0);  return `oklch(${l} ${c} ${spline(H, t)})`;}

3 · Pasos

Para dibujar el degradado, Grabient toma colores en puntos espaciados uniformemente, llamados pasos. El primer y el último paso son el primer y el último fotograma clave. Los estilos de degradado usan los pasos como paradas de color. Los estilos de franjas muestran cada paso como una franja de color plano. Nunca hay menos pasos que fotogramas clave:

4 · Por qué OKLCH

RGB y HSL describen cómo una pantalla mezcla la luz, y sus valores a menudo no coinciden con lo que vemos. El amarillo puro y el azul puro tienen ambos una luminosidad HSL del 50 %, pero el amarillo parece mucho más claro. OKLCH les da 0.97 y 0.45. Es el OKLab de Björn Ottosson en forma polar, diseñado para que cambios iguales en sus valores se vean iguales. Dos colores mezclados de ambas formas:

Como la luminosidad, el croma y el tono están separados, cambiar el tono de un fotograma clave mantiene su luminosidad.

5 · Tono más allá de 360°

Entre dos tonos, un degradado puede recorrer la rueda de colores en uno u otro sentido, y la mayoría de las herramientas toman el camino más corto. Grabient deja que el tono siga contando más allá de 360°: 690° es el mismo color que 330°, una vuelta después. El degradado recorre todo el camino:

El recorrido de una paleta es su último tono menos el primero, vueltas incluidas, así que un arcoíris completo recorre 360°. Dos fotogramas clave contiguos pueden estar separados hasta 540°.

6 · Colores que una pantalla no puede mostrar

OKLCH puede describir colores más vivos de lo que una pantalla puede mostrar. En esos casos, Grabient mantiene la luminosidad y el tono, y reduce el croma hasta que el color quepa: sRGB en una pantalla estándar, Display P3 en una de gama amplia. CSS Color 4 hace lo mismo con los colores oklch():

7 · Recetas

Algunas paletas y las curvas que las forman:

Invertir orden pone los fotogramas clave en el orden opuesto. Invertir colores crea un negativo: cada luminosidad L pasa a ser 1 − L, y cada tono gira 180°.

8 · La semilla

La dirección de cada paleta contiene su semilla, un código corto de sus fotogramas clave. La semilla de la primera figura es kW6iw33i87sY6O2wq7rmZ07I.

Una semilla es una k seguida de los fotogramas clave empaquetados en bits: 8 para la luminosidad, 8 para el croma, 9 para el primer tono y luego 10 para cada tono siguiente, almacenado como el cambio respecto al anterior:

Dos fotogramas clave dan una semilla de 11 caracteres, y ocho, una de 37. Cada paleta tiene exactamente una semilla.

Un fotograma clave definido a partir de un color hex conserva ese color exacto, en 24 bits. Una semilla así tiene de 9 a 50 caracteres.