حول 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. وكل منحنى هو منحنى 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. وهو OKLab الذي وضعه Björn Ottosson بصيغته القطبية، وقد بُني بحيث تبدو التغيرات المتساوية في أعداده متساوية. لونان ممزوجان بالطريقتين:

بما أن الإضاءة والكروما والصبغة منفصلة، فإن تغيير صبغة إطار رئيسي يُبقي إضاءته كما هي.

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 حرفًا.