شرح OKLCH: صيغة الألوان التي تطابق ما تراه عينك أخيرًا

ما هو OKLCH

OKLCH هو الشكل القطبي لفضاء Oklab، وهو فضاء لوني إدراكي نشره Björn Ottosson عام 2020. يتكون من ثلاثة أرقام: L هي الإضاءة كما تدركها العين، من 0 (أسود) إلى 1 أو 100% (أبيض). وC هي الكروما، أي مقدار اللون، من 0 (رمادي) إلى نحو 0.37 لأكثر الألوان حيوية التي تستطيع الشاشات عرضها. وH هي زاوية الصبغة من 0 إلى 360°.

هكذا يبدو اللون نفسه مكتوبًا بصيغ مختلفة. يحسب PickShade كل قيمة أدناه مباشرة، فيمكنك نسخها كما هي.

لماذا OKLCH أفضل من HSL

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

في OKLCH تبدو الألوان التي لها قيمة L نفسها متساوية الإضاءة. يمكنك تثبيت L وC وتدوير H لتحصل على مجموعة صبغات متوازنة، أو تثبيت H وC وتغيير L بخطوات منتظمة لتحصل على سلّم درجات نظيف. لهذا يعرّف Tailwind CSS v4 لوحته الافتراضية كاملة بصيغة OKLCH.

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

الصياغة في CSS

تُكتب الإضاءة نسبة مئوية أو رقمًا من 0 إلى 1. والكروما رقم. والصبغة زاوية مقيسة بالدرجات. وتأتي الشفافية بعد شرطة مائلة.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

دعم المتصفحات

تعمل oklch() في كل المتصفحات الحالية: Safari منذ الإصدار 15.4، وChrome وEdge منذ 111، وFirefox منذ 113. وهذا يغطي أكثر من 90% من المستخدمين بفارق كبير. للمتصفحات القديمة جدًا، ضع قيمة HEX احتياطية في السطر الذي يسبق قيمة OKLCH.

color: #ff5733;
color: oklch(68% 0.21 33.7);

حدود الكروما والنطاق اللوني

يستطيع OKLCH وصف ألوان لا تستطيع أي شاشة عرضها. تعتمد الكروما القصوى على الإضاءة والصبغة: الأصفر الحيوي ممكن فقط قرب الإضاءة العالية، والأزرق الحيوي فقط قرب الإضاءة المنخفضة. وعندما تقع القيمة خارج نطاق sRGB أو Display P3، يعيدها المتصفح إلى داخله، وقد يتغير اللون بذلك.

يضع PickShade علامة على الألوان الواقعة خارج sRGB ويعطيك أقرب لون يقع داخله، بخفض الكروما مع الحفاظ على الإضاءة والصبغة، وهي الطريقة نفسها التي توصي بها CSS Color 4.

كيف تحوّل HEX إلى OKLCH

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

أسئلة وأجوبة