Tentang Grabient

1 · Keyframe

Keyframe adalah warna yang Anda pilih. Seperti dalam animasi, Anda menetapkan beberapa, lalu warna di antaranya terisi. Palet memiliki 2 sampai 8 keyframe yang tersebar merata di sepanjang gradien, dan gradien melewati setiap keyframe itu:

Setiap keyframe terdiri dari tiga angka dalam OKLCH. Kecerahan L berkisar dari 0 (hitam) hingga 1 (putih). Kroma C adalah seberapa kuat warnanya: 0 berarti abu-abu, dan warna layar yang paling menyala sekitar 0,3. Rona H adalah sudut pada roda warna, dalam derajat.

2 · Rumus

Kecerahan, kroma, dan rona masing-masing punya kurva sendiri, yang digambar pada grafik di atas. Setiap kurva melewati keyframe dan melengkung halus di antaranya. Warna di titik mana pun didapat dengan membaca ketiga kurva di titik itu.

Gradien CSS dan Figma menghubungkan titik-titik warnanya dengan garis lurus, sehingga tepi samar bisa muncul di tempat laju perpaduannya berubah.

Dalam rumus ini, t berkisar dari 0 di awal gradien hingga 1 di akhir. Dengan K keyframe, keyframe i berada di t = i / (K − 1), dihitung mulai dari 0. Setiap kurva adalah spline Catmull–Rom, dan gamut() menyesuaikan warna dengan layar (bagian 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 · Langkah

Untuk menggambar gradien, Grabient mengambil warna pada titik-titik yang berjarak sama, yang disebut langkah. Langkah pertama dan terakhir adalah keyframe pertama dan terakhir. Gaya gradien memakai langkah sebagai titik warna. Gaya pita menampilkan setiap langkah sebagai pita berwarna solid. Jumlah langkah tidak pernah lebih sedikit daripada jumlah keyframe:

4 · Mengapa OKLCH

RGB dan HSL menggambarkan cara layar mencampur cahaya, dan angka-angkanya sering tidak sesuai dengan yang kita lihat. Kuning murni dan biru murni sama-sama punya kecerahan HSL 50%, padahal kuning terlihat jauh lebih terang. OKLCH memberi keduanya 0,97 dan 0,45. OKLCH adalah OKLab karya Björn Ottosson dalam bentuk polar, yang dibuat agar perubahan yang sama besar pada angkanya terlihat sama besar. Dua warna yang dicampur dengan kedua cara:

Karena kecerahan, kroma, dan rona terpisah, mengubah rona sebuah keyframe tidak mengubah kecerahannya.

5 · Rona melewati 360°

Di antara dua rona, gradien bisa memutari roda warna ke arah mana pun, dan kebanyakan alat mengambil jalan yang lebih pendek. Grabient membiarkan rona terus dihitung melewati 360°: 690° adalah warna yang sama dengan 330°, satu putaran kemudian. Gradien menempuh seluruh jalannya:

Pergeseran sebuah palet adalah rona terakhirnya dikurangi rona pertamanya, termasuk putarannya, sehingga pelangi penuh bergeser 360°. Keyframe yang bersebelahan bisa berjarak hingga 540°.

6 · Warna yang tidak dapat ditampilkan layar

OKLCH bisa menyatakan warna yang lebih menyala daripada yang dapat ditampilkan layar. Untuk warna seperti itu, Grabient mempertahankan kecerahan dan rona, lalu menurunkan kroma sampai warnanya muat: sRGB pada layar standar, Display P3 pada layar dengan gamut luas. CSS Color 4 melakukan hal yang sama untuk warna oklch():

7 · Resep

Beberapa palet dan kurva yang membentuknya:

Balik menyusun keyframe dalam urutan sebaliknya. Inversi membuat negatif: setiap kecerahan L menjadi 1 − L, dan setiap rona berputar 180°.

8 · Seed

Alamat setiap palet memuat seed-nya, kode pendek untuk keyframe-nya. Seed pada gambar pertama adalah kW6iw33i87sY6O2wq7rmZ07I.

Seed adalah k, diikuti keyframe yang dipadatkan ke dalam bit: 8 untuk kecerahan, 8 untuk kroma, 9 untuk rona pertama, lalu 10 untuk setiap rona berikutnya, yang disimpan sebagai selisih dari rona sebelumnya:

Dua keyframe membentuk seed sepanjang 11 karakter, dan delapan membentuk seed sepanjang 37 karakter. Setiap palet punya tepat satu seed.

Keyframe yang ditetapkan dari warna hex menyimpan warna itu dengan tepat, dalam 24 bit. Seed seperti itu panjangnya 9 sampai 50 karakter.