خذ لونين يؤكد لك HSL أنهما متساويان في السطوع: hsl(60 100% 50%) وhsl(240 100% 50%). كلاهما بسطوع 50%. ومع ذلك الأول أصفر يخطف البصر، والثاني أزرق داكن ثقيل. لقد كذب HSL. هذه الفجوة بالضبط هي المشكلة التي بُني OKLCH لحلّها.

OKLCH طريقة أحدث لكتابة الألوان في CSS — oklch(L C H) — وهو الآن مدعوم في كل متصفح رئيسي. يشرح هذا الدليل معنى أرقامه الثلاثة، ولماذا يتفوق على HSL وHEX عند بناء لوحات ألوان حقيقية، وكيف تبدأ باستخدامه دون أن تكسر المتصفحات القديمة.

الأرقام الثلاثة: L و C و H

يبدو لون OKLCH هكذا: oklch(70% 0.15 250).

  • L — Lightness (من 0% إلى 100%). مدى فتحة اللون كما تراه العين البشرية. 0% أسود و100% أبيض.
  • C — Chroma (من 0 إلى نحو 0.37). مدى حيوية اللون أو تشبّعه. 0 رمادي، وكلما زاد صار أكثر لونية.
  • H — Hue (من 0 إلى 360). الزاوية على عجلة الألوان — تقريبًا 30 أحمر، و140 أخضر، و250 أزرق.

يمكنك إضافة الشفافية بالطريقة نفسها المتبعة في ألوان CSS الأخرى: oklch(70% 0.15 250 / 0.5) للحصول على شفافية 50%.

لماذا يتفوق OKLCH على HSL

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

يظهر المردود العملي لهذا فور أن تبني لوحة ألوان:

  • سطوع متسق عبر مختلف الصبغات. في OKLCH يبدو كل لون عند L 70% متساويًا في الفتحة، سواء كان أصفر أو أزرق أو ورديًا. أما في HSL فالأصفر عند 50% يتوهّج بينما الأزرق عند 50% يغرق. لهذا تحتاج لوحات HSL دائمًا إلى تعديل يدوي.
  • درجات متوقعة. أتريد أن يختلف زر عن حالة التمرير فوقه بمقدار ثابت ومتساوٍ؟ اخفض السطوع بالقدر نفسه في OKLCH فيبدو التغيير منتظمًا. جرّب هذا في HSL، فتجد بعض الألوان بالكاد تتحرك بينما تقفز أخرى.
  • تدوير الصبغة يحافظ على الإحساس نفسه. غيّر الصبغة فقط في OKLCH فتحصل على لون شقيق بنفس السطوع والحيوية — مثالي للألوان المميّزة في السمات.

لأي شخص يولّد سُلّم ألوان لنظام تصميم، هذا الاتساق هو كل شيء.

يمكنه عرض ألوان يعجز عنها HEX

HEX وRGB محبوسان في نطاق sRGB — المجموعة المحدودة من الألوان التي كانت الشاشات القديمة تعرضها. أما شاشات الهواتف واللابتوبات الحديثة فتعرض مدى أوسع (يُسمى P3)، بأخضر وأحمر وسماوي أغنى بوضوح.

يستطيع OKLCH التعامل مع تلك الألوان الأوسع مباشرة؛ بينما لا يقدر #rrggbb ببساطة على وصفها. فـ OKLCH ليس أكثر منطقية فحسب — بل يصل إلى قدر أكبر مما تستطيع شاشتك عرضه فعلًا.

هل استخدامه آمن الآن؟

نعم. تعمل oklch() في الإصدارات الحالية من Chrome وEdge وSafari وFirefox، ومنذ عامين تقريبًا. أما الشريحة الصغيرة من الزوار على المتصفحات القديمة، فامنحهم بديلًا بسيطًا أولًا:

.button {
  background: #3b82f6;                 /* older browsers use this */
  background: oklch(62% 0.19 255);     /* modern browsers use this */
}

يقرأ المتصفح من الأعلى إلى الأسفل ويحتفظ بآخر لون يفهمه. المتصفحات القديمة تتوقف عند HEX، والحديثة تطبّق OKLCH.

كيف تحوّل ألوانك الحالية

لست مضطرًا لحساب أي من هذا يدويًا. ألصق قيمة HEX أو RGB أو HSL في محوّل الألوان المجاني فيعطيك مكافئ OKLCH فورًا — إضافة إلى العكس، فتستطيع الانتقال من قيمة oklch() إلى بديل HEX من أجل حيلة CSS أعلاه. يعمل بالكامل داخل متصفحك، ولا يُرفع أي شيء.

وإذا كنت تحتاج اتجاهًا واحدًا فقط، فهناك أيضًا محوّل HEX إلى OKLCH المخصّص.

خلاصات سريعة

  • OKLCH = oklch(Lightness Chroma Hue) — سطوع تثق به، وحيوية، وزاوية صبغة.
  • يصلح أكبر عيوب HSL: أرقام السطوع المتساوية تبدو متساوية الفتحة فعلًا، فتظل اللوحات متسقة دون عبث يدوي.
  • يصل إلى ألوان أوسع (P3) يعجز HEX وRGB عن وصفها.
  • استخدمه اليوم مع سطر بديل HEX قبل سطر oklch().
  • حوّل أي لون من OKLCH وإليه عبر محوّل ألوان بدل إجراء الحسابات بنفسك.