محوّل من الست عشري إلى OKLCH

ما هي oklch()؟

‏oklch() هي طريقة CSS Color 4 في كتابة اللون، وتسمّيه بثلاثة أعداد يستطيع الإنسان أن يفكر بها: الإضاءة بالنسبة المئوية، والإشباع أي مقدار ما فيه من لون، والدرجة اللونية بوصفها زاوية بالدرجات. فـoklch(62.8% 0.258 29.2) هو الأحمر الذي تعرفه باسم ‎#ff0000.

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

والعقبة أن القيمة الست عشرية ثلاثة أعداد صحيحة، وقيمة oklch() ثلاثة أعداد عشرية؛ فكتابتها تعني أن تقرر كم رقمًا تُبقي. وهذا القرار خفيّ، لا يسمّيه أي محوّل وقعنا عليه، وهو بالضبط موضع تغيّر اللون في صمت.

كيف تستعمله

1. اكتب أو الصق في أي من الحقلين. الست عشري في جهة وoklch() في الأخرى، وكلٌّ منهما يحرّك الآخر. وحقل oklch() يقبل ما يقبله CSS، ومن ذلك إشباعٌ بالنسبة المئوية والكلمة المفتاحية none.
2. اختر كم رقمًا تريد. ثلاثة إعدادات: ما يكتبه الناس بأيديهم، ورقم إضافي في كل مكوّن، والأرقام المستديرة التي تبدو أنيقة. فتتحدث القيمة وتتحدث معها الأرقام تحتها.
3. واقرأ سطر الذهاب والإياب قبل النسخ. فهو يقول هل يعود هذا النص بعينه إلى الست عشري الذي بدأت منه، وبكم وحدة من 255 يخطئ إن لم يعد.

كم رقمًا يلزم

هذا هو القياس الذي بُنيت عليه الصفحة. بأخذ 1,893,376 لونًا من sRGB — كل الأحمر، وواحدًا من كل ثلاثة في الأخضر والأزرق — وتحويل كلٍّ منها إلى oklch()، وتقريبه كما سيُكتب، ثم العودة:

بالدقة التي تُكتب بها باليد — إضاءة برقم عشري واحد من النسبة، وإشباع بثلاثة، ودرجة بواحد — يعود 77.91 بالمئة على حاله بالضبط، وأسوأ الحالات ينحرف 8 في قناة. ورقم إضافي واحد في كل مكوّن يرفع ذلك إلى 99.92 بالمئة، وأسوأ حالة 1. أما الصيغة الأنيقة، بنسبة ودرجة صحيحتين وإشباع برقمين عشريين، فينجو منها 1.66 بالمئة وقد تنحرف 43 في قناة، أي لونًا مختلفًا بوضوح.

وللمقارنة، فإن الرحلة نفسها عبر HSL الذي تطبعه كل أداة ألوان ينجو منها 10.58 بالمئة، وهو الرقم الذي تنشره صفحتنا من الست عشري إلى HSL. أي إن oklch() بالدقة المعتادة أوفى نحو سبع مرات من الصيغة التي تحل محلها، لا أقل؛ ومعرفة ذلك مفيدة، لأن الأرقام العشرية تجعلها تبدو أكثر تدقيقًا مما هي.

والقاعدة العملية التي تخرج من ذلك: رقمان عشريان في النسبة، وأربعة في الإشباع، واثنان في الدرجة — وهذا بلا خسارة عمليًا، وثمنه ثلاثة محارف.

حدود معلنة

تستطيع oklch() أن تسمّي ألوانًا لا تعرضها شاشتك، وهذا ما لا يستطيعه الست عشري. فالإشباع بلا سقف ثابت في الصياغة، وأكثر القيم التي يمكنك كتابتها تقع خارج sRGB. وحين يحدث ذلك يخفّض CSS الإشباع حتى يتسع اللون، محافظًا على الإضاءة والدرجة؛ ولا يقصّ القنوات الحمراء والخضراء والزرقاء كلًّا على حدة، لأن القص يُدير الدرجة إدارةً مرئية. وهذه الصفحة تفعل الشيء نفسه وتخبرك متى اضطرت إليه، وكم من الإشباع ذهب.

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

والتحويل يستعمل مصفوفات Oklab المعيارية، وليس حسابًا مضبوطًا: بل فاصلة عائمة تمر بجذر تكعيبي وتعود. وتبقى الأخطاء دون وحدة واحدة من 255 بكثير، ولهذا تسيطر على الأرقام أعلاه دقةُ التقريب التي تختارها لا التحويل.

وأخيرًا، دعم oklch() في المتصفحات واسع لا شامل، والنمط المعقول أن تكتب الست عشري ثم oklch() بعده، فيأخذ القديم الأول والحديث الثاني. والست عشري الذي تعطيك إياه هذه الصفحة هو هذا البديل بعينه.

لماذا هي مجانية؟

التحويل يجري في متصفحك، في أسطر قليلة من الحساب. ولا خادم في الأمر، فلا شيء يُحاسَب عليه ولا حساب يُنشأ.

ولا يُرفع شيء ولا يُحفظ شيء. أعد تحميل الصفحة تجدها قد نسيت لونك.