À propos de Grabient

1 · Points clés

Un point clé est une couleur que vous choisissez. Comme en animation, vous en placez quelques-uns et les couleurs entre eux sont interpolées. Une palette compte de 2 à 8 points clés, répartis régulièrement le long du dégradé, qui passe par chacun d’eux :

Chaque point clé se compose de trois nombres en OKLCH. La luminosité L va de 0 (noir) à 1 (blanc). Le chroma C indique à quel point la couleur est colorée : 0 correspond au gris, et les couleurs d’écran les plus vives avoisinent 0,3. La teinte H est l’angle sur le cercle chromatique, en degrés.

2 · La formule

La luminosité, le chroma et la teinte ont chacun leur propre courbe, tracée dans le graphique ci-dessus. Chaque courbe passe par les points clés et s’infléchit en douceur entre eux. En tout point, la couleur est donnée par les trois courbes lues à cet endroit.

Les dégradés CSS et Figma relient leurs arrêts de couleur par des lignes droites, si bien qu’une légère démarcation peut apparaître là où le fondu change de rythme.

Dans la formule, t va de 0 au début du dégradé à 1 à la fin. Avec K points clés, le point clé i se trouve à t = i / (K − 1), en comptant à partir de 0. Chaque courbe est une spline de Catmull–Rom, et gamut() adapte la couleur à l’écran (section 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 · Étapes

Pour dessiner le dégradé, Grabient prend des couleurs à des points régulièrement espacés, appelés étapes. La première et la dernière étape sont le premier et le dernier point clé. Les styles en dégradé utilisent les étapes comme arrêts de couleur. Les styles en bandes affichent chaque étape comme une bande de couleur unie. Il n’y a jamais moins d’étapes que de points clés :

4 · Pourquoi OKLCH

RGB et HSL décrivent la façon dont un écran mélange la lumière, et leurs valeurs ne correspondent souvent pas à ce que nous voyons. Le jaune pur et le bleu pur ont tous deux une luminosité HSL de 50 %, mais le jaune paraît bien plus clair. OKLCH leur donne 0,97 et 0,45. C’est l’OKLab de Björn Ottosson en coordonnées polaires, conçu pour que des variations égales de ses valeurs paraissent égales. Deux couleurs mélangées des deux façons :

Comme la luminosité, le chroma et la teinte sont séparés, changer la teinte d’un point clé conserve sa luminosité.

5 · Teinte au-delà de 360°

Entre deux teintes, un dégradé peut tourner dans un sens ou dans l’autre autour du cercle chromatique, et la plupart des outils prennent le chemin le plus court. Grabient permet à la teinte de dépasser 360° : 690° est la même couleur que 330°, un tour plus loin. Le dégradé fait tout le chemin :

Le parcours de teinte d’une palette est sa dernière teinte moins la première, tours compris : un arc-en-ciel complet parcourt donc 360°. Deux points clés voisins peuvent être distants de 540° au plus.

6 · Couleurs qu’un écran ne peut pas afficher

OKLCH peut décrire des couleurs plus vives que ce qu’un écran peut afficher. Pour celles-ci, Grabient conserve la luminosité et la teinte et réduit le chroma jusqu’à ce que la couleur tienne dans le gamut : sRGB sur un écran standard, Display P3 sur un écran à gamut étendu. CSS Color 4 fait de même pour les couleurs oklch() :

7 · Recettes

Quelques palettes et les courbes qui les composent :

Renverser met les points clés dans l’ordre contraire. Inverser donne un négatif : chaque luminosité L devient 1 − L, et chaque teinte tourne de 180°.

8 · La graine

L’adresse de chaque palette contient sa graine, un code court qui décrit ses points clés. La graine de la première figure est kW6iw33i87sY6O2wq7rmZ07I.

Une graine, c’est k suivi des points clés compactés en bits : 8 pour la luminosité, 8 pour le chroma, 9 pour la première teinte, puis 10 pour chaque teinte suivante, stockée comme l’écart par rapport à la précédente :

Deux points clés donnent une graine de 11 caractères, et huit en donnent une de 37. Chaque palette a exactement une graine.

Un point clé défini à partir d’une couleur hex conserve exactement cette couleur, sur 24 bits. Une telle graine compte de 9 à 50 caractères.