RGB يعطيك ثلاث قنوات عشرية بين 0 و 255. التحويل إلى HEX يحول كل قناة إلى رقمين سداسيين، بحيث يتناسب اللون كاملًا في رمز واحد مضغوط يفهمه كل متصفح وأداة تصميم ودليل أنماط.
كيف يعمل تحويل RGB إلى HEX
- خذ قناة الأحمر وقسمها على 16: خارج القسمة يصبح الرقم الأول والباقي يصبح الرقم الثاني.
- اكتب الأرقام من 10 إلى 15 كالحروف A إلى F — فمثلاً 255 يصبح FF.
- كرر الأمر للأخضر والأزرق، وعوّض الأرقام المفردة بصفر أمامها: 5 يصبح 05.
- اجمع الأزواج الثلاثة وضع # في المقدمة.
مثال عملي
دقيق ما دامت القنوات أعدادًا صحيحة من 0 إلى 255. القيم الكسرية مثل rgb(79.5, 70, 229) تُقرب أولًا لأقرب عدد صحيح لأن HEX لا يمكنه تخزين قيم بينية.
شرح RGB و HEX
ما هو RGB؟
RGB يصف اللون كثلاث قنوات ضوئية — أحمر وأخضر وأزرق — كل واحدة من 0 إلى 255. يعكس ذلك طريقة عمل الشاشات فعليًا: كل القيم على 255 تعطي الأبيض، وكلها على 0 تعطي الأسود. RGB هو الخيار الصحيح عندما تحتاج لحسابات بالألوان، و rgba() تضيف الشفافية فوق ذلك.
- البناء:
- rgb(R, G, B)
- النطاق:
- 0–255 لكل قناة
- الأفضل لـ:
- البرمجة، canvas، الشفافية مع rgba()
ما هو HEX؟
كود HEX هو رقم سداسي عشري مكوّن من ست خانات يعبّر عن قنوات الأحمر والأخضر والأزرق في اللون مسبوقًا بعلامة #. كل زوج من الخانات يغطي قناة واحدة من 00 (لا شيء) إلى FF (كامل)، مما يوفّر نفس 16.7 مليون لون مثل RGB بصيغة أقصر بكثير. تُستخدم HEX بشكل افتراضي في CSS وأدوات التصميم وإرشادات العلامات التجارية.
- البناء:
- #RRGGBB
- النطاق:
- 00–FF لكل قناة
- الأفضل لـ:
- CSS، تسليم التصميم، إرشادات العلامة التجارية
جدول تحويل من RGB إلى HEX
أكثر ألوان CSS شيوعًا، محوّلة من RGB إلى HEX.
| اللون | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |