تغيير لون الخلفية في HTML باستخدام CSS: شرح عملي لصياغات الألوان المختلفة

مقدمة

عند بناء أي صفحة ويب، يكون اللون من أول العناصر التي تمنح الواجهة حياة ووضوحًا. وقد ترغب في تلوين خلفية الصفحة كاملة، أو إبراز عنصر محدد مثل العناوين والفقرات والصناديق. في CSS يمكن تنفيذ ذلك بسهولة عبر الخاصية background-color أو باستخدام الاختصار background.

في هذا الدليل ستتعرّف إلى الطرق الأساسية والاحترافية لتغيير لون الخلفية في HTML، مع شرح أشهر صيغ الألوان المستخدمة عمليًا، وأمثلة تساعدك على اختيار الأسلوب الأنسب في مشاريعك.

كيفية تغيير لون خلفية عنصر في HTML

لتغيير لون خلفية أي عنصر داخل الصفحة، استخدم خاصية background-color داخل ملف CSS، ثم امنحها قيمة لونية مناسبة.

p {
  background-color: pink;
}

في المثال السابق، ستحصل جميع عناصر <p> على خلفية وردية. وهذا يعني أن أي فقرة داخل الصفحة ستظهر بلون خلفية مطابق للقيمة pink.

تدعم CSS أكثر من 140 اسمًا جاهزًا للألوان مثل teal وhotpink وindigo وغيرها.

ملاحظة مهمة عند عدم ظهور اللون

إذا طبّقت الخاصية background-color ولم تلاحظ أي تغيير، فغالبًا يعود السبب إلى أحد أمرين:

• وجود خطأ في كتابة الشيفرة أو الصياغة.
• أن العنصر لا يملك أبعادًا ظاهرة أو لا يحتوي على محتوى.

في هذه الحالة، جرّب إضافة نص داخل العنصر أو حدّد له أبعادًا باستخدام الخاصيتين width وheight.

ومن الناحية العملية، فإن خيارات الألوان ليست محدودة بالأسماء فقط؛ إذ يمكنك استخدام ملايين الألوان عبر صيغ أخرى مثل RGB وHex وHSL.

صيغ الألوان التي تقبلها خاصية background-color

تقبل خاصية background-color أكثر من طريقة لتحديد اللون. واختيار الصيغة المناسبة يعتمد على أسلوب عملك، ومدى حاجتك للدقة أو سهولة التعديل.

1. أسماء الألوان الجاهزة

هذه أبسط طريقة، حيث تكتب اسم اللون مباشرة مثل black أو red. وهي مناسبة للتجارب السريعة، لكنها أقل مرونة من الصيغ الرقمية.

2. ألوان RGB

في هذه الصيغة يتم تحديد اللون من خلال مزج الأحمر والأخضر والأزرق. وهي مفيدة عندما تحتاج إلى تحكم مباشر في نسب المكونات اللونية.

3. القيم الست عشرية Hex

تُعد من أكثر الصيغ شيوعًا في تطوير الواجهات، وتُكتب باستخدام الرمز # متبوعًا بست خانات أو ثلاث خانات في الصيغة المختصرة.

4. ألوان HSL

تعتمد على مفهوم Hue وSaturation وLightness، وهي مريحة جدًا عند الرغبة في إنتاج تدرجات لونية أو إنشاء نسخ أفتح وأغمق من اللون نفسه.

استخدام أسماء الألوان في CSS

في الإصدارات الأولى من HTML كان عدد الألوان المعروفة محدودًا، أما اليوم فهناك أكثر من 140 لونًا مسمى يمكن استخدامه مباشرة.

body {
  background-color: black;
}

في هذا المثال، تم تطبيق لون أسود على خلفية العنصر body، وبالتالي تظهر الصفحة كاملة بخلفية سوداء.

