مولّد التدرّجات اللونية في CSS

ما مولّد التدرّجات في CSS؟

مولّد التدرّجات في CSS يحوّل لونين إلى تصريح ‎background-image‎ تلصقه في ملف الأنماط. فتختار اللونين والشكل، خطيًا أو شعاعيًا أو مخروطيًا، والاتجاه، ثم يكتب هو القاعدة. ولا تُصدَّر أي صورة: فالتدرّج في CSS يرسمه المتصفح بالحجم الذي يكون عليه العنصر، فيبقى حادًا ولا يكلّف شيئًا من عرض النطاق.

والذي تغفله أكثر المولّدات هو فضاء التدرّج. فمواصفة CSS Color 4 تتيح للتدرّج أن يحدد في أي فضاء لوني يسير المتصفح، هكذا ‎linear-gradient(90deg in oklch, ...)‎، وهذا الاختيار يغيّر وسط التدرّج أكثر بكثير مما ستغيّره الزاوية يومًا. وهو متاح في كل المتصفحات الرئيسة منذ أيار/مايو 2023.

ويجعل هذا المولّد ذلك القرار ظاهرًا بدل أن يتخذه عنك: فلوناك يظهران في الفضاءات الثلاثة معًا، ومع كل واحد قياسٌ لما يكلّفه.

طريقة الاستعمال

1. اختر اللونين. استعمل المُنتقي لاختيارهما، أو اكتب قيمة ست عشرية مباشرة. وتتحدث المعاينة ويتحدث CSS أثناء عملك، دون أي زر تضغطه.
2. اختر الشكل وفضاء التدرّج. خطي أو شعاعي أو مخروطي، مع مقبض للزاوية في الأولين. ثم sRGB أو Oklab أو Oklch، ولوحة المقارنة أدناه تعرض الثلاثة للونيك على كل حال، فترى بين ماذا تختار.
3. انسخ التصريح. تحصل على قاعدة ‎background-image:‎ كاملة، مع كتابة فضاء التدرّج صراحةً حتى في sRGB حيث هو الافتراضي، لأن قاعدة ستُلصق ثم تُقرأ لاحقًا ينبغي أن تقول ما تفعل.

«استعمل oklab للتدرّجات» نصف صحيح

تقول النصيحة الشائعة إن تدرّجات sRGB تتعكّر في وسطها وإن Oklab يصلح ذلك. النصف الأول صحيح، والنصف الثاني مقلوب، وقياسه يسير.

خذ الأزرق والأصفر. فإن أُدرِجا في sRGB كان المنتصف ‎#7F7F7F‎، لا متعكّرًا بل رماديًا حرفيًا، بإشباع مقيس يساوي صفرًا. وعلى 15,000 زوج عشوائي مشبع متقابل الصبغة تقريبًا، يفقد sRGB وسيطًا 75.8% من لون الطرفين عند المنتصف، ويخرج 13.73% من تلك المنتصفات رماديًا في الواقع. ولا يصلح Oklab هذا، بل يزيده سوءًا: فقدٌ وسيطه 83.3%، ورمادية في 22.99% من المنتصفات، أي قرابة الضعف.

والسبب بنيوي لا شاذ. فـsRGB وOklab كلاهما فضاء مستطيل، فالتدريج فيهما رسمُ خط مستقيم بين نقطتين، والخط المستقيم بين صبغتين متقابلتين يمر بالمحور المحايد في منتصف الطريق. أما Oklch فقطبي: يدرّج زاوية الصبغة، فلا يضطر إلى عبور الوسط أصلًا. وقياسًا على الأزواج الـ15,000 نفسها يفقد 14.6%، وتقع المنتصفات الرمادية في 0.00% من الحالات.

فلأي شيء يصلح Oklab إذن؟ لسلّم متساوٍ من الإضاءة المدرَكة، وفيه يفوز فوزًا بيّنًا. فعلى 15,000 زوج عشوائي، يبلغ أسوأ انحراف عن سلّم إضاءة مستقيم وسيطًا 8.60% في sRGB مقابل 0.70% في Oklab، أي أفضل بأكثر من عشرة أضعاف، وعند المئين التسعين 44.68% مقابل 2.53%. وذلك هو التحزّم الذي تراه في تدرّج طويل بـsRGB، وOklab هو الجواب الصحيح لتلك المشكلة.

شكويان وعلاجان مختلفان، والنصيحة التي تحل إحداهما تزيد الأخرى سوءًا. ويقع Oklch بينهما في الإضاءة، بوسيط 1.25%، مع حفظه اللون، ولذلك تعتمده هذه الصفحة افتراضيًا؛ لكن اللوحة تعرض الثلاثة، لأن الجواب الصحيح يتوقف على لونيك أنت لا على قاعدة عامة.

حدود معلنة بصراحة

المعاينة CSS حقيقي. فالمتصفح هو الذي يدرّج، فما تراه هو ما سيراه زوّارك، ولا تحتاج هذه الصفحة قط إلى ادّعاء أن رسمها هي يطابق رسم المتصفح. وشريط المقارنة هو الاستثناء: فتلك الأشرطة الثلاثة مرسومة من 21 محطة محسوبة، حتى تبقى الفضاءات قابلة للمقارنة على متصفح أقدم من هذه الصيغة، فهي تقريب أمين للنسخة الناعمة لا النسخة الناعمة نفسها.

ويعمل هذا المولّد بمحطتي لون لا بقائمة مفتوحة. وهذا مقصود: فمسألة التدريج إنما هي عمّا يقع بين زوج، والقياسات أعلاه ليست معرّفة إلا لزوج. وإن احتجت تدرّجًا بعدة محطات فصيغة CSS تقبل محطات أكثر بالشكل نفسه تمامًا، وكلمة الفضاء تعمل كما هي.

وأرقام هذه الصفحة مأخوذة من أزواج ألوان عشوائية، وهي الطريقة المنصفة لمقارنة ثلاثة فضاءات، لكنها ليست الطريقة التي يختار بها أحد ألوانه. وقد يسلك زوجك أنت سلوكًا مختلفًا تمامًا، ولهذا بالذات تقيس اللوحة زوجك بدل أن تتلو عليك متوسطًا. فالصبغتان المتقاربتان لا تكاد تختلفان بين الفضاءات، والمتقابلتان تختلفان اختلافًا هائلًا.

ويُقاس الإشباع والإضاءة هنا في Oklab، وهو اختيار يحابي نتيجة الإضاءة لـOklab بحكم البناء، إذ يُقيَّم على مقياسه هو. وهو كذلك المقياس الذي يستعمله CSS نفسه اليوم، ونتيجة الإشباع تجري ضد Oklab لا لصالحه، فلا يفسّر هذا التحيزُ النتيجةَ.

وتُختبر تحويلات الألوان في مقابل تنفيذ مستقل للمواصفة نفسها على 20,000 لون، فتتفق بأدق من جزء من المليون، إلى جانب 26 تحققًا تغطي رحلات الذهاب والإياب، وقاعدة أقصر قوس صبغة، والأرقام المنشورة أعلاه.

لماذا هذه الأداة مجانية؟

كل ما هنا حساب وسمة ‎style‎، تجري داخل متصفحك أثناء الكتابة. لا يُرفع أي لون، ولا حساب يُنشأ، ولا حدّ للتصدير: فالناتج ثلاثة أسطر من CSS كنت تستطيع كتابتها بنفسك.

ولا علامة مائية كذلك، وهو وعد متواضع في تدرّج لوني، ولا نسخة مدفوعة تحتجز لوحة المقارنة، فتلك اللوحة هي علة وجود الصفحة.