Grabient hakkında

1 · Anahtar kareler

Anahtar kare, seçtiğiniz bir renktir. Animasyonda olduğu gibi birkaçını belirlersiniz ve aralarındaki renkler doldurulur. Bir palette, gradyan boyunca eşit aralıklarla dizilen 2 ile 8 arası anahtar kare bulunur; gradyan her birinden geçer:

Her anahtar kare, OKLCH uzayında üç sayıdan oluşur. Açıklık L, 0'dan (siyah) 1'e (beyaz) uzanır. Kroma C, rengin ne kadar renkli olduğunu gösterir: 0 gri demektir, ekrandaki en canlı renkler ise 0.3 civarındadır. Ton H, renk çemberindeki derece cinsinden açıdır.

2 · Formül

Açıklık, kroma ve tonun her birinin, yukarıdaki grafikte çizilen kendi eğrisi vardır. Her eğri anahtar karelerden geçer ve aralarında yumuşakça kıvrılır. Herhangi bir noktadaki renk, üç eğrinin o noktadaki değerleridir.

CSS ve Figma gradyanları renk duraklarını düz çizgilerle birleştirir; bu yüzden geçişin hız değiştirdiği yerde silik bir kenar görünebilir.

Formülde t, gradyanın başındaki 0'dan sonundaki 1'e kadar ilerler. K anahtar kare varken, 0'dan sayılan i numaralı anahtar kare t = i / (K − 1) konumundadır. Her eğri bir Catmull–Rom spline eğrisidir ve gamut() rengi ekrana sığdırır (6. bölüm):

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 · Adımlar

Grabient gradyanı çizmek için eşit aralıklı noktalardan renk alır; bunlara adım denir. İlk ve son adım, ilk ve son anahtar karedir. Gradyan stilleri adımları renk durakları olarak kullanır. Şerit stilleri her adımı düz renkli bir şerit olarak gösterir. Adım sayısı hiçbir zaman anahtar kare sayısından az olmaz:

4 · Neden OKLCH

RGB ve HSL, bir ekranın ışığı nasıl karıştırdığını tanımlar ve sayıları çoğu zaman gördüğümüzle örtüşmez. Saf sarının da saf mavinin de HSL açıklığı %50'dir, yine de sarı çok daha açık görünür. OKLCH onlara 0.97 ve 0.45 değerlerini verir. OKLCH, Björn Ottosson'un OKLab uzayının kutupsal biçimidir ve sayılarındaki eşit değişimler eşit görünsün diye tasarlanmıştır. İki yolla da karıştırılmış iki renk:

Açıklık, kroma ve ton birbirinden ayrı olduğu için bir anahtar karenin tonunu değiştirmek açıklığını korur.

5 · 360°'yi aşan ton

İki ton arasında bir gradyan, renk çemberinde iki yönden birini izleyebilir ve çoğu araç kısa yolu seçer. Grabient, tonun 360°'yi aşmasına izin verir: 690°, bir tur fazlasıyla 330° ile aynı renktir. Gradyan yolun tamamını kat eder:

Bir paletin ton mesafesi, turlar dâhil, son tonu eksi ilk tonudur; bu yüzden tam bir gökkuşağının mesafesi 360°'dir. Komşu anahtar kareler arasındaki fark 540°'ye kadar çıkabilir.

6 · Ekranın gösteremediği renkler

OKLCH, bir ekranın gösterebileceğinden daha canlı renkleri tanımlayabilir. Grabient bu renklerde açıklığı ve tonu korur, kromayı ise renk sığana kadar düşürür: standart bir ekranda sRGB'ye, geniş gamlı bir ekranda Display P3'e. CSS Color 4 de oklch() renkleri için aynısını yapar:

7 · Tarifler

Birkaç palet ve onları oluşturan eğriler:

"Sırayı çevir", anahtar kareleri ters sıraya dizer. "Ters çevir" ise bir negatif oluşturur: her L açıklığı 1 − L olur ve her ton 180° döner.

8 · Tohum

Her paletin adresi, anahtar kareleri için kısa bir kod olan tohumunu taşır. İlk şeklin tohumu: kW6iw33i87sY6O2wq7rmZ07I.

Tohum, k harfi ve onu izleyen, bitlere paketlenmiş anahtar karelerden oluşur: açıklık için 8, kroma için 8, ilk ton için 9, ardından bir öncekinden farkı olarak saklanan sonraki her ton için 10:

İki anahtar kare 11 karakterlik, sekiz anahtar kare ise 37 karakterlik bir tohum oluşturur. Her paletin tam olarak bir tohumu vardır.

Hex renkle belirlenen bir anahtar kare, tam o rengi 24 bit olarak korur. Böyle bir tohum 9 ile 50 karakter arasındadır.