التدرّج فكرة رياضية متّصلة تُرسم على جهاز بعدد محدود من الألوان. في مكان ما بينهما، لا بدّ من تقريب المتّصل — وحين يكون التقريب خشنًا قياسًا إلى المسافة، ترى أين حدث.
من أين تأتي الدرجات
الشاشة العادية تعطي كل قناة 256 قيمة. فالتدرّج من رمادي داكن إلى آخر يختلف عنه اختلافًا طفيفًا قد يكون متاحًا له عشرون قيمة متمايزة، وإن انتشر عبر ألف بكسل، شغلت كل واحدة من العشرين خطًّا بعرض خمسين بكسلًا.
عينك بارعة جدًّا في إيجاد الحوافّ، وشريط بعرض خمسين بكسلًا من لون مسطّح مقابل آخر حافّة. هذه خطوط ماخ — يبالغ الجهاز البصري في الحدّ، ولهذا تبدو الخطوط أحدّ ممّا توحي الأرقام.
فتزداد الخطوط سوءًا مع تدرّج أطول، وفرق لوني أصغر، وألوان أدكن — حيث تتباعد القيم المتاحة إدراكيًّا أكثر.
لماذا يبدو سليمًا في أداة التصميم
أدوات التصميم تشتغل داخليًّا بدقّة أعلى وكثيرًا ما تبعثر معاينتها. أما المتصفّح فيرسم ما يقوله CSS بأي دقّة يستعملها المركّب، بلا بعثرة.
لهذا يُكتشف هذا بعد التسليم، ولهذا لا يراه المصمّم فعلًا.
الوسط الرمادي علّة أخرى
يستحق الفصل، لأن الإصلاح لا صلة له.
التدرّج من الأزرق إلى الأصفر في sRGB يمزج القنوات الحمراء والخضراء والزرقاء كلًّا على حدة. في منتصف الطريق بينهما تجلس كل قناة عند قيمة وسطى، والقيمة الوسطى في الثلاث جميعًا رمادي. فيمرّ التدرّج بوسط مسلوب الإشباع لم يوحِ به أيٌّ من لونَي الطرفين.
الإصلاح أن تستوفي في مكان آخر. يقبل CSS فضاء استيفاء — وطلب OKLCH يأخذ المسار الذي تتوقّعه عينك، ويُبقي الكروما مرتفعة والصبغة تدور. هو السبب نفسه الذي يجعل OKLCH ينتج لوحات متساوية حيث لا يفعل HSL.
transparent ليست ما تظنّ
transparent في CSS تعني أسود شفّافًا.
فالتلاشي من الأبيض إلى transparent يعبر أسود نصف شفّاف ويلتقط مسحة رمادية في الوسط. هذه من أشيع أسباب الطبقة العلوية المتّسخة المظهر، وهي تبدو تمامًا كمشكلة خطوط.
تلاشَ إلى اللون نفسه بشفافية صفر بدلًا من ذلك — rgb(255 255 255 / 0) — فيختفي الوحل.
أربعة إصلاحات، مرتَّبة بالجهد
أضف محطّات ألوان. محطّتان أو ثلاث في الوسط تقصّر كل مسافة وتعطي المتصفّح مراسي أكثر. يكفي هذا وحده كثيرًا، وهو مجّاني.
قصّر التدرّج أو زد الفرق بين طرفيه. المشكلة دالّة في الاثنين، فأيّهما ينفع.
أضف ضجيجًا. الجواب المعياري، مستعارًا من الطباعة والسينما. نسيج عشوائي خافت فوق التدرّج يفتّت الأشرطة المسطّحة فلا تبقى حافّة نظيفة. عتامة نقطتين أو ثلاث في المئة غير مرئية نسيجًا وتزيل الخطوط كليًّا. مرشّح اضطراب SVG مضمَّن أو ملف PNG صغير مبلَّط كلاهما يعمل ويكلّف لا شيء تقريبًا.
غيّر فضاء الاستيفاء، وهو يصلح الوسط الرمادي لا الخطوط — لكن التدرّج الذي يحفظ كرومته خطواته بين القيم المتجاورة أكبر، وهو ما يجعل الخطوط أقلّ ظهورًا عرَضًا.
فحصه كما ينبغي
انظر على جهاز حقيقي لا على شاشة جيّدة، في غرفة مظلمة. فالخطوط تختبئ في الضوء المحيط وتظهر لحظة يستعمل أحدهم الموقع في سريره، وذلك نصيب كبير من الوقت.
ابنِ التدرّج بالمقاس الذي سيكون عليه فعلًا. العيّنة الصغيرة لا تُخطَّط أبدًا؛ والقسم الرئيسي يُخطَّط، وهما اللونان نفسهما.
مولّد يعرض النتيجة بالعرض الكامل، ومحطّاته قابلة للضبط، أسرع طريق لإيجاد عدد المحطّات الذي يصلحها.
الخلاصة
الخطوط تقريبٌ صار مرئيًّا، وتزداد سوءًا مع الطول والتشابه والعتمة. أضف محطّات، ثم أضف ضجيجًا. فإن كان الوسط رماديًّا لا مخطَّطًا، فذلك فضاء الاستيفاء أو كلمة transparent — ولا واحد منهما تصلحه محطّات أكثر.