ألوان HSL CSS

قيمة HSL

في CSS، يمكنك استخدام اللون والكثافة والإضاءة (HSL) لتعيين الألوان، وتكون النسخة كالتالي:

hsla(hue, saturation, lightness)

اللون (hue）هي درجات من عجلة الألوان من 0 إلى 360. 0 هي الأحمر، 120 هي الأخضر، 240 هي الأزرق.

الكثافة (saturation）هي قيمة مئوية، حيث يمثل 0٪ الظلال الرمادية، و100٪ اللون الكامل.

إضاءة (lightness）هي أيضًا نسبة مئوية، حيث يمثل 0٪ الأسود، يمثل 50٪ لا إضاءة ولا ظلام، يمثل 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%)

تجربة بنفسك

الكثافة

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

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%)

تجربة بنفسك

إضاءة

يمكن وصف إضاءة اللون بأنها مقدار الضوء الذي يتم منحه للون، حيث يمثل 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%)

تجربة بنفسك

عادة ما يتم تعريف الظلال الرمادية عن طريق تعيين النغمة والكثافة إلى 0، وتحديد الإضاءة من 0٪ إلى 100٪ للحصول على ظلال أعمق/أرق:

مثال

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

تجربة بنفسك

قيمة 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)

تجربة بنفسك