Sobre o Grabient

1 · Quadros-chave

Um quadro-chave é uma cor que você escolhe. Como na animação, você define alguns, e as cores entre eles são preenchidas. Uma paleta tem de 2 a 8 quadros-chave, espaçados por igual ao longo do gradiente, que passa por cada um deles:

Cada quadro-chave é formado por três números em OKLCH. A luminosidade L vai de 0 (preto) a 1 (branco). O croma C é o quanto a cor é colorida: 0 é cinza, e as cores mais vivas de uma tela ficam em torno de 0,3. O matiz H é o ângulo no círculo cromático, em graus.

2 · A fórmula

Luminosidade, croma e matiz têm cada um a sua curva, desenhada no gráfico acima. Cada curva passa pelos quadros-chave e se encurva suavemente entre eles. A cor em qualquer ponto é a leitura das três curvas nesse ponto.

Os gradientes do CSS e do Figma ligam as paradas de cor com linhas retas, então uma borda sutil pode aparecer onde a transição muda de ritmo.

Na fórmula, t vai de 0 no início do gradiente a 1 no fim. Com K quadros-chave, o quadro-chave i fica em t = i / (K − 1), contando a partir de 0. Cada curva é uma spline Catmull–Rom, e gamut() ajusta a cor à tela (seção 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 · Etapas

Para desenhar o gradiente, o Grabient pega cores em pontos espaçados por igual, chamados etapas. A primeira e a última etapa são o primeiro e o último quadro-chave. Os estilos de gradiente usam as etapas como paradas de cor. Os estilos de faixas mostram cada etapa como uma faixa de cor sólida. Nunca há menos etapas do que quadros-chave:

4 · Por que OKLCH

RGB e HSL descrevem como uma tela mistura luz, e os números deles muitas vezes não correspondem ao que vemos. O amarelo puro e o azul puro têm luminosidade HSL de 50%, mas o amarelo parece bem mais claro. O OKLCH dá a eles 0,97 e 0,45. Ele é o OKLab de Björn Ottosson em forma polar, feito para que mudanças iguais nos números pareçam iguais. Duas cores misturadas dos dois jeitos:

Como luminosidade, croma e matiz são separados, alterar o matiz de um quadro-chave mantém a sua luminosidade.

5 · Matiz além de 360°

Entre dois matizes, um gradiente pode seguir por qualquer um dos lados do círculo cromático, e a maioria das ferramentas pega o caminho mais curto. O Grabient deixa o matiz passar de 360°: 690° é a mesma cor que 330°, uma volta depois. O gradiente percorre o caminho todo:

O percurso de uma paleta é o último matiz menos o primeiro, contando as voltas, então um arco-íris completo percorre 360°. Quadros-chave vizinhos podem ficar a até 540° um do outro.

6 · Cores que uma tela não consegue mostrar

O OKLCH pode descrever cores mais vivas do que uma tela consegue mostrar. Nesses casos, o Grabient mantém a luminosidade e o matiz e reduz o croma até a cor caber: sRGB em uma tela padrão, Display P3 em uma de gama ampla. O CSS Color 4 faz o mesmo com cores oklch():

7 · Receitas

Algumas paletas e as curvas que as formam:

Inverter ordem coloca os quadros-chave na ordem oposta. Inverter cria um negativo: cada luminosidade L passa a ser 1 − L, e cada matiz gira 180°.

8 · A semente

O endereço de cada paleta contém a sua semente, um código curto dos seus quadros-chave. A semente da primeira figura é kW6iw33i87sY6O2wq7rmZ07I.

Uma semente é k seguido dos quadros-chave compactados em bits: 8 para a luminosidade, 8 para o croma, 9 para o primeiro matiz e depois 10 para cada matiz seguinte, guardado como a variação em relação ao anterior:

Dois quadros-chave formam uma semente de 11 caracteres, e oito formam uma de 37. Cada paleta tem exatamente uma semente.

Um quadro-chave definido por uma cor hex mantém essa cor exata, em 24 bits. Uma semente assim tem de 9 a 50 caracteres.