هذا الأسلوب ممتاز عندما يكون اللون المطلوب معروفًا ومتاحًا ضمن الأسماء القياسية، لكنه لا يكفي غالبًا في التصاميم الدقيقة أو عند الالتزام بهوية بصرية خاصة.

فهم ألوان RGB لتغيير الخلفية بدقة

يرمز RGB إلى Red وGreen وBlue. وتُكتب الألوان في هذه الصيغة على شكل rgb(0,0,0)، حيث تمثل كل قيمة مقدار اللون من 0 إلى 255.

فعلى سبيل المثال:

• rgb(0,0,0) يعطينا الأسود.
• rgb(255,0,0) يعطينا الأحمر الكامل.
• rgb(255,69,0) ينتج لونًا قريبًا من الأحمر البرتقالي.
• rgb(139,0,0) ينتج لونًا أحمر داكنًا.

div {
  background-color: rgb(139, 0, 0);
}

هنا تم تعيين لون خلفية داكن لعنصر div باستخدام صيغة RGB.

ميزة هذه الصيغة أنها تمنحك تحكمًا مباشرًا في مكونات اللون. وكلما غيّرت القيم الثلاث، حصلت على تدرجات أو ألوان جديدة.

ولست مضطرًا إلى تخمين القيم يدويًا؛ إذ توجد أدوات كثيرة على الإنترنت باسم color picker تساعدك على اختيار اللون وإعطائك قيمته الجاهزة بصيغة RGB.

استخدام الألوان الست عشرية Hex

تُعد صيغة Hex تمثيلًا آخر للألوان نفسها المستخدمة في RGB، لكنها تُكتب بطريقة مختلفة. تبدأ القيمة بعلامة #، ثم تتبعها ست خانات تمثل الأحمر والأخضر والأزرق.

أمثلة شائعة:

• #FF0000 للأحمر.
• #8B0000 للأحمر الداكن.
• #FF4500 للأحمر البرتقالي.

h1 {
  background-color: #FF4500;
}

في هذا المثال، حصل العنصر h1 على خلفية بلون #FF4500.

يفضّل كثير من المطورين هذه الصيغة لأنها مختصرة، شائعة في أدوات التصميم، وسهلة النسخ من ملفات الهوية البصرية أو برامج التصميم مثل Figma وPhotoshop.

صيغة Hex المختصرة

في بعض الحالات يمكن اختصار القيمة من ست خانات إلى ثلاث فقط، إذا كانت كل خانتين متطابقتين في كل جزء لوني. على سبيل المثال:

• #F00 تساوي #FF0000.
• #800 تساوي #880000.
• #F40 تساوي #FF4400.

هذا الأسلوب مفيد للاختصار، لكنه لا يوفّر العدد الكامل نفسه من الألوان المتاح في الصيغة الطويلة.

شرح ألوان HSL ولماذا يفضّلها بعض المصممين

تعني HSL القيم الثلاث: Hue وSaturation وLightness. وهي صيغة مختلفة عن RGB وHex لأنها تصف اللون بطريقة أقرب إلى التفكير البشري.

تُكتب الصيغة بهذا الشكل: hsl(0,100%,50%).

• Hue: يحدد أصل اللون على عجلة الألوان، من 0 إلى 360.
• Saturation: يحدد تشبع اللون من 0% إلى 100%.
• Lightness: يحدد درجة الإضاءة من 0% إلى 100%.

في هذه المنظومة:

• الأحمر يكون عند 0.
• الأخضر عند 120.
• الأزرق عند 240.
• والقيمة 360 تعود إلى الأحمر مرة أخرى.

أما التشبع Saturation، فعندما تكون قيمته 0% يصبح اللون رماديًا، وكلما اقترب من 100% أصبح أنقى وأقوى.

وبالنسبة للإضاءة Lightness، فإن 0% تعني الأسود، و50% تمثل اللون بصورته الطبيعية تقريبًا، و100% تعني الأبيض.

أمثلة عملية:

