وظيفة lab() في CSS

استخدام CSS

تعريف lab() الوظيفة في مساحة الألوان CIE Lab تحدد الألوان. هذه المساحة تمثل جميع الألوان المرئية للعين البشرية.

مثال

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

#p1 {background-color:lab(0 40% 20% / 0.5);}
#p2 {background-color:lab(30 -40% -20%);}
#p3 {background-color:lab(40 30% -20% / 20%);}
#p4 {background-color:lab(50 60% 20%);}
#p5 {background-color:lab(60 50% -10%);}
#p6 {background-color:lab(70 70% -80% / 0.3);}
#p7 {background-color:lab(80 70% 20% / 0.5);}
#p8 {background-color:lab(90 80% -20%);}
#p9 {background-color:lab(100 90% -100%);}

جرب بنفسك

جملة CSS

جملة القيمة النسبية

lab(L a b / A)
القيمة الوصف
L

مطلوب. تعريف لمعان اللون، يمكن أن يكون رقمًا بين 0 و 100 أو نسبة.

0 (أو 0%) يمثل الأسود، 100 (أو 100%) يمثل الأبيض.

يمكن أيضًا استخدام none (ممثل لـ 0%).
a

مطلوب. تعريف رقم بين -125 و 125 أو نسبة بين -100% و 100%.

تعريف المسافة على محور a للون، يمثل درجة لون الأحمر والأخضر.-125 يمثل الأخضر، 125 يمثل الأحمر.

يمكن أيضًا استخدام none (ممثل لـ 0%).
b

مطلوب. تعريف رقم بين -125 و 125 أو نسبة بين -100% و 100%.

تعريف المسافة على محور b للون، يمثل درجة لون الأصفر والأزرق.

-125 يمثل الأزرق، 125 يمثل الأصفر.

يمكن أيضًا استخدام none (ممثل لـ 0%).
/ A

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

يمكن أيضًا استخدام none (ممثل لشفافية القناة)

القيمة الافتراضية هي 100%.

جملة القيمة النسبية

lab(from color L a b / A)
القيمة الوصف
from color

يبدأ بكلمة from، يتبعها قيمة اللون التي تمثل اللون الأصلي.

هذا هو اللون الأصلي الذي يُستند إليه اللون النسبي.
L

مطلوب. تعريف لمعان اللون، يمكن أن يكون رقمًا بين 0 و 100 أو نسبة.

0 (أو 0%) يمثل الأسود، 100 (أو 100%) يمثل الأبيض.

يمكن أيضًا استخدام none (ممثل لـ 0%).
a

مطلوب. تعريف رقم بين -125 و 125 أو نسبة بين -100% و 100%.

تعريف المسافة على محور a للون، يمثل درجة لون الأحمر والأخضر.

-125 يمثل الأخضر، 125 يمثل الأحمر.

يمكن أيضًا استخدام none (ممثل لـ 0%).
b

مطلوب. تعريف رقم بين -125 و 125 أو نسبة بين -100% و 100%.

تعريف المسافة على محور b للون، يمثل درجة لون الأصفر والأزرق.

-125 يمثل الأزرق، 125 يمثل الأصفر.

يمكن أيضًا استخدام none (ممثل لـ 0%).
/ A

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

يمكن أيضًا استخدام none (ممثل لشفافية القناة)

القيمة الافتراضية هي 100%.

تفاصيل تقنية

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

دعم المتصفح

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

Chrome Edge Firefox Safari Opera
lab()
111 111 113 15 97
مزج الأرقام والنسب المئوية في المعلمات
116 116 113 16.2 102

الصفحات ذات الصلة

المرجع:الألوان CSS

المرجع:وظيفة hsl() في CSS

المرجع:دالة hwb() CSS

المرجع:دالة lch() CSS

المرجع:دالة oklab() CSS

المرجع:دالة oklch() CSS