Grabient 소개

1 · 키프레임

키프레임은 직접 고르는 색이에요. 애니메이션에서처럼 몇 개를 정하면 그 사이의 색이 채워져요. 팔레트에는 키프레임이 2~8개 있고, 그라데이션을 따라 같은 간격으로 놓여요. 그라데이션은 키프레임을 하나하나 지나요:

각 키프레임은 OKLCH의 숫자 세 개예요. 명도 L은 0(검정)에서 1(흰색)까지예요. 채도 C는 색이 얼마나 선명한지를 나타내요. 0은 회색이고, 화면에서 가장 선명한 색은 0.3 정도예요. 색조 H는 색상환 위의 각도를 도 단위로 나타내요.

2 · 공식

명도, 채도, 색조에는 각각 자기 곡선이 있고, 위 그래프에 그려져 있어요. 각 곡선은 키프레임을 지나고 그 사이에서 부드럽게 휘어요. 어느 지점의 색이든 그 지점에서 세 곡선을 읽은 값이에요.

CSS와 Figma의 그라데이션은 색상 스톱을 직선으로 이어요. 그래서 섞이는 속도가 바뀌는 곳에 희미한 경계가 보일 수 있어요.

공식에서 t는 그라데이션 시작점의 0부터 끝점의 1까지 변해요. 키프레임이 K개일 때 0부터 세어 i번째 키프레임은 t = i / (K − 1)에 놓여요. 각 곡선은 Catmull–Rom 스플라인이고, 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예요. OKLCH는 Björn Ottosson의 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자예요.