ألوان CSS HSL
HSL تعني تدرج اللون والتشبع والخفة.
قيمة HSL
في CSS ، يمكن تحديد اللون باستخدام تدرج الألوان والتشبع والإضاءة (HSL) بالشكل:
hsl ( تدرج اللون ، التشبع ، الخفة )
Hue هي درجة على عجلة الألوان من 0 إلى 360. 0 أحمر ، و 120 أخضر ، و 240 أزرق.
التشبع هو قيمة النسبة المئوية ، 0٪ يعني ظل من الرمادي ، و 100٪ هو اللون الكامل.
الخفة هي أيضًا نسبة مئوية ، 0٪ أسود ، 50٪ ليس فاتحًا أو غامقًا ، 100٪ أبيض
جرب عن طريق خلط قيم HSL أدناه:
hsl (0، 100٪، 50٪)
مسحة
التشبع
خفة
مثال
التشبع
يمكن وصف التشبع بأنه شدة اللون.
100٪ لون نقي ، لا ظلال رمادية
50٪ هو 50٪ رمادي ، لكن لا يزال بإمكانك رؤية اللون.
0٪ رمادي بالكامل ، لم يعد بإمكانك رؤية اللون.
مثال
خفة
يمكن وصف إضاءة اللون على أنها مقدار الضوء الذي تريد إعطاءه للون ، حيث يعني 0٪ عدم وجود ضوء (أسود) ، و 50٪ يعني 50٪ ضوء (لا داكن ولا فاتح) 100٪ يعني إضاءة كاملة (أبيض).
مثال
ظلال رمادية
غالبًا ما يتم تحديد ظلال الرمادي عن طريق ضبط تدرج اللون والتشبع على 0 ، وضبط الإضاءة من 0٪ إلى 100٪ للحصول على ظلال أغمق / أفتح:
مثال
قيمة HSLA
قيم ألوان HSLA هي امتداد لقيم ألوان HSL مع قناة ألفا - والتي تحدد عتامة اللون.
يتم تحديد قيمة لون HSLA بـ:
هسلا ( هوى ، تشبع ، خفة ، ألفا )
المعلمة alpha عبارة عن رقم يتراوح بين 0.0 (شفاف تمامًا) و 1.0 (غير شفاف على الإطلاق):
جرب عن طريق خلط قيم HSLA أدناه:
هسلا (0، 100٪، 50٪، 0.5)
مسحة
التشبع
خفة
ألفا