• hsl(0,100%,50%) للأحمر.
• hsl(16,100%,50%) للأحمر البرتقالي.
• hsl(0,100%,27%) للأحمر الداكن.

تتميّز صيغة HSL بأنها تسهّل إنتاج نسخ قريبة من اللون نفسه. فإذا كان لديك لون برتقالي مثل hsl(39,100%,50%)، يمكنك الحصول على نسخة أفتح فقط عبر رفع قيمة Lightness إلى 65% مثلًا:

hsl(39,100%,65%)

بينما في RGB أو Hex ستحتاج إلى إعادة حساب اللون أو توليده بقيمة جديدة مثل rgb(255,193,77) أو #FFC14D.

استخدام الخاصية المختصرة background بدل background-color

يمكنك أيضًا تحديد لون الخلفية عبر الخاصية المختصرة background بدلًا من background-color. وعند تمرير قيمة لونية فقط، تكون النتيجة العملية مماثلة.

p {
  background: pink;
}

body {
  background: black;
}

div {
  background: rgb(139, 0, 0);
}

h1 {
  background: #FF4500;
}

main {
  background: hsl(39, 100%, 65%);
}

لكن يجدر الانتباه إلى أن background ليست مخصصة للون فقط، بل تُعد خاصية مختصرة لعدة خصائص أخرى مثل background-image وbackground-position وغيرها. لذلك إن كنت تريد ضبط لون الخلفية فقط بوضوح أكبر، فإن background-color تكون غالبًا الخيار الأدق والأوضح في قراءة الشيفرة.

مقارنة سريعة بين صيغ الألوان

أفضل ممارسات لاختيار لون الخلفية في صفحات الويب

• احرص على وجود تباين واضح بين لون الخلفية ولون النص لتحسين القراءة.
• استخدم الألوان الداكنة أو الفاتحة بناءً على نوع المحتوى والهوية البصرية.
• لا تكثر من الخلفيات الملونة داخل الصفحة نفسها إلا عند وجود غرض بصري واضح.
• اختبر النتيجة على الهاتف والشاشات المختلفة، لأن بعض الألوان تبدو مختلفة باختلاف الإضاءة ونوع الشاشة.
• اعتمد على أدوات اختيار الألوان color pickers لتوحيد القيم وتجنب الفروقات العشوائية.

خاتمة

أصبح بإمكانك الآن تغيير لون الخلفية في عناصر HTML باستخدام CSS بعدة أساليب مرنة. يمكنك البدء بأسماء الألوان إن أردت السرعة، أو استخدام RGB وHex عندما تحتاج إلى دقة أكبر، أو الاعتماد على HSL إذا كنت تبحث عن طريقة أسهل لإنتاج تدرجات لونية متناسقة.

المهم هو اختيار الصيغة التي تخدم مشروعك، وتحافظ على وضوح المحتوى وتجربة المستخدم.

ملحق: الألوان المسمّاة والاختلاف الإملائي

تتوفر قائمة طويلة تضم أكثر من 140 لونًا مسمى يمكن استخدامها مباشرة في CSS.

ومن المفيد أيضًا معرفة أن بعض الألوان التي تحتوي على كلمة Gray يمكن كتابتها كذلك بصيغة Grey، وكلا الشكلين مدعوم في CSS.

الخلاصة التقنية

من منظور تقني، تبقى الخاصية background-color الخيار الأكثر وضوحًا عند تعيين لون الخلفية فقط، بينما توفر background مرونة أكبر إذا كنت ستتعامل لاحقًا مع الصور والتموضع والتكرار. أما من جهة اختيار اللون، فصيغة Hex مناسبة للتكامل مع أدوات التصميم، في حين تمنحك HSL أفضلية واضحة عند ضبط التدرجات وتوليد نسخ أفتح أو أغمق بسرعة. لهذا فإن أفضل ممارسة هي اختيار الصيغة التي توازن بين سهولة الصيانة ودقة التحكم في واجهة المستخدم.