محول RGB إلى HEX
تحويل قيم RGB إلى أكواد ألوان HEX.
محول RGB إلى HEX
جاهزمحوّل RGB إلى HEX أونلاين — تحويل ألوان RGB إلى أكواد HEX مجاناً
محوّل RGB إلى HEX من Toolsiro يُحوِّل قيم الألوان الحمراء والخضراء والزرقاء إلى أكواد ألوان سداسية عشرية فوراً في متصفحك. أدخل قيم RGB باستخدام المنزلقات أو مدخلات الأرقام، وتتحدث شفرة HEX في الوقت الفعلي. تتضمن معاينة بقعة لونية مباشرة ونسخاً بنقرة واحدة ومخرجات بتنسيقات متعددة.
RGB وHEX تنسيقَي الألوان السائدَين في تطوير الويب، والتحويل بينهما من أكثر المهام المتعلقة بالألوان شيوعاً التي يواجهها المصممون والمطورون يومياً.
كيف يعمل تحويل RGB إلى HEX
التحويل من RGB إلى HEX عملية رياضية مباشرة. كل من قنوات RGB الثلاث (أحمر، أخضر، أزرق) تحمل قيمة من 0 إلى 255 — بايت واحد من المعلومات. لتحويل كل قناة إلى سداسية عشرية: اقسم القيمة على 16 للحصول على الرقم السداسي الأول (الحاصل)، وخذ الباقي للرقم الثاني. كود HEX النهائي يُسلسِل جميع القيم السداسية ذات الرقمين مع بادئة #.
مثلاً، تحويل RGB(99, 102, 241): الأحمر 99 ÷ 16 = 6 باقٍ 3 → 63. الأخضر 102 ÷ 16 = 6 باقٍ 6 → 66. الأزرق 241 ÷ 16 = 15 باقٍ 1 → F1. النتيجة: #6366F1. الأرقام السداسية العشرية 0–9 تعمل كأرقام عادية؛ A = 10، B = 11، C = 12، D = 13، E = 14، F = 15.
لماذا يُمثِّل RGB وHEX نفس الألوان بشكل مختلف
RGB وHEX ليسا نظامَي ألوان مختلفَين — إنهما ترميزان مختلفان لنفس نموذج الألوان تماماً. كلاهما يُمثِّل الألوان كتركيبة من شدات الضوء الأحمر والأخضر والأزرق. الفرق تمثيلي بحت: RGB يستخدم أعداداً صحيحة عشرية (بالأساس 10) من 0–255 لكل قناة، بينما HEX يستخدم أزواجاً سداسية عشرية (بالأساس 16) من 00–FF.
HEX مفضَّل في CSS وHTML لأنه مدمج (6 أحرف مقابل ما يصل إلى 11 لـRGB). RGB مفضَّل في JavaScript وكود التصميم لأن معالجة القنوات الفردية كأعداد صحيحة أكثر طبيعية برمجياً.
RGB في CSS
تدعم CSS ألوان RGB بصياغات متعددة. الدالة الكلاسيكية rgb() تأخذ ثلاث قيم مفصولة بفواصل: color: rgb(99, 102, 241); أضاف CSS Color Level 4 صياغة حديثة مفصولة بمسافات: color: rgb(99 102 241); دالة rgba() تضيف قناة ألفا (التعتيم): color: rgba(99, 102, 241, 0.8); لتعتيم 80%.
كل هذه تُنتج نفس اللون بالضبط مثل #6366F1 في HEX. الاختيار بين RGB وHEX في CSS يتعلق أساساً بالتفضيل الشخصي واتفاقية الفريق، باستثناء الشفافية — rgba() تبقى أكثر قراءةً لمعظم المطورين.
نموذج اللون RGB — كيف تخلق الشاشات الألوان
كل بكسل على الشاشة الحديثة يُصدر ضوءاً أحمر وأخضر وأزرق بشدات قابلة للتحكم بشكل مستقل. العين البشرية تحتوي ثلاثة أنواع من المستقبلات اللونية (الخلايا المخروطية) الأكثر حساسية لأطوال موجية الأحمر والأخضر والأزرق — وهذا بالضبط سبب فعالية نموذج RGB لتكنولوجيا العرض.
RGB نموذج لون إضافي: إضافة المزيد من الضوء تزيد السطوع. أحمر + أخضر = أصفر. أحمر + أزرق = قرمزي. أخضر + أزرق = سماوي. الحد الأقصى للجميع = أبيض. الجميع عند 0 = أسود. هذا عكس مزج الحبر (اللون التقليصي)، وهذا سبب ظهور نفس اللون بشكل مختلف على الشاشة مقارنةً بالطباعة.
متى تُحوِّل RGB إلى HEX عملياً
تأليف أوراق أنماط CSS: أدوات التصميم مثل Figma وSketch وAdobe XD كثيراً ما تعرض الألوان بـRGB عند فحص العناصر، لكن ملفات CSS عادةً تستخدم HEX. تحويل قيم RGB من مواصفات التصميم إلى HEX خطوة عمل ثابتة للمطورين الأماميين.
توثيق ألوان العلامة التجارية: إرشادات العلامة التجارية عادةً توثق الألوان الأساسية بتنسيقات متعددة — CMYK للطباعة وPantone للمواد المادية وRGB للشاشات الرقمية وHEX لاستخدام الويب.
اختصار كود HEX
عندما يكون كلا رقمَي كل زوج في لون HEX متطابقَين، يمكن اختصار الكود إلى ثلاثة أحرف. #FFFFFF يُختصر إلى #FFF. #000000 إلى #000. #FF0000 (أحمر) إلى #F00. يغطي هذا الاختصار 4,096 لوناً فقط من 16.7 مليون كامل.
أسئلة شائعة
ما كود HEX لـRGB(255, 0, 0)؟ #FF0000 — أحمر خالص. FF هو التمثيل السداسي العشري لـ255.
ما معنى #000000 بـRGB؟ RGB(0, 0, 0) — أسود خالص. جميع القنوات عند 0 يعني عدم وجود ضوء.
ما كود HEX للأبيض؟ #FFFFFF — RGB(255, 255, 255). أقصى شدة للقنوات الثلاث تُنتج ضوءاً أبيض.
كيف أضيف شفافية للون HEX؟ HEX المكون من 6 أرقام لا يدعم الشفافية. أضف رقمَين سداسيَّين في النهاية لقناة ألفا: #RRGGBBAA. بدلاً من ذلك، استخدم rgba() في CSS التي تتعامل مع ألفا بشكل أكثر قراءةً.
لماذا يبدو اللون مختلفاً على الشاشة مقارنةً بالطباعة؟ الشاشات تستخدم نموذج RGB الإضافي (الضوء)، بينما الطباعة تستخدم نموذج CMYK التقليصي (الحبر). للحصول على ألوان دقيقة للطباعة، يجب تحويل قيم RGB إلى CMYK باستخدام ملف تعريف اللون.