Über Grabient

1 · Keyframes

Ein Keyframe ist eine Farbe, die du wählst. Wie in der Animation setzt du ein paar davon, und die Farben dazwischen werden ergänzt. Eine Palette hat 2 bis 8 Keyframes, gleichmäßig entlang des Farbverlaufs verteilt, der durch jeden von ihnen läuft:

Jeder Keyframe besteht aus drei Zahlen in OKLCH. Die Helligkeit L reicht von 0 (Schwarz) bis 1 (Weiß). Das Chroma C gibt an, wie bunt er ist: 0 ist Grau, und die leuchtendsten Bildschirmfarben liegen bei etwa 0,3. Der Farbton H ist der Winkel auf dem Farbkreis, in Grad.

2 · Die Formel

Helligkeit, Chroma und Farbton haben jeweils eine eigene Kurve, die im Graphen oben dargestellt ist. Jede Kurve geht durch die Keyframes und biegt sich dazwischen sanft. Die Farbe an jeder Stelle ergibt sich aus den drei Kurven, dort abgelesen.

CSS- und Figma-Farbverläufe verbinden ihre Farbstopps mit geraden Linien, sodass eine leichte Kante sichtbar werden kann, wo der Übergang sein Tempo ändert.

In der Formel läuft t von 0 am Anfang des Farbverlaufs bis 1 am Ende. Bei K Keyframes liegt Keyframe i bei t = i / (K − 1), gezählt ab 0. Jede Kurve ist ein Catmull-Rom-Spline, und gamut() passt die Farbe an den Bildschirm an (Abschnitt 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 · Stufen

Um den Farbverlauf darzustellen, entnimmt Grabient Farben an gleichmäßig verteilten Stellen, Stufen genannt. Die erste und die letzte Stufe sind der erste und der letzte Keyframe. Stile mit Farbverlauf nutzen die Stufen als Farbstopps. Gestufte Stile zeigen jede Stufe als einfarbigen Streifen. Es gibt nie weniger Stufen als Keyframes:

4 · Warum OKLCH

RGB und HSL beschreiben, wie ein Bildschirm Licht mischt, und ihre Zahlen passen oft nicht zu dem, was wir sehen. Reines Gelb und reines Blau haben beide eine HSL-Helligkeit von 50 %, doch das Gelb wirkt viel heller. OKLCH gibt ihnen 0,97 und 0,45. Es ist Björn Ottossons OKLab in Polarform, so gebaut, dass gleiche Änderungen seiner Zahlen gleich aussehen. Zwei Farben, auf beide Arten gemischt:

Da Helligkeit, Chroma und Farbton getrennt sind, behält ein Keyframe seine Helligkeit, wenn du seinen Farbton änderst.

5 · Farbton über 360° hinaus

Zwischen zwei Farbtönen kann ein Farbverlauf in beide Richtungen um den Farbkreis laufen, und die meisten Tools nehmen den kürzeren Weg. Grabient lässt den Farbton über 360° hinaus zählen: 690° ist dieselbe Farbe wie 330°, eine Runde später. Der Farbverlauf legt den ganzen Weg zurück:

Der Farbtonweg einer Palette ist ihr letzter Farbton minus ihr erster, Runden eingeschlossen, sodass ein ganzer Regenbogen 360° zurücklegt. Benachbarte Keyframes können bis zu 540° auseinanderliegen.

6 · Farben, die ein Bildschirm nicht darstellen kann

OKLCH kann Farben beschreiben, die leuchtender sind, als ein Bildschirm sie darstellen kann. Bei solchen Farben behält Grabient Helligkeit und Farbton bei und senkt das Chroma, bis die Farbe passt: sRGB auf einem Standardbildschirm, Display P3 auf einem Wide-Gamut-Bildschirm. CSS Color 4 macht dasselbe für oklch()-Farben:

7 · Rezepte

Einige Paletten und die Kurven, aus denen sie bestehen:

Umkehren bringt die Keyframes in die umgekehrte Reihenfolge. Invertieren erzeugt ein Negativ: Jede Helligkeit L wird zu 1 − L, und jeder Farbton dreht sich um 180°.

8 · Der Seed

Die Adresse jeder Palette enthält ihren Seed, einen kurzen Code für ihre Keyframes. Der Seed der ersten Abbildung ist kW6iw33i87sY6O2wq7rmZ07I.

Ein Seed ist k, gefolgt von den in Bits gepackten Keyframes: 8 für die Helligkeit, 8 für das Chroma, 9 für den ersten Farbton, dann 10 für jeden weiteren Farbton, gespeichert als Änderung gegenüber dem vorherigen:

Zwei Keyframes ergeben einen Seed mit 11 Zeichen, acht einen mit 37. Jede Palette hat genau einen Seed.

Ein aus einer Hex-Farbe gesetzter Keyframe behält genau diese Farbe, in 24 Bit. Ein solcher Seed hat 9 bis 50 Zeichen.