إذا سبق أن نسخت لوناً من برنامج تصميم إلى CSS فقد استخدمت رمز HEX. اللون #4169E1 مثلاً ما هو إلا طريقة مختصرة لكتابة قنوات اللون الثلاث في نظام RGB.
كيف يُبنى رمز HEX
يبدأ الرمز بعلامة # تليها ست خانات بالنظام الست عشري، وهو نظام عدّ أساسه 16 يستخدم الأرقام من 0 إلى 9 والحروف من A إلى F. تنقسم الخانات الست إلى ثلاثة أزواج:
- الزوج الأول يمثل الأحمر.
- الزوج الثاني يمثل الأخضر.
- الزوج الثالث يمثل الأزرق.
يتراوح كل زوج بين 00 (صفر، بلا ضوء) وFF (255، الشدة الكاملة). لذلك #FF0000 أحمر نقي، و#000000 أسود، و#FFFFFF أبيض.
تحويل HEX إلى RGB يدوياً
لتحويل زوج اضرب الخانة الأولى في 16 وأضف الخانة الثانية. بالنسبة إلى #4169E1:
| الزوج | الحساب | القيمة |
|---|---|---|
| 41 | 4 × 16 + 1 | 65 (أحمر) |
| 69 | 6 × 16 + 9 | 105 (أخضر) |
| E1 | 14 × 16 + 1 | 225 (أزرق) |
النتيجة هي rgb(65, 105, 225)، أي لون CSS المسمى الأزرق الملكي. يمكنك التحقق من أي قيمة فوراً عبر محول HEX إلى RGB.
رموز HEX المختصرة
عندما تتكون كل خانتين من رقمين متماثلين يسمح CSS بكتابة اختصار من ثلاث خانات: #FFCC00 يمكن كتابته #FC0، ويوسّع المتصفح كل خانة بتكرارها.
رمز HEX مع الشفافية
يقبل CSS الحديث أيضاً رموزاً من ثماني خانات يمثل فيها الزوج الأخير الشفافية. فالرمز #4169E180 هو الأزرق الملكي بعتامة تقارب 50%. بعض الأدوات القديمة تتجاهل زوج الشفافية، لذا تحقق قبل الاعتماد عليه.
لماذا ينتشر HEX إلى هذا الحد؟
- قصير وسهل النسخ بين الأدوات.
- مدعوم في كل مكان: CSS وSVG وبرامج التصميم ومعظم مكتبات البرمجة.
- يصف الألوان نفسها التي يصفها RGB تماماً، فلا يضيع شيء.
عيبه الأساسي صعوبة تعديله بالعين؛ فلجعل اللون أفتح قليلاً يكون الانتقال إلى HSL أسهل. اطلع على دليلنا الفرق بين RGB وHSL.
قائمة سريعة
- رموز HEX لا تتأثر بحالة الأحرف:
#ff7f50و#FF7F50هما اللون المرجاني نفسه. - اكتب دائماً علامة
#في CSS. - استخدم منتقي الألوان لإيجاد الرمز بصرياً.
