محوّل OKLCH وباني لوحات الألوان

حوّل بين OKLCH والست عشري و RGB و HSL، وابنِ تدرّجات تبدو متساوية لأن الإضاءة والكروما تبقيان ثابتتين بينما تدور الصبغة. أما الألوان خارج sRGB فتُعيَّن بخفض الكروما لا بقصّ القنوات — والفرق هو أن يبقى بنفسجيّك بنفسجيًّا.

ست عشري أو rgb() أو hsl() أو oklch(). 

    


    

      
لماذا تعني الإضاءة في OKLCH شيئًا حقيقيًّا

      
في HSL، تغيير الصبغة مع تثبيت الإضاءة يغيّر مقدار سطوع اللون في العين: الأصفر عند 50% يبدو أنصع بكثير من الأزرق عند 50%، ولهذا تبدو تدرّجات HSL غير متساوية مهما دقّقت في تباعدها. أما OKLab فقد عُوير على بيانات إدراكية، فمحور إضاءته يجاري ما تراه العين. ثبّت L و C ودوّر H فيحمل كل مربّع الوزن البصري نفسه — وهذا وحده سبب بناء اللوحات هنا بدل HSL.

      
تعيين النطاق اللوني هو الجزء المهم

      
كثير من قيم OKLCH لا يقابلها شيء في sRGB، والحل الساذج هو حشر كل قناة داخل المدى. وذلك يزيح الصبغة بوضوح: بنفسجيّ زاهٍ يُقصّ قناةً قناةً ينجرف نحو الأزرق. أما خفض الكروما مع تثبيت الإضاءة والصبغة فيُبقي اللون معروفًا على حاله ولا يأخذ سوى التشبّع الذي عجزت الشاشة عن عرضه أصلًا. تستعمل هذه الصفحة خوارزم CSS Color 4 — بحث ثنائي على الكروما، وقبول النتيجة المقصوصة حالما تقع ضمن فرق يكاد لا يُلحَظ عن اللون المخفَّض.

      
مُتحقَّق منه مقابل مرجع

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

      
استخدام المخرجات

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


      
الأسئلة الشائعة

      

        
لماذا سقف الكروما عند 0.4؟
لأن لا شيء في sRGB يقترب منها. أكثر ألوان sRGB تشبّعًا هو الأزرق عند نحو 0.313، والمنزلق يتجاوز ذلك عمدًا لترى ما يقع خارج النطاق وكيف يُعاد تعيينه.

        
ما الفرق الذي يكاد لا يُلحَظ هنا؟
فرق لوني قدره 0.02 في OKLab، وهو الحدّ الذي يعتمده CSS Color 4. تحته لا يُميَّز بين القصّ وخفض الكروما، فيأخذ الخوارزم اللون المقصوص ويحتفظ بالكروما الزائدة.

        
هل يدعم P3 أو Rec2020؟
ليس بعد. كل ما هنا يستهدف sRGB، وهو ما تعنيه تنبيهات النطاق. النطاقات الأوسع تحتاج ألوانها الأساسية ومجموعة مصفوفات ثانية.

        
هل يُرسَل أي من هذا إلى مكان ما؟
لا. تجري التحويلات كلها داخل هذه الصفحة.

      

      
من صنع فريق GO AI. حاسبة CSS clamp() · كل الأدوات المجانية