وظيفة oklch() في 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

مطلوب. يعبر عن لمعان اللون (أيضًا يمكن أن يكون رقمًا أو porcentagem).

0 (أو 0%) يعبر عن اللون الأسود، 1 (أو 100%) يعبر عن اللون الأبيض.

يمكن أيضًا استخدام none (ما يعادل 0%).
C

مطلوب. يعبر عن درجة اللون (كمية اللون)، يمكن أن يكون رقمًا أو porcentagem.

يجب أن يكون رقمًا بين -0.4 و0.4 أو porcentagem بين -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

مطلوب. يعبر عن لمعان اللون (أيضًا يمكن أن يكون رقمًا أو porcentagem).

0 (أو 0%) يعبر عن اللون الأسود، 1 (أو 100%) يعبر عن اللون الأبيض.

يمكن أيضًا استخدام none (ما يعادل 0%).
C

مطلوب. يعبر عن درجة اللون (كمية اللون)، يمكن أن يكون رقمًا أو porcentagem.

يجب أن يكون رقمًا بين -0.4 و0.4 أو porcentagem بين -100% و100%.

أقل قيمة (0% أو -0.4) تجعل اللون أقرب إلى اللون الرمادي.

يمكن أيضًا استخدام none (ما يعادل 0%).
H

مطلوب. يعبر عن اللون نفسه، يمكن أن يكون رقمًا أو زاوية (من 0 إلى 360).

يمكن أيضًا استخدام none (ما يعادل 0درجة).
/ A

اختياري. يعبر عن قيمة قناة الشفافية لللون (0% أو 0 يعبر عن شفافية كاملة، 100% أو 100 يعبر عن عدم شفافية).

يمكن أيضًا استخدام none (يعبر عن قناة الشفافية بدون شفافية). القيمة الافتراضية هي 100%.

تفاصيل تقنية

الإصدار: CSS Color Module Level 4

دعم المتصفح

الرقم في الجدول يعبر عن إصدار المتصفح الذي يدعم هذه الفنكشن بشكل كامل.

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 97
استخدام أرقام وporcentagens في المعايير
116 116 113 16.2 102

صفحات مرتبطة

Hausa Reference:Kwarin Colors CSS

Hausa Reference:فنكشن CSS hsl()

Hausa Reference:Hausa CSS hwb() function

Hausa Reference:Hausa CSS lab() function

Hausa Reference:Hausa CSS lch() function

Hausa Reference:Hausa CSS oklab() function