О Grabient

1 · Ключевые точки

Ключевой точкой называется цвет, который вы выбираете. Как в анимации, вы задаёте несколько точек, а цвета между ними дорисовываются. В палитре от 2 до 8 ключевых точек, равномерно расставленных вдоль градиента, и градиент проходит через каждую:

Каждая ключевая точка задаётся тремя числами в OKLCH. Светлота L меняется от 0 (чёрный) до 1 (белый). Хрома C показывает, насколько цвет красочный: 0 означает серый, а у самых ярких цветов экрана она около 0,3. Тон H задаёт угол на цветовом круге в градусах.

2 · Формула

Для светлоты, хромы и тона есть отдельные кривые, они показаны на графике выше. Каждая кривая проходит через ключевые точки и плавно изгибается между ними. Цвет в любом месте градиента складывается из значений трёх кривых в этом месте.

Градиенты CSS и Figma соединяют контрольные точки цвета прямыми линиями, поэтому там, где переход меняет темп, может проступать едва заметная граница.

В формуле t идёт от 0 в начале градиента до 1 в конце. При K ключевых точках ключевая точка i приходится на t = i / (K − 1), считая с 0. Каждая кривая строится как сплайн Катмулла–Рома, а gamut() приводит цвет к охвату экрана (раздел 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 · Шаги

Чтобы нарисовать градиент, Grabient берёт цвета через равные промежутки; они называются шагами. Первый и последний шаги совпадают с первой и последней ключевыми точками. Градиентные стили используют шаги как контрольные точки цвета. Стили с полосами показывают каждый шаг полосой сплошного цвета. Шагов никогда не бывает меньше, чем ключевых точек:

4 · Почему OKLCH

RGB и HSL описывают, как экран смешивает свет, и их числа часто не совпадают с тем, что мы видим. У чистого жёлтого и чистого синего одинаковая светлота в HSL, 50%, но жёлтый выглядит гораздо светлее. OKLCH даёт им 0,97 и 0,45. Это пространство OKLab Бьёрна Оттоссона в полярной форме, построенное так, чтобы равные изменения чисел выглядели равными. Два цвета, смешанные обоими способами:

Светлота, хрома и тон разделены, поэтому при изменении тона ключевой точки её светлота сохраняется.

5 · Тон за пределами 360°

Между двумя тонами градиент может пройти по цветовому кругу в любую сторону, и большинство инструментов выбирают более короткий путь. В Grabient тон может быть больше 360°: 690° даёт тот же цвет, что и 330°, только на оборот позже. Градиент проходит весь путь:

Путь тона палитры равен её последнему тону минус первый, с учётом полных оборотов, поэтому полная радуга проходит 360°. Между соседними ключевыми точками может быть до 540°.

6 · Цвета, которые экран не может показать

OKLCH может описывать цвета ярче, чем способен показать экран. Для таких цветов Grabient сохраняет светлоту и тон и снижает хрому, пока цвет не поместится в охват: sRGB на обычном экране, Display P3 на экране с широким охватом. CSS Color 4 делает то же самое для цветов oklch():

7 · Рецепты

Несколько палитр и кривые, которые их образуют:

«Развернуть» меняет порядок ключевых точек на обратный. «Инвертировать» делает негатив: каждое значение светлоты L становится 1 − L, а каждый тон поворачивается на 180°.

8 · Сид

Адрес каждой палитры содержит её сид, короткий код ключевых точек. Сид первого рисунка: kW6iw33i87sY6O2wq7rmZ07I.

Сид начинается с k, за которым идут ключевые точки, упакованные в биты: 8 на светлоту, 8 на хрому, 9 на первый тон, затем по 10 на каждый следующий тон, который хранится как изменение относительно предыдущего:

Две ключевые точки дают сид из 11 символов, а восемь дают сид из 37. У каждой палитры ровно один сид.

Ключевая точка, заданная hex-кодом, сохраняет этот цвет в точности, в 24 битах. Такой сид занимает от 9 до 50 символов.