الألوان في HTML

سبق أن غيّرت المظهر بسمة style وعلّمت المعنى بالتنسيق والنقل. الألوان تشكّل المزاج وقابلية القراءة معاً. في مسار HTML للمبتدئين هذا تتدرّب على قيم اللون داخل style: أسماء شائعة، ورموز hex، ودوال rgb(). أنظمة التصميم الكاملة تأتي لاحقاً في CSS؛ هنا تتعلّم قراءة الأشكال وكتابتها بشكل صحيح حتى لا تبدو الصفحة «ملوّنة» دون أن تفهم ما كتبته فعلاً. عندما تتقن الأشكال الثلاثة، يصبح الانتقال إلى أوراق الأنماط المشتركة أوضح لأنك ترى نفس القيم خارج السمات المتكررة.

ما قيمة لون HTML؟

قيمة اللون تخبر المتصفح أي لون يستخدم لخاصية CSS مثل color أو background-color. نفس أشكال القيمة تعمل في style ضمن السطر وفي ملفات الأنماط. المبتدئ يلتقي أولاً بثلاثة أشكال عملية: اسم مقروء (tomato)، ورمز hex (#c0392b)، ومزيج rgb() مثل (rgb(192, 57, 43)). يمكن أن تصف هذه الأشكال نفس الدرجة بتهجئة مختلفة، وهذا مفيد عندما تنسخ من لوحة ألوان أو عندما تضبط قناة واحدة فقط. فهم أن الاسم و hex و rgb قد يشيرون إلى لون واحد يزيل الارتباك عند مقارنة أمثلة من مصادر مختلفة.

إجابة مباشرة

اضبط النص بـ color والمنطقة خلف المحتوى بـ background-color. اختر شكل قيمة يناسب اللحظة: اسماً للعروض السريعة، أو hex عندما تنسخ من لوحة، أو rgb() عندما تفكّر بقنوات الأحمر والأخضر والأزرق من 0 إلى 255. أبقِ التباين قوياً بما يكفي للقراءة. مع نمو المشاريع انقل الألوان المشتركة إلى CSS بدل تكرار سمات طويلة على كل صفحة. هذه العادة تحفظ الوقت وتمنع اختلافات صغيرة بين الصفحات عندما تتغيّر هوية الموقع لاحقاً.

أشكال القيمة في لمحة

ألوان بالأسماء

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

قراءة العينة

• الفقرة الأولى تغيّر لون النص فقط
• الثانية تضبط الخلفية والنص معاً حتى يبقى الكحلي واضحاً على الأزرق الفاتح
• الأسماء غير حسّاسة لحالة الأحرف في CSS، لكن الكتابة بأحرف صغيرة عادة أوضح
• ليس كل كلمة لون إنجليزية اسماً صالحاً في CSS — التزم بالأسماء الشائعة التي تحققت منها
• إذا بدا اللون «لا يعمل»، تأكد أولاً أن الاسم مكتوب كما يتوقعه CSS وليس ترجمة حرّة

ألوان hex

لون hex عادة يبدأ بـ # يتبعه ستة محارف من 0–9 و a–f. الأزواج تعني أحمر وأخضر وأزرق. #000000 أسود؛ #ffffff أبيض. لا تحتاج حفظ كتالوج كامل — اختر من لوحة والصق بعناية. كثير من أدوات التصميم تعرض hex جاهزاً للنسخ؛ مهمتك أن تحافظ على # وعلى ستة أرقام صحيحة حتى لا يتجاهل المتصفح القيمة بصمت.

نصائح hex

• أبقِ # — في شكل هذا الدرس 336699 وحده ليس مثل #336699
• استخدم أرقام hex الصالحة فقط؛ الحروف تتوقف عند f
• يوجد hex بثلاثة أرقام في CSS (#333)، لكن الرموز ذات الستة أرقام كافية في هذه المرحلة
• راجع النسخ واللصق حتى لا يسقط رقم فيفشل اللون دون رسالة واضحة
• قارن #c0392b مع الاسم أو rgb المكافئ عندما تريد التأكد أنك نسخت الدرجة الصحيحة من اللوحة

ألوان rgb()

دالة rgb() تمزج الأحمر والأخضر والأزرق كأرقام من 0 إلى 255. rgb(255, 0, 0) أحمر نقي. هذا الشكل مفيد عندما تضبط قناة واحدة في كل مرة، مثلاً لرفع السطوع أو تقليل الأزرق دون إعادة حساب hex يدوياً. الأرقام الثلاثة مرتبة دائماً: أحمر ثم أخضر ثم أزرق، والفواصل بينها جزء من الصيغة.

ربط الأشكال

غالباً يمكن كتابة نفس الدرجة كاسم أو hex أو rgb. اختر شكلاً واحداً لكل عرض حتى يتعلّم عينك الصيغة. لاحقاً في CSS ستقابل رموزاً أخرى؛ هذه الثلاثة تغطي تمرين HTML المبكر. عندما ترى لوحة تعطي hex وأداة أخرى تعطي rgb، تذكّر أنهما قد يمثلان اللون نفسه بطريقتين، والمهم أن تحافظ على صيغة كاملة صحيحة داخل style.

التباين وقابلية القراءة

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

تمرين في محررك

1. أنشئ ثلاث فقرات قصيرة تحت عنوان.
2. لوّن نص الأولى باسم (teal أو مشابه).
3. لوّن نص الثانية بقيمة hex.
4. أعطِ الثالثة background-color باستخدام rgb()، وضع color داكناً إن لزم للتباين.
5. احفظ وحدّث الصفحة. أكّد أن كل شكل يعمل.
6. اكسر عمداً رمزاً hex (احذف رقماً)، حدّث، ثم أصلحه — ذلك يدرّب الصيغة الدقيقة.
   كرّر التمرين بألوان مختلفة حتى تميّز بسرعة بين اسم و hex و rgb دون الرجوع للملاحظات في كل مرة. راقب أيضاً أن علامات الاقتباس حول قيمة style كاملة، لأن خطأ صغيراً في السمة قد يلغي اللون كله.

أخطاء تخفي الألوان أو تضعفها

• الخلط بين color (النص) و background-color (خلف النص)
• كتابة #33 أو #gggggg أو hex بلا # عندما تقصد رمزاً بست أرقام
• تراكيب تباين منخفض تبدو «منسّقة» لكنها صعبة القراءة
• بناء ثيم علامة تجارية كامل فقط بتكرار أنماط ضمن السطر بدل تعلّم CSS المشترك لاحقاً
• افتراض أن كل كلمة لون إنجليزية اسم CSS صالح دون تحقق
• نسيان إغلاق علامات الاقتباس حول قيمة style فيظن المتصفح أن السمة ناقصة
  كل خطأ من هذه يضيّع وقتاً أو يضعف الثقة بالمحتوى. اقرأ الصفحة بعين زائر: هل النص واضح على خلفيته؟ وهل فهمت لماذا اخترت هذا الشكل من القيمة؟

ملخص

• استخدم color و background-color في style لعروض لون سريعة
• القيم: أسماء، hex (#RRGGBB)، أو rgb(r, g, b)
• أزواج hex تطابق أحمر وأخضر وأزرق؛ قنوات rgb من 0 إلى 255
• فضّل تبايناً مقروءاً كلما جلس النص على خلفية ملوّنة
• انقل الألوان المشتركة إلى CSS مع نمو الصفحات والمشاريع
• تحقّق بالحفظ والتحديث؛ أصلح الصيغة بدقة عندما «لا يفعل اللون شيئاً»
  بهذا الترتيب تبني عادة واضحة: تختار الخاصية الصحيحة، تكتب قيمة كاملة، ثم تحمي القراءة بالتباين قبل أن تنتقل إلى أنماط مشتركة أوسع.