درباره Grabient
Grabient گرادیان را از کی‌فریم‌ها می‌سازد: 2 تا 8 رنگ که با یک منحنی نرم به هم وصل می‌شوند.
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 کاراکتر است.