Про 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 символів.