كيف تصنع الحاسوب الألوان: RGB وHEX والأعداد الثنائية

#FF0000. #00FF00. #0000FF. ربما صادفتَ هذه الرموز في ملف تصميم أو كود برمجي. قد تبدو شفرةً غامضة أو رمزَ لعبة، لكنها في الحقيقة أسماء الألوان.

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

RGB — الحروف الثلاثة لصنع الألوان

Red, Green, Blue. الألوان الأساسية الثلاثة للضوء. بتغيير نسب خلطها تتكوّن جميع الألوان التي نراها.

نرى RGB كل يوم

حيثما كانت شاشة، كان RGB.

• الشاشة / التلفاز — كل بكسل يتكوّن من ثلاث نقاط: أحمر وأخضر وأزرق
• شاشة الهاتف — البنية ذاتها، لكن بكسلات أصغر
• LED لوحة المفاتيح — ثلاث لمبات R وG وB في كل مفتاح
• إضاءة حاوية الحاسوب — شريط RGB هو إشارة RGB

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

الألوان تُصنع بالخلط

لكل قناة من قنوات RGB شدة تتراوح بين 0 و255.

• RGB(255, 0, 0) — أحمر فقط بالحد الأقصى ← أحمر نقي
• RGB(0, 255, 0) — أخضر فقط بالحد الأقصى ← أخضر نقي
• RGB(255, 255, 0) — أحمر + أخضر ← أصفر
• RGB(0, 0, 0) — كل شيء مطفأ ← أسود
• RGB(255, 255, 255) — كل شيء بالحد الأقصى ← أبيض

قد يبدو غريباً أن خلط الأحمر والأخضر يُنتج الأصفر، لكن هذا خلط الضوء. يختلف عن خلط الأصباغ الذي تعلّمناه في الفن (أحمر + أخضر = بني). الضوء يزداد سطوعاً كلما أضفتَ، ومجموع الكل أبيض.

حرّك الشرائط الثلاثة بنفسك لترى النتيجة.

الرقم المكوّن من 8 أرقام على اليمين هو التمثيل الثنائي لتلك القناة. حرّك الشريط فيتغير الرقم معه. كيف تُولّد الأصفار والآحاد 256 قيمة هو موضوعنا التالي.

لماذا من 0 إلى 255 تحديداً؟

يتعامل الحاسوب مع الصفر والواحد فقط. الخانة الواحدة التي تحمل 0 أو 1 تُسمّى بتاً (bit). كلما زاد عدد البتات، تضاعفت القيم الممكنة ضعفاً ضعفاً.

8 بتات = بايت واحد (byte). اللون الواحد يحوي ثلاث قنوات RGB، أي 3 بايتات = 24 بت. تُعبّر 24 بتاً عن نحو 16.7 مليون لون، وهو ما يكفي للتمييز بين العين البشرية، لذلك أصبح البايت الواحد المعيار لكل قناة.

قراءة الثنائي بنفسك

لكل خانة قيمة محددة. من اليسار: 128، 64، 32، 16، 8، 4، 2، 1 — قوى 2.

جمع قيم الخانات التي فيها 1 يُعطي العدد العشري.

لذلك القيمة القصوى لـ 8 بتات هي 255. هذا بالضبط سبب تراوح كل قناة RGB بين 0 و255.

HEX — نفس الرقم، أقصر

RGB(255, 255, 255). ستة عشر حرفاً. طويل جداً لكتابته في كل سطر CSS أو خانة في أداة التصميم. من هنا نشأت طريقة أقصر لكتابة الرقم نفسه.

ما هو النظام الست عشري؟

النظام الست عشري هو نظام يُعبّر بحرف واحد عن الأرقام من 0 إلى 15. لكن الأرقام التي نستخدمها يومياً هي 0~9 فقط — عشرة أرقام. الستة المتبقية تُستعار من الأبجدية.

ثلاثة قواعد:

• 0~9 تبقى كما هي
• 10 فأكثر تبدأ بـ A
• F هو الحد الأقصى لحرف واحد (= 15)

لماذا الست عشري تحديداً؟

4 خانات ثنائية (0000 ~ 1111) تُعبّر عن 16 قيمة بالضبط.

4 خانات ثنائية = حرف ست عشري واحد. أربعة أحرف تُختصر في حرف واحد. وبما أن كل قناة RGB هي 8 بتات، فإنها تُكافئ تماماً حرفَين ست عشريَّين.

كيفية تحويل RGB إلى HEX

لنحوّل RGB(255, 87, 51).

كانت الكتابة 14 حرفاً وأصبحت 7 أحرف.

قراءة اللون من HEX

عكسياً، من HEX يمكن استشعار اللون.

• #FF5733 — R أقصى (FF)، G متوسط (57)، B منخفض (33) → برتقالي غني بالأحمر
• #3576E0 — R منخفض (35)، G متوسط (76)، B عالٍ (E0) → أزرق مع لمسة بنفسجية
• #29A85A — R منخفض (29)، G عالٍ (A8)، B منخفض (5A) → أخضر نابض

النظر في ثلاث خانات فحسب يُخبرك “هل هو برتقالي أم أزرق”، مما يُتيح للمصمم والمطوّر التحدث بلغة واحدة.

خلاصة في سطر

• RGB — ثلاث قنوات: أحمر وأخضر وأزرق، كل منها 0~255
• الثنائي 8 بتات — حقيقة الـ 256 قيمة التي تُعبّر عنها قناة واحدة
• HEX — طريقة كتابة الرقم ذاته بحرفين فقط

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

الخطوة التالية هي تحويل هذه الأرقام إلى لغة المصمم. طلبات من قبيل “أفتح قليلاً” أو “أقل تشبعاً” أو “نفس اللون على الورق” يصعب تنفيذها بـ RGB وHEX وحدهما. كيف تحلّ HSL وCMYK وOKLCH هذه المشكلة — يتواصل في RGB لا يكفي: تدوينات الألوان HSL وCMYK وOKLCH.