About Grabient

1 · Keyframes

A keyframe is a color you choose. As in animation, you set a few and the colors between them are filled in. A palette has 2 to 8 keyframes, spaced evenly along the gradient, which passes through each one:

Each keyframe is three numbers in OKLCH. Lightness L runs from 0 (black) to 1 (white). Chroma C is how colorful it is: 0 is gray, and the most vivid screen colors are around 0.3. Hue H is the angle on the color wheel, in degrees.

2 · The formula

Lightness, chroma and hue each have their own curve, drawn in the graph above. Each curve passes through the keyframes and bends smoothly between them. The color at any point is the three curves read there.

CSS and Figma gradients join their color stops with straight lines, so a faint edge can show where the blend changes pace.

In the formula, t runs from 0 at the start of the gradient to 1 at the end. With K keyframes, keyframe i sits at t = i / (K − 1), counting from 0. Each curve is a Catmull–Rom spline, and gamut() fits the color to the screen (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 · Steps

To draw the gradient, Grabient takes colors at evenly spaced points, called steps. The first and last steps are the first and last keyframes. Gradient styles use the steps as color stops. Band styles show each step as a band of flat color. There are never fewer steps than keyframes:

4 · Why OKLCH

RGB and HSL describe how a screen mixes light, and their numbers often don't match what we see. Pure yellow and pure blue both have an HSL lightness of 50%, yet the yellow looks far lighter. OKLCH gives them 0.97 and 0.45. It is Björn Ottosson's OKLab in polar form, built so equal changes in its numbers look equal. Two colors mixed both ways:

Since lightness, chroma and hue are separate, changing a keyframe's hue keeps its lightness.

5 · Hue beyond 360°

Between two hues, a gradient can go either way around the color wheel, and most tools take the shorter way. Grabient lets hue count past 360°: 690° is the same color as 330°, one lap later. The gradient goes the whole way:

A palette's travel is its last hue minus its first, laps included, so a full rainbow travels 360°. Neighboring keyframes can be up to 540° apart.

6 · Colors a screen can't show

OKLCH can describe colors more vivid than a screen can show. For those, Grabient keeps the lightness and hue and lowers the chroma until the color fits: sRGB on a standard screen, Display P3 on a wide-gamut one. CSS Color 4 does the same for oklch() colors:

7 · Recipes

Some palettes and the curves that make them:

Reverse puts the keyframes in the opposite order. Invert makes a negative: each lightness L becomes 1 − L, and each hue turns 180°.

8 · The seed

Every palette's address holds its seed, a short code for its keyframes. The first figure's seed is kW6iw33i87sY6O2wq7rmZ07I.

A seed is k followed by the keyframes packed into bits: 8 for lightness, 8 for chroma, 9 for the first hue, then 10 for each later hue, stored as the change from the one before:

Two keyframes make a seed of 11 characters, and eight make one of 37. Each palette has exactly one seed.

A keyframe set from a hex color keeps that exact color, in 24 bits. Such a seed runs from 9 to 50 characters.