إطلاق العنان للألوان الزاهية مع OKLCH

مقدمة

تطور تصميم الويب بشكل كبير على مر السنين، وكذلك الطريقة التي نتعامل بها مع الألوان. بينما كانت رموز RGB و Hex هي المعيار لعقود، ظهر منافس جديد لمعالجة قيودها: نموذج ألوان OKLCH.

ما هو OKLCH؟

OKLCH هو مساحة ألوان تعتمد على نموذج ألوان Oklab، مصممة لتكون موحدة إدراكياً. يحل العديد من المشكلات الموجودة في النماذج القديمة مثل HSL و RGB، لا سيما فيما يتعلق بكيفية إدراك أعيننا للسطوع والتشبع.

اسم OKLCH يرمز إلى:

• L - السطوع (Lightness)
• C - الصفاء (Chroma)
• H - تدرج اللون (Hue)

مكونات OKLCH

السطوع (L)

يتحكم السطوع في مدى سطوع أو قتامة اللون.

• 0% هو الأسود المطلق.
• 100% هو الأبيض المطلق.

على عكس HSL، حيث يمكن أن يبدو سطوع 50% مختلفاً جداً اعتماداً على تدرج اللون (على سبيل المثال، الأصفر مقابل الأزرق)، فإن سطوع OKLCH متسق. ستبدو قيمة 60% سطوع ساطعة بنفس القدر عبر جميع التدرجات اللونية.

الصفاء (C)

يمثل الصفاء كثافة أو نقاء اللون (مشابه للتشبع).

• 0 هو رمادي تماماً.
• 0.4 (تقريباً) هو الحد الأقصى لمعظم ألوان sRGB.
• يمكن أن تصل القيم إلى أعلى (على سبيل المثال، 0.5 أو أكثر) للشاشات ذات النطاق اللوني الواسع (P3, Rec.2020).

تدرج اللون (H)

تدرج اللون هو الزاوية على عجلة الألوان، مشابه لـ HSL.

• 0 - 360 درجة.
• 0 هو أحمر تقريباً، 120 أخضر، 240 أزرق.

لماذا تستخدم OKLCH؟

1. التوحيد الإدراكي

في HSL، يمكن أن يؤدي تغيير تدرج اللون مع الحفاظ على السطوع ثابتاً إلى جعل اللون يبدو أفتح أو أغمق بصرياً. في OKLCH، يظل السطوع المدرك ثابتاً، مما يجعل إنشاء لوحات ألوان يمكن الوصول إليها أسهل بكثير.

2. الوصول إلى ألوان النطاق الواسع

لا يمكن لـ sRGB (المستخدم بواسطة Hex و RGB) عرض سوى نطاق محدود من الألوان. تدعم الشاشات الحديثة P3 و Rec.2020، والتي يمكنها عرض درجات الأخضر والأزرق السماوي الأكثر حيوية. يتيح لك OKLCH الوصول إلى هذه الألوان "فائقة التشبع" التي كان من المستحيل تحديدها سابقاً في CSS.

3. مزج ألوان يمكن التنبؤ به

بسبب توحيده الإدراكي، فإن إنشاء تدرجات ومزج الألوان في OKLCH ينتج انتقالات سلسة وطبيعية دون "المناطق الميتة الرمادية" التي غالباً ما تظهر في تدرجات RGB.

استخدام OKLCH في CSS

دعم OKLCH متاح الآن في جميع المتصفحات الحديثة الرئيسية.

.my-element {
  /* وردي حيوي */
  background-color: oklch(60% 0.25 330);
}

.semi-transparent {
  /* مع شفافية ألفا */
  color: oklch(80% 0.1 120 / 0.5);
}

خاتمة

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