محوّل 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() · مدقّق التباين وفق WCAG · كل الأدوات المجانية