الدرس 23

كتابة الألوان باستخدام RGB و RGBA

المعنى	Stand For	Name
الأحمر والأخضر والأزرق	Red Green Blue	RGB
الأحمر والأخضر والأزرق مع قيمة لظهور اللون	Red Green Blue Alpha	RGBA
قيمة بتحدد درجة ظهور اللون		Alpha

بنكون اللون باستخدام كمية من الأحمر وكمية من الأخضر وكمية من الأزرق داخل rgb الترتيب مهم لأن كل مكان مسؤول عن لون مختلف

<p class="color-example">RGB Color Example</p>

.color-example {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
}

في الصيغة دي كل قيمة من 0 إلى 255 الصفر معناه مفيش كمية من اللون و 255 أعلى كمية

الخلفية فيها أحمر بأعلى قيمة والأخضر والأزرق بصفر فبتطلع حمراء

لما التلات قيم يبقوا 255 اللون أبيض ولما يبقوا صفر اللون أسود

/* Same Blue */
color: blue;
color: #0000ff;
color: rgb(0, 0, 255);

التلات سطور بيحددوا نفس اللون الفرق طريقة كتابته

.color-example {
  color: black;
  background-color: rgba(255, 0, 0, 0.5);
}

القيمة الرابعة هي Alpha القيمة 1 معناها اللون ظاهر بالكامل والقيمة 0 معناها اللون شفاف تماما والقيمة 0.5 بتخلي اللي وراه يبان معاه بنسبة النصف

على خلفية بيضاء الأحمر هنا هيبان أفتح لون النص فضل أسود لأننا غيرنا ظهور لون الخلفية بس

ممكن تكتب نفس اللون بالطريقة دي من غير فواصل بين قيم الألوان وتفصل Alpha بعلامة /

background-color: rgb(255 0 0 / 50%);

ده نفس rgba(255, 0, 0, 0.5) الصيغتين صحيحتين اختار شكل ثابت وانت بتكتب الكود

غير Alpha بين 1 و 0.5 و 0 وخلي لون النص ثابت ثم جرب لون أزرق بنفس درجات الظهور

آخر تعديل للدرس: 13/10/2026