Giới thiệu Grabient

1 · Các keyframe

Keyframe là một màu bạn chọn. Như trong hoạt ảnh, bạn đặt vài keyframe và các màu ở giữa chúng được điền vào. Một bảng màu có từ 2 đến 8 keyframe, cách đều nhau dọc theo gradient, và gradient đi qua từng keyframe:

Mỗi keyframe là ba con số trong OKLCH. Độ sáng L chạy từ 0 (đen) đến 1 (trắng). Độ tươi C cho biết màu tươi đến mức nào: 0 là xám, và những màu rực nhất trên màn hình vào khoảng 0,3. Tông màu H là góc trên vòng màu, tính bằng độ.

2 · Công thức

Độ sáng, độ tươi và tông màu đều có đường cong riêng, được vẽ trong đồ thị phía trên. Mỗi đường cong đi qua các keyframe và uốn mượt giữa chúng. Màu tại mỗi điểm là giá trị của ba đường cong tại đó.

Gradient trong CSS và Figma nối các điểm dừng màu bằng đường thẳng, nên có thể lộ ra một đường ranh giới mờ ở chỗ nhịp chuyển màu thay đổi.

Trong công thức, t chạy từ 0 ở đầu gradient đến 1 ở cuối. Với K keyframe, keyframe i nằm tại t = i / (K − 1), đếm từ 0. Mỗi đường cong là một spline Catmull–Rom, và gamut() đưa màu vào gam của màn hình (mục 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 · Số bước

Để vẽ gradient, Grabient lấy màu tại những điểm cách đều nhau, gọi là bước. Bước đầu và bước cuối là keyframe đầu và keyframe cuối. Các kiểu gradient dùng các bước làm điểm dừng màu. Các kiểu sọc hiển thị mỗi bước thành một sọc màu trơn. Số bước không bao giờ ít hơn số keyframe:

4 · Vì sao dùng OKLCH

RGB và HSL mô tả cách màn hình trộn ánh sáng, và các con số của chúng thường không khớp với những gì ta thấy. Vàng thuần và xanh dương thuần đều có độ sáng HSL là 50%, nhưng màu vàng trông sáng hơn nhiều. OKLCH cho chúng 0,97 và 0,45. Đó là OKLab của Björn Ottosson ở dạng tọa độ cực, được xây dựng để những thay đổi bằng nhau trong các con số trông bằng nhau. Hai màu được pha theo cả hai cách:

Vì độ sáng, độ tươi và tông màu tách biệt nhau, đổi tông màu của một keyframe vẫn giữ nguyên độ sáng của nó.

5 · Tông màu vượt quá 360°

Giữa hai tông màu, gradient có thể đi theo chiều nào quanh vòng màu cũng được, và hầu hết công cụ chọn đường ngắn hơn. Grabient cho phép tông màu vượt quá 360°: 690° là cùng màu với 330°, sau một vòng nữa. Gradient đi trọn cả quãng đường:

Quãng xoay của bảng màu là tông màu cuối trừ tông màu đầu, tính cả các vòng, nên một cầu vồng trọn vẹn có quãng xoay 360°. Hai keyframe liền kề có thể cách nhau tới 540°.

6 · Màu mà màn hình không hiển thị được

OKLCH có thể mô tả những màu rực hơn mức màn hình hiển thị được. Với những màu đó, Grabient giữ nguyên độ sáng và tông màu, rồi hạ độ tươi cho đến khi màu nằm trong gam: sRGB trên màn hình thường, Display P3 trên màn hình gam màu rộng. CSS Color 4 cũng làm như vậy với các màu oklch():

7 · Cách phối màu

Một vài bảng màu và các đường cong tạo nên chúng:

Đảo chiều xếp các keyframe theo thứ tự ngược lại. Đảo màu tạo ra một âm bản: mỗi độ sáng L trở thành 1 − L, và mỗi tông màu xoay 180°.

8 · Mã seed

Địa chỉ của mỗi bảng màu chứa mã seed, một mã ngắn cho các keyframe. Mã seed của hình đầu tiên là kW6iw33i87sY6O2wq7rmZ07I.

Mã seed là k, theo sau là các keyframe được đóng gói thành bit: 8 cho độ sáng, 8 cho độ tươi, 9 cho tông màu đầu tiên, rồi 10 cho mỗi tông màu sau đó, lưu dưới dạng mức thay đổi so với tông màu trước:

Hai keyframe tạo ra mã seed dài 11 ký tự, còn tám keyframe tạo ra mã dài 37 ký tự. Mỗi bảng màu có đúng một mã seed.

Keyframe đặt từ một màu hex giữ đúng màu đó, bằng 24 bit. Mã seed như vậy dài từ 9 đến 50 ký tự.