محوّل الألوان HEX إلى RGB

HEX وRGB: طريقتان لكتابة اللون نفسه

كل لون تراه على الشاشة ممزوج من ثلاثة أضواء: الأحمر والأخضر والأزرق. ارفع الثلاثة جميعًا فتحصل على الأبيض؛ وأطفئها جميعًا فتحصل على الأسود. وHEX وRGB ليسا سوى صيغتين لوصف مقدار سطوع كل قناة من تلك القنوات الثلاث. وكلاهما يشير إلى اللون نفسه تمامًا، لذا فإن محوّلًا جيدًا لا يفعل سوى الترجمة بين نظامي الكتابة دون أن يغيّر الدرجة الفعلية. وهذا ما تفعله هذه الأداة، بالكامل في متصفحك، مع عرض عيّنة لون حية كي تؤكد النتيجة بعينيك.

كيف تقرأ رمز hex

يبدو لون hex هكذا #1E90FF. علامة المربع تشير فقط إلى البداية؛ والأحرف الستة بعدها هي ثلاثة أزواج، مكتوبة بنمط #RRGGBB. فالزوج الأول للأحمر، والثاني للأخضر، والثالث للأزرق. وكل زوج رقم مكتوب بالنظام السداسي العشري، أي الأساس 16، حيث تمتد الأرقام من 0 إلى 9 ثم تمثّل A وB وC وD وE وF القيم من 10 إلى 15. ويمكن للزوج الواحد أن يحمل قيمًا من 00 (القناة مطفأة تمامًا) حتى FF (مشعّلة تمامًا). وفي النظام العشري العادي يكون هذا النطاق من 0 إلى 255 بالضبط، وهو المقياس نفسه الذي يستخدمه RGB. وبوجود 256 مستوى ممكن لكل قناة، يمكن للصيغة المكوّنة من ستة أرقام أن تصف 16,777,216 لونًا متمايزًا.

التحويل في الاتجاهين، مع مثال محلول

للانتقال من HEX إلى RGB، قسّم الرمز إلى أزواجه الثلاثة وحوّل كلًا منها من الأساس 16 إلى العشري العادي. خذ #1E90FF. زوج الأحمر هو 1E: أي 1 مضروبًا في 16، زائد 14 (E)، ما يساوي 30. وزوج الأخضر 90 هو 9 مضروبًا في 16، زائد 0، ما يساوي 144. وزوج الأزرق FF هو 15 مضروبًا في 16، زائد 15، ما يساوي 255. فيصبح #1E90FF هو rgb(30, 144, 255) — وهو الأزرق المألوف بلون dodger blue.

والانتقال في الاتجاه الآخر هو العملية نفسها معكوسة. خذ كل رقم RGB واكتبه برقمين سداسيين عشريين. فالأحمر الخالص rgb(255, 0, 0) يعطي FF و00 و00، التي تتّحد لتكوّن #FF0000. وثمة أمر يستحق التذكر: إن كانت القيمة أقل من 16، فما زلت تحتاج إلى رقمين، فالعدد 5 يُكتب 05 لا 5 فقط. ويتولى المحوّل هذا الحشو نيابة عنك، لكنه يوقع الناس حين يفعلونه يدويًا.

أين تُستخدم كل صيغة

HEX هي اللغة اليومية للويب. فـ CSS وHTML ومعظم الشيفرة التي تكتبها تلجأ إلى رموز hex لأنها مدمجة وسهلة النسخ. أما RGB فتميل إلى الظهور داخل أدوات التصميم والصور — إذ تعرض Figma وPhotoshop وSketch وIllustrator عادةً منزلقات أو حقولًا في نطاق 0-255، وكثيرًا ما تتوقع تطبيقات تسجيل الشاشة أو الفيديو RGB أيضًا. فأنت تلتقط بانتظام رمز hex من ورقة أنماط وتحتاج إلى صيغته بـ RGB لكتابتها في لوحة تصميم، أو العكس. وتلك الرحلة ذهابًا وإيابًا هي سبب فائدة المحوّل بأكمله. وإن احتجت إلى بناء مجموعة كاملة من الدرجات المتناغمة بدلًا من ترجمة لون واحد، فإن مولّد لوحات الألوان لدينا نقطة بداية أفضل، وستجد مزيدًا من المرافق المماثلة ضمن أدوات المطورين.

قناة ألفا والشفافية وHSL

لكلتا الصيغتين شكل موسّع يضيف الشفافية. فـ RGB تصبح rgba(30, 144, 255, 0.5)، حيث القيمة الرابعة هي ألفا — فالصفر شفاف تمامًا والواحد صلب تمامًا. وتضيف HEX زوجًا رابعًا للغرض نفسه، فتعطي رمزًا من ثمانية أرقام بنمط #RRGGBBAA؛ فالقيمة 80، مثلًا، تعادل تقريبًا شفافية بنسبة 50 بالمئة. وتقدّم بعض المحوّلات أيضًا HSL (التدرّج اللوني والإشباع والإضاءة)، التي تصف اللون كما قد يفعل الإنسان — اختر تدرّجًا على العجلة، ثم اضبط حدّته وسطوعه. وHSL نموذج ذهني مختلف لا لوحة مختلفة، لذا يمكن أن تكون أكثر بداهة حين تريد دفع لون نحو الفتوح أو الخفوت دون التلاعب بثلاثة أرقام منفصلة.

الأسئلة الشائعة