ألوان CSS

دعم CSS 140 نوعًا من أسماء الألوان، بالإضافة إلى القيم السداسية عشرية، وأرقام RGB، وأرقام RGBA، وأرقام HSL، وأرقام HSLA وشفافية.

لون RGBA

قيمة اللون RGBA هي توسيع لقيمة اللون RGB، يحتوي على قناة الألفا - التي تحدد شفافية اللون.

قيمة اللون RGBA مسمى هكذا: rgba(الأحمر, الأخضر, الأزرق, الآلفا) الآلفا المعدل هو عدد بين 0.0 (شفاف تمامًا) و 1.0 (غير شفاف تمامًا).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

المثال التالي يعرف ألوان RGBA المختلفة:

مثال

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* اللون الأحمر مع شفافية */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* اللون الأخضر مع شفافية */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* اللون الأزرق مع شفافية */

تجربة شخصية

لون HSL

HSL تعني اللون والسماحة والإضاءة (Hue، Saturation، Lightness).

قيمة اللون HSL مسمى هكذا: hsl(اللون، السماحة، الإضاءة).

اللون هو درجة في الحلقة اللونية (من 0 إلى 360):

  • 0 (أو 360) هو اللون الأحمر
  • 120 هو اللون الأخضر
  • 240 هو اللون الأزرق

النسبة المئوية للسماحة هي 100٪ هي اللون الكامل.

الإضاءة هي قيمة مئوية: 0٪ هي اللون الداكن (الأسود)، بينما 100٪ هي البياض.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

هذه الأمثلة تعرف ألوان HSL المختلفة:

مثال

#p1 {background-color: hsl(120, 100%, 50%);}  /* اللون الأخضر */
#p2 {background-color: hsl(120, 100%, 75%);}  /* اللون الأخضر الفاتح */
#p3 {background-color: hsl(120, 100%, 25%);}  /* اللون الأخضر الداكن */
#p4 {background-color: hsl(120, 60%, 70%);}   /* اللون الأخضر الفاتح */

تجربة شخصية

اللون HSLA

اللون HSLA هو توسيع لللون HSL الذي يحتوي على قناة ألفا - ويحدد شفافية اللون.

تحدد قيمة اللون HSLA من خلال المعلمات التالية: hsla(hue, saturation, lightness, alpha)، حيث يحدد المعلمات alpha شفافية اللون. المعلمات alpha هي عدد بين 0.0 (شفافية كاملة) و 1.0 (لا شفافية على الإطلاق).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

هذه الأمثلة تعرف ألوان HSLA المختلفة:

مثال

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* اللون الأخضر مع شفافية */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* اللون الأخضر الفاتح مع شفافية */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* اللون الأخضر الداكن مع شفافية */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* اللون الأخضر الفاتح مع شفافية */

تجربة شخصية

الشفافية

CSS opacity يحدد هذا الخصائص شفافية العنصر كله (سيكون اللون الخلفي والنص شفافًا/شفافًا).

opacity القيمة يجب أن تكون عدد بين 0.0 (شفافية كاملة) و 1.0 (لا شفافية على الإطلاق).

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); شفافية:0.6;

rgb(255, 0, 0); شفافية:0.8;

السطر التالي سيكون شفافًا/غير شفاف أيضًا!

مثال

#p1 { لون الخلفية:rgb(255,0,0); شفافية:0.6; }  /* أحمر غير شفاف */
#p2 { لون الخلفية:rgb(0,255,0); شفافية:0.6; }  /* أخضر غير شفاف */
#p3 { لون الخلفية:rgb(0,0,255); شفافية:0.6; }  /* أزرق غير شفاف */

تجربة شخصية