web · 7 دقائق قراءة

HEX وRGB وHSL وOKLCH — كيف يُكتب اللون

أربع طرق لكتابة الألوان نفسها. ثلاث منها تصف ما تفعله الشاشة؛ وواحدة تصف ما تراه أنت، والفرق يظهر لحظة تبني لوحة.

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

HEX وRGB الشيء نفسه

#48750d ثلاثة أزواج من الأرقام الستّ عشرية — أحمر 72، وأخضر 117، وأزرق 13. rgb(72 117 13) هي الأرقام نفسها بالعشري. لا فرق في القدرة؛ فـHEX أقصر وRGB أوضح قراءةً.

كلتاهما تصف العتاد. لا واحدة منهما تخبرك بشيء نافع عن اللون: لا شيء في #48750d يوحي بأنه أخضر زيتوني داكن، وتعديله يعني التخمين في ثلاثة أرقام يتفاعل بعضها مع بعض.

HSL جعلها مقروءة

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

ذلك كان الوعد، وقد نجح نصفه. المشكلة أن HSL يُحسب من RGB بحساب مباشر لا يعرف شيئًا عن الرؤية البشرية.

أين تكذب إضاءة HSL

عينك أشدّ حسّاسية للأخضر منها للأزرق بكثير. فالأصفر الصافي عند hsl(60 100% 50%) والأزرق الصافي عند hsl(240 100% 50%) لهما الإضاءة المعلَنة نفسها، وأحدهما يكاد يكون أبيض والآخر يكاد يكون أسود.

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

ما الذي يصلحه OKLCH

الأفكار الثلاث نفسها — الإضاءة والكروما والصبغة — مبنيّةً على نموذج إدراكي لا على حساب RGB.

L هي الإضاءة المُدرَكة، فلونان عند L نفسها يبدوان متساويي الفتحة فعلًا. C هي الكروما، أي مقدار اللونية، وهي خلافًا للإشباع ليست نسبة مئوية من شيء — لها مقياس مطلق، ومقدار المتاح منها يتوقّف على الإضاءة والصبغة. H هي زاوية الصبغة.

هذا يجعل ما يفعله الناس فعلًا مباشرًا. فاللوحة ذات الخطوات المتساوية متساوية. دوران الصبغة يحفظ سطوعه. يمكن مطابقة لونَي هويّة في الإضاءة بجعل رقم واحد متساويًا.

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

ألوان خارج sRGB

يستطيع OKLCH وصف ألوان لا تستطيع شاشة عادية عرضها، والشاشات الحديثة تعرض أكثر ممّا يغطّيه sRGB.

فقد لا يجد التحويل من OKLCH إلى HEX شيئًا دقيقًا يعيده، فيقصّ إلى أقرب لون داخل المدى. أما التحويل من HEX إلى OKLCH فدقيق دائمًا، لأن HEX لا يستطيع وصف شيء لا يستطيع OKLCH وصفه.

عمليًّا: اكتب بـOKLCH، وعامِل القيمة الستّ عشرية التي يعطيك إياها المحوّل على أنها العرض في sRGB لا اللون نفسه.

أيّها تستعمل

HEX لقيمة تنسخها بين الأدوات. مختصرة، وعامّة، ومقبولة صيغةَ إخراج.

RGB حين تحتاج الشفافية والوضوح معًا، وإن كانت كل صيغة تدعم الشفافية الآن.

HSL إن كان موجودًا في الشفرة أصلًا ويعمل. ليس خاطئًا؛ إنه فقط يضلّلك في الإضاءة.

OKLCH لكل ما تصمّمه لا ما تنقله: اللوحات، وسلالم الألوان، ورموز التصميم، ونسخ الوضع الداكن. دعم المتصفّحات واسع بما يكفي للكتابة به مباشرةً.

الخلاصة

HEX وRGB تصفان العتاد. HSL مقروء لكن إضاءته لا تطابق عينك. أما OKLCH فيطابقها، ولهذا تخرج اللوحات المبنية به متساوية وتحتاج اللوحات المبنية بـHSL تصحيحًا يدويًا.

مهما كان ما تكتب به، افحص النتيجة مقابل اشتراط تباين بدل افتراض أن رقم إضاءة يعني اجتيازه.

أسئلة

ما OKLCH ولماذا أستعمله؟

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

كيف أحوّل OKLCH إلى HEX؟

أي محوّل ألوان يفعلها، والتحويل باتجاه واحد بمعنًى مهمّ: يستطيع OKLCH وصف ألوان خارج مدى sRGB الذي يغطّيه HEX، فتُقصّ تلك إلى أقرب لون يمكن تمثيله. أما من HEX إلى OKLCH فدقيق دائمًا.

ما الفرق بين OKLCH وHSL؟

كلتاهما تعطيك الإضاءة والإشباع والصبغة بصورة مقروءة. يحسبها HSL من RGB بحساب بسيط يتجاهل الرؤية البشرية، فتعامل إضاءته الأصفر والأزرق سواءً وهما ليسا كذلك إطلاقًا. أما OKLCH فمبنيّ على نموذج إدراكي، فتتصرّف أرقامه كما تتوقّع.

لماذا يبدو تفتيح لوني في HSL خاطئًا؟

لأن إضاءة HSL ليست الإضاءة المُدرَكة. فإضافة 10% إلى أصفر وإلى أزرق تنتج قفزتين بصريّتين مختلفتين جدًّا، ولهذا تبدو اللوحات المولَّدة بتحريك إضاءة HSL غير متساوية — تتزاحم الخطوات الفاتحة وتتباعد الداكنة.

هل ما زال استعمال HEX مقبولًا؟

نعم. HEX وRGB وOKLCH كلها تستطيع وصف ألوان sRGB نفسها، وHEX مختصر ومفهوم في كل مكان. لكنه صيغة رديئة للتفكير بها — لا شيء في #48750d يوحي بمقدار فتحته أو إشباعه — فيكتب الناس أكثر فأكثر بـOKLCH ويشحنون ما ينتجه البناء.

أدوات من هذا الدليل

المزيد من أدوات الويب — كلّها تعمل في متصفّحك، ولا واحدة منها ترفع ملفًّا.