ألوان HTML RGB و RGBA

الدرس السابق الدرس التالي

تمثل قيمة اللون RGB مصادر الضوء الأحمر والأخضر والأزرق.
قيمة لون RGBA هي امتداد لـ RGB بقناة Alpha (opacity).

قيم ألوان RGB

في HTML ، يمكن تحديد اللون كقيمة RGB ، باستخدام هذه الصيغة:

RGB (أحمر ، أخضر ، أزرق)

تحدد كل معلمة (أحمر وأخضر وأزرق) كثافة اللون بقيمة تتراوح بين 0 و 255.

هذا يعني أن هناك 256 × 256 × 256 = 16777216 لونًا ممكنًا!

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

مثال آخر ، rgb (0 ، 255 ، 0) يتم عرضه باللون الأخضر ، لأن اللون الأخضر مضبوط على أعلى قيمة له (255) ، والآخران (الأحمر والأزرق) مضبوطين على 0.

لعرض اللون الأسود ، اضبط جميع معلمات الألوان على 0 ، مثل هذا: rgb (0 ، 0 ، 0).

لعرض اللون الأبيض ، اضبط جميع معلمات اللون على 255 ، مثل هذا: rgb (255 ، 255 ، 255).

جرب عن طريق مزج قيم RGB أدناه:

rgba(129, 144, 71 )

RED

129

GREEN

144

BLUE

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
</body>
</html>

ظلال رمادية غالبًا ما يتم تحديد ظلال الرمادي باستخدام قيم متساوية لجميع المعلمات الثلاثة: مثال

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>

</body>
</html>

قيم ألوان RGBA

قيم ألوان RGBA هي امتداد لقيم ألوان RGB مع قناة Alpha - والتي تحدد عتامة اللون.

يتم تحديد قيمة لون RGBA بـ:

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

المعلمة alpha عبارة عن رقم يتراوح بين 0.0 (شفاف تمامًا) و 1.0 (غير شفاف على الإطلاق):

جرب عن طريق خلط قيم RGBA أدناه:

rgb(0, 0, 41,0.5)

RED

GREEN

BLUE

ALPHA

مثال

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

</body>
</html>

الدرس السابق الدرس التالي