ما هو نموذج الألوان RGB، وكيف تعمل دالة RGB في لغة CSS ؟
نظريمقدمة إلى نموذج الألوان RGB
عند التعامل مع الألوان في لغة CSS، من الضروري فهم نموذج الألوان RGB. يرمز الاختصار RGB إلى الأحمر (Red) والأخضر (Green) والأزرق (Blue)، وهي الألوان الأساسية للضوء. وتُدمج هذه الألوان الثلاثة بكثافات متفاوتة لإنتاج طيف واسع من الألوان.
يُعد نموذج الألوان RGB نموذجاً لونياً جمعياً (additive color model)، مما يعني أن الألوان تُنشأ عن طريق دمج الضوء بكثافات متفاوتة.
يمكن أن تتراوح شدة (intensity) كل لون من 0 (أي غياب الضوء تماماً) إلى 255 (أي أقصى درجات الضوء). ومن خلال مزج مستويات مختلفة من الألوان الأحمر والأخضر والأزرق، يمكنك إنتاج أي لون تراه على شاشتك. على سبيل المثال:
-
يُمثَّل اللون الأسود Black بالصيغة rgb(0, 0, 0) ، وهو ما يعني غياب الضوء عن الألوان الثلاثة جميعها.
-
يُمثَّل اللون الأبيض White بالصيغة rgb(255, 255, 255) ، وهو ما يعني أقصى شدة ضوئية للألوان الثلاثة جميعها.
-
يُمثَّل اللون الأحمر Red بالصيغة rgb(255, 0, 0) ، حيث تكون كثافة اللون الأحمر في أقصى درجاتها، بينما تنعدم كثافة اللونين الأخضر والأزرق.
دالة rgb() في CSS
في لغة CSS، تتيح لك الدالة rgb() تحديد الألوان باستخدام نموذج الألوان RGB. تأخذ هذه الدالة ثلاث قيم، تُمثّل كل منها شدة اللون الأحمر red والأخضر green والأزرق blue، على التوالي. إليك الصيغة الأساسية لها:
element {
color: rgb(red, green, blue);
}
يمكن أن تتراوح قيم الألوان الأحمر والأخضر والأزرق بين 0 و 255، حيث يمثل الرقم 0 غياب اللون، بينما يمثل الرقم 255 التشبع الكامل. إليك مثال على كيفية استخدام الدالة rgb() في لغة CSS:
index.html
<link rel="stylesheet" href="styles.css">
<p>هذه فقرة.</p>
styles.css
p {
color: rgb(255, 0, 0);
}
معاينة:
هذه فقرة.
سيؤدي هذا الكود إلى تغيير لون نص الفقرة إلى اللون الأحمر لأن قيمة اللون الأحمر مضبوطة على 255، بينما تم ضبط اللونين الأخضر والأزرق على 0.
الشفافية Transparency باستخدام الدالة rgba()
توفر لغة CSS أيضاً الدالة rgba() ، التي تضيف قيمة رابعة — وهي "ألفا" (alpha) — تتحكم في شفافية اللون. تتراوح قيمة "ألفا" بين 0 (شفاف تماماً) و 1 (غير شفاف تماماً). إليك مثال على استخدام rgba() :
index.html
<link rel="stylesheet" href="styles.css">
<div>هذا عنصر div.</div>
styles.css
div {
background-color: rgba(0, 0, 255, 0.5);
}
معاينة:
سيؤدي هذا الكود إلى تطبيق خلفية زرقاء شبه شفافة على عنصر div؛ وذلك لأن قيمتي اللونين الأحمر والأخضر مضبوطتان على 0 ، وقيمة اللون الأزرق مضبوطة على 255 ، بينما تم ضبط قيمة الشفافية (alpha) على 0.5 (أي بنسبة شفافية تبلغ 50%).
لماذا نستخدم نموذج الألوان RGB ؟
يُعد نموذج الألوان RGB مفيداً بشكل خاص للوسائط الرقمية؛ لأنه يتوافق مباشرةً مع كيفية عرض الشاشات للألوان. إذ تستخدم الشاشات وحدات بكسل دقيقة باللون الأحمر والأخضر والأزرق لتكوين الألوان التي تراها. ومن خلال التحكم في شدة هذه الوحدات عبر قيم RGB، يمكنك الحصول على مجموعة واسعة من الألوان لتصاميم الويب الخاصة بك.
بالإضافة إلى ذلك، يُعد نموذج RGB مثالياً عند العمل على تصميمات ديناميكية. فعلى سبيل المثال، إذا كنت ترغب في إنشاء رسوم متحركة أو تأثيرات لونية تتطلب تغييرات فورية، فإن مرونة نظام RGB تتيح لك تعديل الألوان برمجياً.
من خلال فهم نموذج الألوان RGB وكيفية استخدام الدالتين rgb() و rgba() في لغة CSS، ستتمتع بتحكم أكبر في كيفية عرض الألوان على صفحات الويب الخاصة بك. إذ يمكنك ابتكار تصاميم ذات ألوان نابضة بالحياة، وإضافة تأثيرات الشفافية، بل وتعديل الألوان برمجياً للحصول على تأثيرات ديناميكية.
أسئلة :
ما الذي تمثله الأرقام الموجودة في الدالة rgb() ؟
1. عرض width العنصر وارتفاعه height وعمقه depth. ❌
2. مقدار الضوء الأحمر red والأخضر green والأزرق blue. ✅
3. أحجام الحشوة padding والهامش margin والحدود border. ❌
4. مقدار درجة اللون hue والتشبع saturation والسطوع lightness. ❌
ما هي دالة CSS التي ستستخدمها إذا أردت التحكم في شفافية (transparency) لون ما؟
1. rgb() ❌
2. rgba() ✅
3. hsl() ❌
4. hex() ❌
ما هي القيمة القصوى لأي لون فردي في نموذج RGB ؟
1. 100 ❌
2. 50 ❌
3. 255 ✅
4. 360 ❌