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