طريقة التحويل من الترميز السداسي عشري (HEX) إلى الترميز العشري (RGB)
تحويل الألوان من النظام السداسي عشري (hexadecimal) إلى النظام العشري (RGB) هو عملية حسابية دقيقة تعتمد على أساس عددي ثابت. صفحة التحويل هذه تنفذ العملية مباشرة في المتصفح دون إرسال أي بيانات إلى الخادم. كل زوج من الأرقام السداسية يمثل قناة لونية واحدة: الأحمر (Red) والأخضر (Green) والأزرق (Blue). الرقم السداسي مكون من 6 خانات (#RRGGBB) أو 3 خانات مختصرة (#RGB). في الحالة المختصرة، يتم مضاعفة كل خانة لتكوين 6 خانات: مثلاً #abc يصبح #aabbcc. رمز # اختياري، إذ تقبل الصفحة الإدخال معه أو بدونه.
التحويل الرياضي يتم كالتالي: كل زوج سداسي (مثلاً 4f) يحول إلى عدد صحيح بضرب الخانة الأولى في 16 وإضافة الخانة الثانية. الأرقام السداسية هي: 0-9 و a-f (أو A-F). فالحرف a يمثل 10، و f يمثل 15. مثال: #4f46e5 يقسم إلى 4f (79)، 46 (70)، e5 (229). الناتج هو RGB(79, 70, 229). لا يوجد تقريب لأن التحويل من الأساس 16 إلى الأساس 10 محدد تماماً.
الصفحة تقبل فقط أكواد سداسية مكونة من 6 أو 3 أرقام. الأكواد ذات 8 أرقام (التي تتضمن قناة ألفا) غير مدعومة. إذا أدخل المستخدم قيمة غير صالحة، تظهر رسالة الخطأ: "أدخل لونًا سداسيًا مثل #4f46e5 أو #abc.". جميع حقول الألوان الأخرى (HSL, HSV, CMYK, LAB) تُحدَّث فوراً مع كل تغيير.
العلاقة بين HEX و RGB: لماذا كل زوج يقابل قناة لونية؟
النظام السداسي عشري هو مجرد تدوين مضغوط لنظام RGB. في الشاشات الرقمية، كل قناة لونية (أحمر، أخضر، أزرق) تأخذ قيمة بين 0 و 255، أي 256 قيمة ممكنة. الرقم 256 يساوي 16² (أساس 16 مرفوع للأس 2). لذلك تحتاج كل قناة إلى خانتين سداسيتين: الخانة الأولى تمثل المضاعف 16، والخانة الثانية تمثل الوحدات (0-15). مجموع 16×16 = 256. هذا هو السبب في أن أي لون في النظام السداسي يتكون من 6 أرقام بالضبط (أو 3 أرقام مضاعفة).
مثال: لون أسود هو #000000 الذي يعادل RGB(0,0,0). لون أبيض هو #ffffff الذي يعادل RGB(255,255,255). اللون الأحمر النقي هو #ff0000 الذي يعادل RGB(255,0,0). اللون الأصفر النقي هو #ffff00 الذي يعادل RGB(255,255,0).
الترميز المختصر (3 أرقام) يعمل لأن كل رقم سداسي مضاعف يعطي نفس نتيجة الرقمين المكررين. مثلاً #abc يعني #aabbcc. هذا يؤدي إلى تقليل عدد الألوان الممكنة إلى 4096 لوناً (16³) بدلاً من 16,777,216 لوناً (256³). لكن الصفحة تحول الاختصار إلى 6 أرقام قبل إجراء التحويل، فتكون النتيجة RGB بالضبط.
حالات الحافة والقواعد الدقيقة في التحويل
هناك عدة نقاط دقيقة يجب الانتباه إليها عند استخدام هذه الصفحة:
-
الأكواد المكونة من 8 أرقام: إذا أدخل المستخدم
#4f46e5ff(مع قناة ألفا)، ستظهر رسالة الخطأ لأن الصفحة تتوقع 6 أرقام فقط (أو 3). لا يوجد تحويل للشفافية هنا. -
الأكواد المختصرة غير الصالحة: مثلاً
#gggغير مقبول لأنgليس رقماً سداسياً. الخطأ سيظهر. -
العلامة # الاختيارية:
#abcوabcكلاهما مقبول. لكن#abc#خطأ. -
حالة الحروف: الأحرف الكبيرة والصغيرة مقبولة:
#ABCيعادل#abc. -
الإدخال مع فراغات: إذا أدخل المستخدم
#4f 46 e5، سيرفض النظام لأن المسافات غير مسموح بها. -
التحويل العكسي: لا تقدم الصفحة تحويلاً من RGB إلى HEX (لكن يمكن استخدام صفحة أخرى في الموقع). الخوارزمية دقيقة: RGB(255,102,0) يعطي
#ff6600.
جميع التحويلات تتم مباشرة في المتصفح باستخدام JavaScript دون اتصال بالإنترنت. لا يتم تخزين أي إدخال أو إرساله.
من يحتاج هذه الأداة ولماذا هي دقيقة؟
-
مطورو الواجهات الأمامية (Front-End): كثيراً ما يتلقون أكواد HEX من المصمّمين ويحتاجون إلى قيم RGB للاستخدام في CSS بطريقة
rgb()أو في JavaScript للتعامل مع canvas. على سبيل المثال، تحويل#1E90FF(لون أزرق سماوي) إلى RGB(30,144,255) يتطلب حساباً دقيقاً يستخدمه مطورو الرسوميات. -
المصمّمون: أدوات التصميم مثل Photoshop تستخدم قيماً رقمية (0-255) في منزلقات الألوان. تحويل HEX إلى RGB يسمح بإدخال القيم بدقة دون أخطاء تقريب.
-
مطورو الألعاب والرسوميات الرقمية: عند التعامل مع مكتبات مثل Three.js أو Canvas، تحتاج الألوان إلى مصفوفات رقمية. مثلاً
#4f46e5يصبح ``. -
الطلاب والمتعلمون: فهم العلاقة بين HEX و RGB هو أساس علم الألوان الرقمية. الأداة توفر مثالاً عملياً على كيفية عمل النظامين.
الدقة هنا كاملة لأن التحويل لا يتضمن أي فقدان أو استدارة. لكل زوج سداسي قيمة عشرية وحيدة. هذا يختلف عن بعض التحويلات مثل HSL التي تعتمد على الزوايا والنسب.
أمثلة عملية لتحويل الألوان الشائعة
الجدول التالي يوضح تحويل بعض الألوان المألوفة من HEX إلى RGB مستخدماً هذه الصفحة:
| الاسم | HEX | RGB |
|---|---|---|
| أحمر | #ff0000 | 255, 0, 0 |
| أخضر | #00ff00 | 0, 255, 0 |
| أزرق | #0000ff | 0, 0, 255 |
| أسود | #000000 | 0, 0, 0 |
| أبيض | #ffffff | 255, 255, 255 |
| رمادي فاتح | #cccccc | 204, 204, 204 |
| برتقالي داكن | #ff8c00 | 255, 140, 0 |
| بنفسجي | #800080 | 128, 0, 128 |
لاحظ أن الألوان المحايدة (رمادية) تتساوى فيها القنوات الثلاث، مثل #808080 (128,128,128). هذا يساعد في فهم كيفية عمل الإضاءة.
الفرق بين HEX و RGB في CSS والتطبيقات العملية
في CSS، يمكن استخدام كل من color: #ff6600; و color: rgb(255,102,0);. المتصفح يعاملهما بنفس الطريقة بعد التحويل إلى قيم رقمية. لكن هناك حالات تفضل استخدام RGB:
- عند الحاجة إلى الشفافية:
rgba(255,102,0,0.5). - عند البرمجة الديناميكية: تعديل القنوات الفردية في JavaScript يكون أسهل مع أرقام صحيحة.
- في بعض الأطر مثل React Native، قد تحتاج إلى تمرير كائن
rgbبدلاً من سلسلة نصية.
أما HEX فميزته الأساسية الاختصار. #ff6600 أقصر من rgb(255,102,0). لكن في أدوات مثل محررات الأكواد، لا فرق كبير. الأهم هو الدقة عند التحويل بين النظامين.
أسئلة شائعة (FAQ)
س1: لماذا تبدأ قيم RGB من 0 وتنتهي عند 255؟
لأن كل قناة تخزن في 8 بت (bit)، و 2⁸ = 256 قيمة. الرقم 0 هو أقل إضاءة و 255 هو أقصى إضاءة.
س2: ماذا يحدث إذا أدخلت رمزاً سداسياً مكوناً من 8 أرقام مثل #4f46e5ff؟
الصفحة لا تدعم قناة ألفا، لذلك سترى رسالة الخطأ: "أدخل لونًا سداسيًا مثل #4f46e5 أو #abc."
س3: هل تستطيع الصفحة تحويل RGB إلى HEX؟
لا، هذه الصفحة مخصصة فقط للتحويل من HEX إلى RGB. يمكنك البحث عن صفحة معكوسة في الموقع.
س4: هل يمكن استخدام الأحرف الكبيرة مثل #ABC؟
نعم، الأحرف الكبيرة والصغيرة مقبولة، وكذلك بدون #.
س5: كيف يعمل الاختصار المكون من 3 أرقام؟
كل رقم يضاعف: #abc يصبح #aabbcc ثم يتحول إلى RGB. هذا يمنح 4096 لوناً ممكناً بدلاً من 16 مليون.
س6: هل التحويل دقيق بنسبة 100%؟
نعم، لأنه مجرد تغيير في الأساس العددي. #ff هو 255 بالضبط، لا يوجد تقريب.
س7: ماذا يحدث إذا أدخلت رمزاً به مسافات أو أحرف غير سداسية؟
سيتم رفض الإدخال وظهور رسالة الخطأ المذكورة أعلاه.
س8: هل يتم حفظ الألوان المدخلة في الموقع؟
لا، كل شيء يتم في المتصفح ولا يُخزَّن أو يُرفع لأي خادم.