جدول الدروس

دليل مرجعي CSS

خصائص CSS

المقررات الاختيارية

وصلة مخصصة:

صندوق CodeW3C.com

وظيفة oklch() في CSS

الصفحة السابقة دالة oklab() CSS
الصفحة التالية دالة opacity() CSS
العودة إلى الطبقة السابقة دليل مرجعي دوال CSS

التعريف والاستخدام

في CSS، oklch() الوظيفة تستخدم لتعريف اللون في مساحة الألوان OKLCH.

oklch() الوظيفة بسيطة جداً: يجب عليك النظر في كمية الإضاءة/اللون (L) المستخدمة، قوة اللون (C) الفاتح، ولونه نفسه (H). بالإضافة إلى ذلك، يمكنك اختيار إضافة قيمة شفافية (A) لتعريف وضوح اللون.

نماذج

تحديد مختلف oklch() اللون:

/* اللون الأخضر المختلف في درجات اللمعان /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ أصفر بألوان مختلفة من الإشراق /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ أحمر بألوان مختلفة من الإشراق */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

تجربة شخصية

نحو لغة CSS

نحو لغة القيمة المطلقة

oklch(L C H / A)

القيمة	الوصف
L	مطلوب. يحدد إشراق اللون (إحساس اللون)، يمكن أن يكون رقمًا بين 0 و1 أو نسبة مئوية بين 0% و100%. 0 (أو 0%) يعني السواد، 1 (أو 100%) يعني البياض. يمكن أيضًا استخدام none (ما يعادل 0%).
C	مطلوب. يحدد درجة اللون (كمية اللون)، يمكن أن يكون رقمًا أو نسبة مئوية. يجب أن يكون رقمًا بين -0.4 و0.4 أو نسبة مئوية بين -100% و100%. عندما يكون القيمة الأدنى (0% أو -0.4)، يكون اللون أقرب إلى اللون الرمادي. يمكن أيضًا استخدام none (ما يعادل 0%).
H	مطلوب. يحدد اللون نفسه، يمكن أن يكون رقمًا أو زاوية (من 0 إلى 360). يمكن أيضًا استخدام none (ما يعادل 0 درجة).
/ A	اختياري. يمثل قيمة قناة الشفافية لللون (0% أو 0 تعني شفافية كاملة، 100% أو 100 تعني غير شفافية). يمكن أيضًا استخدام none (يعني قناة الشفافية غير موجودة). القيمة الافتراضية هي 100%.

نحو لغة القيمة النسبية

oklch(from color L C H / A)

القيمة	الوصف
from color	يبدأ بكلمة from، يتبعها قيمة اللون التي تمثل اللون الأصلي. هذا هو اللون الأصلي الذي يُستند إليه اللون النسبي.
L	مطلوب. يحدد إشراق اللون (إحساس اللون)، يمكن أن يكون رقمًا بين 0 و1 أو نسبة مئوية بين 0% و100%. 0 (أو 0%) يعني السواد، 1 (أو 100%) يعني البياض. يمكن أيضًا استخدام none (ما يعادل 0%).
C	مطلوب. يحدد درجة اللون (كمية اللون)، يمكن أن يكون رقمًا أو نسبة مئوية. يجب أن يكون رقمًا بين -0.4 و0.4 أو نسبة مئوية بين -100% و100%. عندما يكون القيمة الأدنى (0% أو -0.4)، يكون اللون أقرب إلى اللون الرمادي. يمكن أيضًا استخدام none (ما يعادل 0%).
H	مطلوب. يحدد اللون نفسه، يمكن أن يكون رقمًا أو زاوية (من 0 إلى 360). يمكن أيضًا استخدام none (ما يعادل 0 درجة).
/ A	اختياري. يمثل قيمة قناة الشفافية لللون (0% أو 0 تعني شفافية كاملة، 100% أو 100 تعني غير شفافية). يمكن أيضًا استخدام none (يعني قناة الشفافية غير موجودة). القيمة الافتراضية هي 100%.