دالة CSS hwb()

الصفحة السابقة دالة hue-rotate() CSS
الصفحة التالية دالة hypot() CSS
العودة إلى الطبقة السابقة دليل مرجعي وظائف CSS

تعريف ووظيفة

CSS hwb() يستخدم الدالة HWB موديل الألوان من اللون-البياض-الأسود لتحديد الألوان. يمكن أيضًا إضافة قناة شفافية اختيارية (تُمثل شفافية الألوان).

مثال

تعريف ألوان مختلفة من HWB(A):

#p1 {background-color:hwb(60 40% 20% / 0.5);}
#p1 {لون الخلفية:hwb(120 40% 20%);}
#p2 {لون الخلفية:hwb(120 40% 20%);}
#p3 {لون الخلفية:hwb(120 40% 20% / 20%);}
#p4 {لون الخلفية:hwb(240 40% 20%);}
#p5 {لون الخلفية:hwb(240 50% 10%);}
#p6 {لون الخلفية:hwb(240 40% 20% / 0.3);}
#p7 {لون الخلفية:hwb(300 40% 20% / 0.5);}
#p8 {لون الخلفية:hwb(360 40% 20%);}

#p9 {لون الخلفية:hwb(360 90% 0%);}

تجربة شخصية

قواعد النص في CSS

قواعد النص المطلقhue whiteness blackness / A)

القيمة	الوصف
hue	مطلوب. يعرف الزاوية على العجلة اللونية (من 0 إلى 360) - 0 (أو 360) هي الأحمر، 120 هي الخضراء، 240 هي الزرقاء. يمكن أيضًا استخدام none (يساوي 0deg).
whiteness	مطلوب. يعرف الدرجات البيضاء في المزج؛ 0% يعني عدم وجود درجة بيضاء، 100% يعني درجة بيضاء كاملة. يمكن أيضًا استخدام none (يساوي 0%).
blackness	مطلوب. يعرف الدرجات السوداء في المزج؛ 0% يعني عدم وجود درجة سوداء، 100% يعني درجة سوداء كاملة. يمكن أيضًا استخدام none (يساوي 0%).
/ A	اختياري. يمثل قيمة شفافية اللون (0% أو 0 يعني شفافية كاملة، 100% أو 100 يعني غير شفاف). يمكن أيضًا استخدام none (يعني شفافية بدون قناة). القيمة الافتراضية هي 100%.

قواعد النص النسبي

hwb(from color whiteness blackness / A)

القيمة	الوصف
from color	يبدأ بكلمة from، تتبعه قيمة اللون التي تمثل اللون الأصلي. هذا هو اللون الأصلي الذي يعتمد عليه اللون النسبي.
hue	مطلوب. يعرف الزاوية على العجلة اللونية (من 0 إلى 360) - 0 (أو 360) هي الأحمر، 120 هي الخضراء، 240 هي الزرقاء. يمكن أيضًا استخدام none (يساوي 0deg).
whiteness	مطلوب. يعرف الدرجات البيضاء في المزج؛ 0% يعني عدم وجود درجة بيضاء، 100% يعني درجة بيضاء كاملة. يمكن أيضًا استخدام none (يساوي 0%).
blackness	مطلوب. يعرف الدرجات السوداء في المزج؛ 0% يعني عدم وجود درجة سوداء، 100% يعني درجة سوداء كاملة. يمكن أيضًا استخدام none (يساوي 0%).
/ A	اختياري. يمثل قيمة شفافية اللون (0% أو 0 يعني شفافية كاملة، 100% أو 100 يعني غير شفاف). يمكن أيضًا استخدام none (يعني شفافية بدون قناة). القيمة الافتراضية هي 100%.