فهم الألوان السداسية عشرية (Hex Colors) وتوليدها برمجياً

في عالم تطوير الويب، تلعب الألوان دوراً حيوياً في تصميم واجهات المستخدم. إحدى الطرق الشائعة لتحديد الألوان هي استخدام نظام الألوان السداسية عشرية (Hexadecimal Colors). في هذا الدرس النظري، سنتعمق في فهم هذه الألوان وكيف يمكننا توليدها برمجياً باستخدام JavaScript.

ما هي الألوان السداسية عشرية؟

الألوان السداسية عشرية هي طريقة لتمثيل الألوان في الحوسبة والويب. يتم تمثيلها عادةً بسلسلة مكونة من ستة أحرف أو أرقام (من 0 إلى 9 ومن A إلى F)، مسبوقة بعلامة الهاشتاج (#). كل زوج من الأحرف يمثل شدة أحد المكونات اللونية الأساسية: الأحمر (Red)، الأخضر (Green)، والأزرق (Blue) - المعروفة بنظام RGB.

• الزوج الأول (RR): يمثل شدة اللون الأحمر.
• الزوج الثاني (GG): يمثل شدة اللون الأخضر.
• الزوج الثالث (BB): يمثل شدة اللون الأزرق.

على سبيل المثال، #FF0000 يمثل اللون الأحمر النقي (أقصى أحمر، لا أخضر، لا أزرق)، و #00FF00 يمثل الأخضر النقي، و #0000FF يمثل الأزرق النقي. أما #FFFFFF فيمثل اللون الأبيض، و #000000 يمثل اللون الأسود.

كيف يعمل الكود لتوليد لون سداسي عشري عشوائي؟

الكود المقدم يقوم بخطوات منطقية لتوليد لون سداسي عشري صالح وعشوائي. دعنا نحلل كل جزء:

function generateRandomHexColor() {
  // 1. توليد رقم عشوائي كبير يغطي نطاق الألوان
  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
  
  // 2. التأكد من أن الطول دائماً 6 خانات وإضافة علامة الهاشتاج
  return `#${randomColor.padStart(6, '0')}`;
}

شرح المكونات الرئيسية:

1. Math.random():

   هذه الدالة تولد رقماً عشوائياً عائماً (كسرياً) بين 0 (شامل) و 1 (غير شامل). على سبيل المثال: 0.12345، 0.98765.

2. * 16777215:

   الرقم 16,777,215 هو القيمة العشرية المكافئة لـ FFFFFF في النظام السداسي عشري. ضرب الرقم العشوائي بهذه القيمة يضمن أننا نحصل على رقم عشري يمثل أي لون ممكن ضمن نطاق 24 بت (من 000000 إلى FFFFFF).

3. Math.floor():

   تقوم هذه الدالة بتقريب الرقم العشري إلى أقرب عدد صحيح أقل أو مساوٍ له. هذا ضروري لأننا نحتاج إلى عدد صحيح قبل تحويله إلى نظام سداسي عشري.

4. .toString(16):

   هذه الدالة هي طريقة لسلاسل JavaScript تقوم بتحويل الرقم الذي تُطبق عليه إلى تمثيله في نظام عددي معين. الوسيط 16 يخبر الدالة بالتحويل إلى النظام السداسي عشري. فمثلاً، الرقم 255 سيتحول إلى "ff".

5. .padStart(6, '0'):

   بعد تحويل الرقم إلى سداسي عشري، قد لا يكون طول السلسلة الناتجة دائماً 6 أحرف (فمثلاً، #FF هو لون أحمر ولكنه يتكون من حرفين فقط). هذه الدالة تضمن أن تكون السلسلة بطول 6 أحرف عن طريق إضافة الحرف '0' من البداية (يساراً) إذا لزم الأمر. على سبيل المثال، "ff" تصبح "0000ff".

6. `#${randomColor.padStart(6, '0')}`:

   أخيراً، يتم استخدام قوالب السلاسل (Template Literals) لإضافة علامة الهاشتاج # في بداية السلسلة السداسية عشرية المكتملة، لتشكيل رمز لون CSS صالح.

بهذه الخطوات، نكون قد فهمنا كيف يمكننا برمجة توليد ألوان سداسية عشرية عشوائية، وهي مهارة أساسية في تطوير الويب الديناميكي.

---

🔗 الخطوة التالية: انتقل إلى التطبيق العملي وجرب الكود بنفسك من هنا.