قيم الألوان الصالحة في CSS

رنگ CSS

يمكن تحديد الألوان في CSS بالطرق التالية:

  • الألوان السداسية
  • الألوان السداسية شفافة
  • لون RGB
  • ألوان RGBA
  • ألوان HSL
  • الألوان HSLA
  • أسماء الألوان المسبقة/متوافقة عبر المتصفحات
  • استخدام كلمة الحالي الكلمات المفتاحية

الألوان السداسية

تُحدد الألوان السداسية بناءً على قاعدة #RRGGBB، حيث RR (الأحمر)، GG (الأخضر) و BB (الأزرق) هي أرقام عشرة قياسية تحدد مكونات اللون (الأجزاء). يجب أن تكون جميع القيم بين 00 و FF.

على سبيل المثال، القيمة #0000ff تظهر بلون الأزرق، لأن جزء الأزرق تم تعيينه إلى أعلى قيمة (ff)، بينما تم تعيين الأجزاء الأخرى إلى 00.

مثال

تحديد ألوان HEX مختلفة:

#p1 {background-color: #ff0000;}   /* لون أحمر */
#p2 {background-color: #00ff00;}   /* لون أخضر */
#p3 {background-color: #0000ff;}   /* لون أزرق */

جرب بنفسك

الألوان السداسية شفافة

تُحدد الألوان السداسية عشرة بناءً على قاعدة #RRGGBB. إذا كنت ترغب في إضافة شفافية، أضف اثنين من الرقم الإضافيين بين 00 و FF.

مثال

تحديد لون HEX شفاف:

#p1a {background-color: #ff000080;}   /* لون أحمر شفاف */
#p2a {background-color: #00ff0080;}   /* لون أخضر شفاف */
#p3a {background-color: #0000ff80;}   /* لون أزرق شفاف */

جرب بنفسك

لون RGB

قيمة اللون RGB تتكون من وظيفة rgb()تحديد، النحو التالي:

rgb(الأحمر, الأخضر, الأزرق)

كل معامل (الأحمر, الأخضر, الأزرقتحديد شدة اللون، يمكن أن يكون عددًا صحيحًا بين 0 و 255 أو نسبة مئوية (من 0٪ إلى 100٪).

على سبيل المثال،القيمة rgb(0,0,255) تظهر بلون الأزرق، لأنه تم تعيين معامل الأزرق إلى أعلى قيمة (255)، بينما تم تعيين المعاملين الآخرين إلى 0.

بالإضافة إلى ذلك، القيم التالية تعرف نفس اللون: rgb(0,0,255) و rgb(0%,0%,100%).

مثال

تحديد ألوان RGB المختلفة:

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

جرب بنفسك

ألوان RGBA

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

ألوان RGBA من خلال وظيفة rgba()تحديد، النحو التالي:

rgba(الأحمر, الأخضر, الأزرق, الآلفا)

الآلفا المعدلات هي أرقام بين 0.0 (شفافية كاملة) و 1.0 (غير شفاف).

مثال

تحديد ألوان RGB المختلفة مع الشفافية:

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

جرب بنفسك

ألوان HSL

HSL تعني الإشارة إلى اللون (اللون)、الإشارة إلى السطوع (الإشارة إلى السطوع) والسطوع (السطوع) - تمثيل إحداثيات الألوان الكروية.

استخدام وظيفة hsl()تحديد قيمة لون HSL، نحوجارافراجرافيكا، النحو التالي:

hsl(اللون, نسبة التدرج اللوني, نسبة اللمعان)

الإشارة إلى أن اللون هو درجة على دائرة الألوان (من 0 إلى 360) - 0 (أو 360) هو الأحمر، 120 هو الأخضر، 240 هو الأزرق.

الإشارة إلى أن السطوع هو نسبة مئوية؛ 0٪ تعني ظلال رمادية، بينما 100٪ هي الألوان الكاملة.

سطوع هو نسبة مئوية؛ 0٪ هو أسود، 100٪ هو أبيض.

مثال

تحديد ألوان HSL المختلفة:

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

جرب بنفسك

الألوان HSLA

الألوان HSLA هي توسيع للألوان HSL، ولديها قناة آلفا - تحديد شفافية العنصر.

قيمة الألوان HSLA تتكون من وظيفة hsla()تحديد، جملة اللغة الخاصة بهذه الوظيفة هي:

hsla(اللون, نسبة التدرج اللوني, نسبة اللمعان, الآلفا)

الآلفا المعدلات هي أرقام بين 0.0 (شفافية كاملة) و 1.0 (غير شفاف).

مثال

تحديد ألوان HSL مع شفافية مختلفة:

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

جرب بنفسك

أسماء الألوان المسبقة/متوافقة عبر المتصفحات

محدد في معايير الألوان لـ HTML و CSS 140 اسم لون مسبق.

مثال:الأزرق،الأحمر،الكورال،البني مثل:

مثال

تحديد أسماء ألوان مختلفة:

#p1 {لون الخلفية: الأزرق;}
#p2 {لون الخلفية: الأحمر;}
#p3 {لون الخلفية: الكورال;}
#p4 {لون الخلفية: البني;}

جرب بنفسك

قائمة جميع الأسماء المسبقة لألوان يمكن العثور عليها في دليلنا للإشارات اللونية.

كلمة الحالي

كلمة الحالي إشارة إلى قيمة الخاصية color للعنصر المشار إليه.

مثال

لون الحدود للعنصر <div> سيكون أزرق، لأن لون النص للعنصر <div> هو أزرق:

#myDIV {
  اللون: أزرق; /* لون النص الأزرق */
  الحدود: 10px من الخطوط الصلبة من اللون الحالي; /* لون الحدود الأزرق */
}

جرب بنفسك