وظيفة lch() في CSS

الصفحة السابقة دالة lab() CSS
الصفحة التالية دالة light-dark() CSS
العودة إلى الطبقة السابقة كتيب مراجعة ميزة CSS

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

CSS lch() وظيفة في مساحة اللون lch (الإضاءة - اللون - التدرج) تحدد اللون.

نماذج

تعريف lch() لون:

#p1 {background-color:lch(10% 100 130 / 0.5);}
#p2 {background-color:lch(40% 100 130);}
#p3 {background-color:lch(90% 100 130 / 20%);}
#p4 {background-color:lch(10% 160 200);}
#p5 {background-color:lch(40% 160 200);}
#p6 {background-color:lch(90% 160 200 / 0.3);}
#p7 {background-color:lch(10% 130 70 / 0.5);}
#p8 {background-color:lch(40% 130 70);}
#p9 {background-color:lch(90% 130 70);}

تجربة شخصية

نحو CSS

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

lch(L C H / A)

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

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

lch(from color L C H / A)

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