ألوان HTML HSL و HSLA

HSL تعني تدرج اللون والتشبع والخفة.
قيم ألوان HSLA هي امتداد لـ HSL بقناة ألفا (عتامة)(opacity).
قيم ألوان HSL
في HTML ، يمكن تحديد اللون باستخدام تدرج الألوان والتشبع والإضاءة (HSL) في النموذج:
hsl (تدرج ، تشبع ، خفة)
Hue هي درجة على عجلة الألوان من 0 إلى 360. 0 أحمر ، و 120 أخضر ، و 240 أزرق.
التشبع هو قيمة النسبة المئوية ، 0٪ يعني ظل من الرمادي ، و 100٪ هو اللون الكامل.
الخفة هي أيضًا قيمة مئوية ، 0٪ أسود ، و 100٪ أبيض.
جرب عن طريق خلط قيم HSL أدناه:

HUE

0

SATURATION

        100%
      

LIGHTNESS

50%

مثال

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

مثال

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

</body>
</html>

التشبع (Saturation)

يمكن وصف التشبع بأنه شدة اللون.

100٪ لون نقي ، لا ظلال رمادية

50٪ هو 50٪ رمادي ، لكن لا يزال بإمكانك رؤية اللون.

0٪ رمادي بالكامل ، لم يعد بإمكانك رؤية اللون.

مثال

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

<!DOCTYPE html>
<html>
<body>

<h1 style = "background-color: hsl (0، 100٪، 50٪)؛"> hsl (0، 100٪، 50٪) </h1>
<h1 style = "background-color: hsl (0، 80٪، 50٪)؛"> hsl (0، 80٪، 50٪) </h1>
<h1 style = "background-color: hsl (0، 60٪، 50٪)؛"> hsl (0، 60٪، 50٪) </h1>
<h1 style = "background-color: hsl (0، 40٪، 50٪)؛"> hsl (0، 40٪، 50٪) </h1>
<h1 style = "background-color: hsl (0، 20٪، 50٪)؛"> hsl (0، 20٪، 50٪) </h1>
<h1 style = "background-color: hsl (0، 0٪، 50٪)؛"> hsl (0، 0٪، 50٪) </h1>

<p> مع ألوان HSL ، يعني التشبع الأقل لونًا أقل. 0٪ رمادي بالكامل. </ p>

</body>
</html>

خفة (Lightness) يمكن وصف إضاءة اللون على أنها مقدار الضوء الذي تريد أن تمنحه للون ، حيث يعني 0٪ عدم وجود ضوء (أسود) ، و 50٪ يعني 50٪ ضوء (لا داكن ولا فاتح) 100٪ يعني إضاءة كاملة (أبيض).

مثال

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)

          hsl(0, 100%, 90%)
        

          hsl(0, 100%, 100%)
        

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

<p> مع ألوان HSL ، 0٪ إضاءة تعني الأسود ، و 100 إضاءة تعني الأبيض. </ p>

</body>
</html>

ظلال الرمادي

غالبًا ما يتم تحديد ظلال الرمادي عن طريق تعيين تدرج اللون والتشبع على 0 و اضبط الإضاءة من 0٪ إلى 100٪ للحصول على ظلال أغمق / أفتح: </ p>

مثال

hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)

          hsl(0, 0%, 70%)
        

          hsl(0, 0%, 90%)
        

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</h1>
<h1 style="background-color:hsl(0, 0%, 30%);">hsl(0, 0%, 30%)</h1>
<h1 style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</h1>
<h1 style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</h1>
<h1 style="background-color:hsl(0, 0%, 70%);">hsl(0, 0%, 70%)</h1>
<h1 style="background-color:hsl(0, 0%, 90%);">hsl(0, 0%, 90%)</h1>

</body>
</html>

قيم ألوان HSLA

قيم ألوان HSLA هي امتداد لقيم ألوان HSL مع قناة ألفا - والتي تحدد عتامة اللون.

يتم تحديد قيمة لون HSLA بـ:

هسلا (هوى ، تشبع ، خفة ، ألفا) hsla(hue, saturation, lightness, alpha)

المعلمة alpha عبارة عن رقم يتراوح بين 0.0 (شفاف تمامًا) و 1.0 (غير شفاف على الإطلاق):

جرب عن طريق خلط قيم HSLA أدناه:

HUE

0

SATURATION

        100%
      

LIGHTNESS

50%

ALPHA

0.5

مثال

          hsla(9, 100%, 64%, 0)
        
          hsla(9, 100%, 64%, 0.2)
        
          hsla(9, 100%, 64%, 0.4)
        
          hsla(9, 100%, 64%, 0.6)
        
          hsla(9, 100%, 64%, 0.8)
        
          hsla(9, 100%, 64%, 1)

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

</body>
</html>

الدرس السابق الدرس التالي