يتم تحديد الألوان HTML باستخدام أسماء ألوان محددة مسبقًا أو قيم RGB أو HEX أو HSL أو RGBA أو HSLA.
أسماء الألوان
في HTML ، يمكن تحديد اللون باستخدام اسم اللون:
يدعم HTML 140 اسمًا قياسيًا للألوان تعرف عليها من هنا .
لون الخلفية
يمكنك ضبط لون الخلفية لعناصر HTML:
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>لون الخط
يمكنك ضبط لون النص:
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>لون الحدود
يمكنك ضبط لون الحدود:
<h1 style="border:2px solid Tomato;">Hello World</h1><h1 style="border:2px solid DodgerBlue;">Hello World</h1><h1 style="border:2px solid Violet;">Hello World</h1>
قيم اللون
في HTML ، يمكن أيضًا تحديد الألوان باستخدام قيم RGB وقيم HEX وقيم HSL وقيم RGBA وقيم HSLA:
نفس اسم اللون “Tomato”:
نفس اسم اللون “Tomato” ، ولكن 50 ٪ شفاف:
<h1 style="background-color:rgb(255, 99, 71);">...</h1><h1 style="background-color:#ff6347;">...</h1><h1 style="background-color:hsl(9, 100%, 64%);">...</h1><h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1><h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
قيمة RGB
في HTML ، يمكن تحديد لون كقيمة RGB ، باستخدام هذه الصيغة:
rgb(red, green, blue)
تحدد كل من (red, green, and blue) شدة اللون بين 0 و 255.
على سبيل المثال ، يتم عرض rgb (255 ، 0 ، 0) باللون الأحمر ، لأنه يتم تعيين الأحمر إلى أعلى قيمة (255) ويتم تعيين الآخرين على 0.
لعرض اللون الأسود ، اضبط كل معلمات اللون على 0 ، مثل هذا: rgb (0 ، 0 ، 0).
لعرض اللون الأبيض ، اضبط جميع معلمات الألوان على 255 ، مثل هذا: rgb (255 ، 255 ، 255).
غالبًا ما يتم تعريف ظلال الرمادي باستخدام قيم متساوية لجميع مصادر الضوء الثلاثة:
القيمة السداسية
في HTML ، يمكن تحديد لون باستخدام قيمة ست عشرية في النموذج:
#rrggbb
حيث rr (أحمر) ، gg (أخضر) و bb (أزرق) هي قيم ست عشرية بين 00 و ff (مثل القيمة العشرية 0-255).
على سبيل المثال ، يتم عرض #ff0000 باللون الأحمر ، لأنه يتم تعيين الأحمر إلى أعلى قيمة (ff) ويتم تعيين الآخرين على أدنى قيمة (00).
غالبًا ما يتم تعريف ظلال الرمادي باستخدام قيم متساوية لجميع مصادر الضوء الثلاثة:
قيمة HSL
في HTML ، يمكن تحديد لون باستخدام تدرج اللون (HSL) في النموذج:
hsl(hue, saturation, lightness)
تدرج اللون في درجة اللون من 0 إلى 360. 0 باللون الأحمر ، و 120 باللون الأخضر ، و 240 باللون الأزرق.
التشبع هو قيمة النسبة المئوية ، يعني 0٪ ظلال رمادية ، و 100٪ هو اللون الكامل.
الخفة هي أيضًا نسبة مئوية ، 0٪ سوداء ، 50٪ ليست خفيفة أو مظلمة ، 100٪ بيضاء
التشبع
يمكن وصف التشبع بأنه شدة اللون.
100 ٪ هو لون نقي ، لا ظلال رمادية
50 ٪ من الرمادي ، ولكن لا يزال بإمكانك رؤية اللون.
0٪ رمادي بالكامل ، لم يعد بإمكانك رؤية اللون.
خفة
يمكن وصف إضاءة اللون بأنها مقدار الضوء الذي تريد إعطاء اللون ، حيث أن 0٪ لا تعني أي ضوء (أسود) ، 50٪ تعني 50٪ ضوء (لا مظلمة ولا ضوء) 100٪ تعني إضاءة كاملة (بيضاء).
غالبًا ما يتم تحديد ظلال الرمادي من خلال ضبط تدرج اللون والتشبع على 0 ، وضبط الإضاءة من 0٪ إلى 100٪ للحصول على ظلال داكنة / أفتح:
قيمة RGBA
قيم ألوان RGBA هي امتداد لقيم ألوان RGB والتي تحدد عتامة اللون.
يتم تحديد قيمة اللون RGBA مع:
rgba ( أحمر ، أخضر ، أزرق ، ألفا )
المعلم alpha هي رقم يتراوح بين 0.0 (شفاف بالكامل) و 1.0 (غير شفاف على الإطلاق):
قيمة HSLA
قيم ألوان HSLA هي امتداد لقيم ألوان HSL والتي تحدد عتامة اللون.
يتم تحديد قيمة اللون HSLA مع:
hsla ( تدرج اللون ، التشبع ، الخفة ، ألفا )
One Comment