ما يميز هذه الصفحة عن غيرها
هذه الصفحة مخصصة لتحويل قيم RGB (ثلاثة أعداد عشرية بين 0 و255) إلى كود ألوان سداسي عشري (hex) مكوَّن من ستة أرقام. الفرق الجوهري هنا هو أن التحويل يتم بدون أي تقريب أو فقدان للمعلومات. لأن كلاً من RGB وhex يعملان ضمن نفس الفضاء اللوني المعياري sRGB – وهو الفضاء المستخدم في معظم الشاشات والأجهزة الرقمية – فإن كل قيمة RGB تُقابل كوداً سداسياً عشرياً واحداً لا غير. لا يوجد تقليص للمدى اللوني (gamut clipping) ولا حاجة إلى استيفاء.
النتيجة دائماً تبدأ بـ # وتتكون من ستة أرقام سداسية عشرية (مثل #4F46E5). لا يوجد قناة شفافية (alpha) في الإخراج، على عكس الشكل المكوَّن من ثمانية أرقام (#RRGGBBAA). هذه الصفحة تركز على الصيغة القياسية المستخدمة في CSS وتصميم الويب.
بالإضافة إلى ذلك، بمجرد إدخال قيم RGB (بفصلها بفاصلة أو مسافة) يتم تحديث جميع الحقول الأخرى في الأداة تلقائياً: HSL، HSV، CMYK، LAB، وكذلك انتقاء الألوان البصري. لا يوجد زر "تحويل" منفصل – كل تعديل في أي حقل يغير البقية فوراً.
كيفية عمل التحويل: من الأرقام العشرية إلى الست عشرية
التحويل الرياضي بسيط ومباشر. كل قيمة من قيم RGB (من 0 إلى 255) تُقسَّم إلى جزأين: القيمة الأولى هي ناتج القسمة على 16 (الجزء الصحيح)، والثانية هي باقي القسمة. يمثل كل جزء رقماً سداسياً عشرياً واحداً (من 0 إلى F).
مثال عملي:
القيمة R = 79
79 ÷ 16 = 4والباقي15- الرقم السداسي العشري للـ4 هو
4، وللباقي 15 هوF - إذن
Rتصبح4F
القيمة G = 70
70 ÷ 16 = 4والباقي6- تصبح
46
القيمة B = 229
229 ÷ 16 = 14والباقي5- الرقم السداسي العشري للـ14 هو
E، وللباقي 5 هو5 - تصبح
E5
وبذلك نحصل على #4F46E5.
جدول سريع لبعض القيم الشائعة:
| RGB (عشري) | Hex |
|---|---|
| 0, 0, 0 | #000000 |
| 255, 255, 255 | #FFFFFF |
| 255, 0, 0 | #FF0000 |
| 0, 255, 0 | #00FF00 |
| 0, 0, 255 | #0000FF |
| 128, 128, 128 | #808080 |
لاحظ أن كل قيمة 255 تُحوَّل إلى FF، لأن 255 ÷ 16 = 15 والباقي 15، وكلاهما يمثل الحرف F في النظام الست عشري. والعكس صحيح: FF تعني 15×16 + 15 = 255.
القواعد والحالات الحدية التي يجب معرفتها
-
النطاق المسموح به: يجب أن تكون كل قيمة من قيم RGB بين 0 و255 شاملة. إذا أدخلت قيمة خارج هذا النطاق (مثل 300 أو -5)، أو استخدمت تنسيقاً غير صحيح (مثل أرقام غير مفصولة بشكل واضح)، ستظهر رسالة الخطأ التالية:
"Enter RGB as three numbers 0–255, like 79, 70, 229." -
لا يوجد تقليص تلقائي للشكل الثلاثي: على الرغم من أن صيغة hex قد تُكتب أحياناً بثلاثة أرقام (مثل
#abcبدلاً من#aabbcc)، إلا أن هذه الأداة تُخرج دائماً ستة أرقام. يمكنك مع ذلك إدخال الشكل الثلاثي في حقل hex مباشرة، وسيتم توسيعه تلقائياً إلى ستة أرقام. على سبيل المثال، إدخال#abcسيُحوّله النظام إلى#aabbcc. -
لا توجد قناة شفافية: hex المخرج لا يحتوي على أي معلومات عن الشفافية. إذا كنت بحاجة إلى قيمة alpha، فستحتاج إلى استخدام صيغة
rgba()أو hex ثماني الأرقام، لكن هذه الأداة لا تنتجها. -
المعالجة محلياً بالكامل: لا تُرفع أي بيانات إلى خادم خارجي. كل شيء يُنفذ في متصفحك، مما يحافظ على خصوصية الألوان التي تتعامل معها.
من يحتاج إلى هذه الأداة؟
- مطورو الواجهات الأمامية: عند كتابة CSS، تحتوي خصائص مثل
colorوbackground-colorغالباً على قيم hex. تحويل RGB من أدوات التصميم أو المتصفح إلى hex مباشرةً يضمن الدقة. - مصممو واجهات المستخدم (UI/UX): يتلقون ألواناً بصيغة RGB من برامج مثل Photoshop أو Figma، ويحتاجون إلى تحويلها إلى hex لتسليمها للمطورين أو لاستخدامها في أنظمة التصميم.
- مصممو الجرافيك للويب: يريدون اتساقاً بين النماذج الأولية (التي تعتمد على RGB) والتنفيذ النهائي (الذي يستخدم hex).
- الطلاب والهواة: يتعلمون كيف تتحول الأعداد العشرية إلى سداسية عشرية، وكيف يعمل نموذج الألوان الجمعي (additive) في الشاشات.
- أي شخص يستخدم منتقي الألوان: في متصفحات الويب أو برامج التحرير، حيث تُعرض القيم بصيغة RGB (مثل
rgb(79, 70, 229)) ويحتاج إلى تحويلها لصيغة hex لنسخها إلى ورقة أنماط.
نصائح حول تنسيق الإدخال والتعامل مع الأخطاء
تتوقع الأداة ثلاثة أرقام يفصل بينها فاصلة أو مسافة (أو خليط منهما). لا يهم وجود أقواس أو كلمة rgb – فقط الأرقام نفسها. على سبيل المثال:
79, 70, 229(مقبول)79 70 229(مقبول)79,70,229(مقبول)79 70,229(مقبول أيضاً)(79, 70, 229)– سيتم التعامل مع الأقواس كأحرف غير رقمية، وقد يسبب خطأ. الأفضل تجنب الأقواس.
إذا أردت إدخال قيمة مثل 0، فاكتب 0 فقط (وليس 00). الأداة تتعامل مع الصفر بشكل سليم.
إذا أخطأت في التنسيق، سترى رسالة الخطأ المذكورة أعلاه. أعد إدخال القيم مع مراعاة أن تكون بين 0 و255 وأن تفصلها فواصل أو مسافات.
العلاقة بين RGB و hex وفضاء الألوان sRGB
فضاء الألوان sRGB هو الفضاء اللوني الافتراضي في معظم الشاشات والأنظمة الرقمية. كل من RGB و hex يعبران عن نفس النقطة في هذا الفضاء باستخدام أساسيات (primaries) حمراء وخضراء وزرقاء محددة. التحويل بين الاثنين هو مجرد تغيير في التمثيل العددي: من النظام العشري إلى النظام الست عشري.
هذا يعني أن تحويل rgb(79, 70, 229) إلى #4F46E5 هو تحويل فقدان – أي أنه يمكنك الرجوع من #4F46E5 إلى rgb(79, 70, 229) تماماً بدون أي تغيير. الفرق الوحيد هو أن hex يستخدم أساساً 16 بدلاً من 10، وهو أقصر في التمثيل وأكثر ملاءمة للاستخدام في CSS والملفات النصية.
من المهم أن تعرف أن هذا لا ينطبق دائماً على تحويل RGB إلى CMYK أو إلى LAB، لأن هذه الفضاءات اللونية مختلفة جوهرياً. لكن بالنسبة لـ hex، لا يوجد أي تعقيد إضافي.
أسئلة شائعة (FAQ)
1. لماذا يظهر الرمز دائماً بستة أرقام بدلاً من ثلاثة؟
الأداة تتبع الممارسة الشائعة في CSS، حيث يُفضل استخدام ستة أرقام لأنها أكثر دقة وتجنب أي التباس. ومع ذلك، يمكنك إدخال الرمز الثلاثي (مثل #abc) في حقل hex، وسيُحوَّل تلقائياً إلى #aabbcc.
2. هل يمكنني الحصول على hex مع شفافية (alpha)؟
هذه الصفحة لا تنتج hex ثماني الأرقام (#RRGGBBAA). إذا كنت بحاجة إلى شفافية، استخدم دالة rgba() في CSS.
3. ماذا يحدث إذا أدخلت قيمة أكبر من 255؟
ستظهر رسالة خطأ تطلب منك إدخال أرقام بين 0 و255. لا يتم تحويل أي قيمة خارج هذا النطاق.
4. هل يمكنني نسخ الرمز hex مباشرة من الأداة؟
نعم، بعد التحويل، يظهر الرمز في حقل hex، ويمكنك نسخه باستخدام اختصار النسخ (Ctrl+C) بعد تحديده.
5. هل تعمل الأداة مع مسافات أو فواصل؟ ماذا عن القوسين؟
تعمل مع كل من المسافات والفواصل. لكن الأقواس مثل (79, 70, 229) قد تسبب خطأ، لذا من الأفضل إزالتها.
6. لماذا لا يتغير الرمز عند تحرير حقل hex مباشرة؟
بل يتغير. كل تعديل في أي حقل (RGB, HSL, hex, إلخ) يؤدي إلى تحديث جميع الحقول الأخرى فوراً. إذا غيرت حقل hex من #4F46E5 إلى #FF0000، سترى تحديث قيم RGB إلى 255, 0, 0.