كيفية تحويل رموز ألوان HEX إلى RGB
HEX وRGB طريقتان لكتابة الألوان نفسها بالضبط. يتنقّل المصممون والمطوّرون باستمرار بين الاثنين — HEX في أوراق CSS، RGB في رسوم JavaScript المتحركة، HSL في أدوات التصميم. يجعل فهم الرابط بينهما العمل مع الألوان أبسط بكثير.
كيف يعمل HEX
رمز لون HEX مثل #FF5733 هو رقم سداسي عشري من 6 أرقام يمثّل قنوات الأحمر والأخضر والأزرق:
| الجزء | Hex | عشري | القناة |
|---|---|---|---|
| FF | FF | 255 | أحمر |
| 57 | 57 | 87 | أخضر |
| 33 | 33 | 51 | أزرق |
تتراوح كل قناة من 00 (0، لا لون) إلى FF (255، أقصى شدة). إذًا #FF5733 يعني أحمر كامل، أخضر متوسط، قليل من الأزرق — مما يعطي أحمرًا برتقاليًا دافئًا.
كيفية تحويل HEX إلى RGB
- أدخل رمز HEX الخاص بك — اكتب أو الصق رمزًا مثل #FF5733، أو استخدم منتقي الألوان.
- راجع قيم RGB — اطّلع على المعادلات بالأحمر والأخضر والأزرق (0-255 لكل منها).
- انسخ بأي تنسيق — احصل على القيم في
rgb(255, 87, 51)أو القنوات الفردية أو تنسيقات أخرى مثل HSL.
رموز الألوان الشائعة
| اللون | HEX | RGB |
|---|---|---|
| أبيض | #FFFFFF | rgb(255, 255, 255) |
| أسود | #000000 | rgb(0, 0, 0) |
| أحمر | #FF0000 | rgb(255, 0, 0) |
| أخضر | #00FF00 | rgb(0, 255, 0) |
| أزرق | #0000FF | rgb(0, 0, 255) |
| أصفر | #FFFF00 | rgb(255, 255, 0) |
نصائح
- استخدم HEX في CSS —
color: #FF5733أنظف وأكثر شيوعًا منcolor: rgb(255, 87, 51)في أوراق الأنماط. - استخدم RGB للشفافية — عندما تحتاج إلى ألوان شبه شفافة، استخدم
rgba(255, 87, 51, 0.5). لا توجد طريقة لإضافة ألفا في HEX القياسي (على الرغم من وجود HEX من 8 أرقام، يختلف دعم المتصفح). - اختصار 3 أرقام —
#F00يعادل#FF0000. استخدمه عندما يكون لكل زوج أرقام متطابقة لتوفير المساحة. - منتقي الألوان أسرع — إذا كنت تبحث عن اللون الصحيح، استخدم المنتقي البصري بدلًا من تخمين قيم HEX. انسخ الرمز عندما تكون راضيًا.
الأسئلة الشائعة
كيف أحوّل HEX إلى RGB يدويًا؟
قسّم رمز hex إلى ثلاثة أزواج (مثل #FF8800 يصبح FF و88 و00). حوّل كل زوج من الأساس 16 إلى الأساس 10. FF = 255، 88 = 136، 00 = 0. النتيجة هي rgb(255, 136, 0).
ماذا عن رموز HEX من 3 أرقام؟
HEX من 3 أرقام هو اختصار حيث يتم مضاعفة كل رقم. #F80 يعادل #FF8800. تتعامل معظم المحوّلات مع كلا التنسيقين تلقائيًا.
متى أستخدم HEX أم RGB؟
HEX أكثر إيجازًا وشيوعًا في CSS. RGB مفضّل عندما تحتاج إلى التلاعب بالقنوات بشكل فردي في الكود أو استخدام rgba() للشفافية. كلاهما يمثّل الألوان نفسها.
ماذا يمثّل الرمز # في رمز HEX؟
علامة الشباك (#) هي بادئة تشير إلى أن القيمة هي رمز لون سداسي عشري. ليست جزءًا من القيمة نفسها. تقبل بعض الأدوات الرموز مع أو بدون علامة شباك.