HEX أم RGB أم HSL: الفرق بينها ومتى تستخدم كل صيغة
نفس اللون بالظبط، ثلاث طرق مختلفة لكتابته. لو بتشتغلي بـCSS، هتقابلي الصيغ التلاتة دي باستمرار، وفهم الفرق بينهم هيسهّل عليك تعديل الألوان وفهم كود مكتوب من مطور تاني.
محتوى المقال
صيغة HEX
صيغة HEX (السداسية عشرية) بتمثل اللون بـ6 خانات بعد علامة "#"، كل زوج خانتين بيمثل قيمة الأحمر والأخضر والأزرق (من 00 لـFF). هي الصيغة الأشهر تاريخيًا وبتشاهدها في أغلب أدوات التصميم وأكواد المواقع الجاهزة، لكن صعبة القراءة والتعديل اليدوي البديهي.
صيغة RGB وRGBA
صيغة RGB بتمثل نفس الفكرة (أحمر، أخضر، أزرق) لكن بأرقام عشرية عادية من 0 لـ255 بدل النظام السداسي عشري، وده بيخليها أسهل قراءة للعين البشرية. صيغة RGBA بتضيف رقم رابع (Alpha) للتحكم في شفافية اللون من 0 (شفاف تمامًا) لـ1 (معتم تمامًا).
صيغة HSL وHSLA
صيغة HSL بتمثل اللون بطريقة مختلفة كليًا: الصبغة (Hue) كزاوية من 0 لـ360 درجة على عجلة الألوان، التشبع (Saturation) كنسبة مئوية لقوة اللون، والإضاءة (Lightness) كنسبة مئوية للفتحة أو الغمقان. الصيغة دي أسهل بكتير لو عايزة تعدّلي درجة لون موجود بدون ما تغيّري باقي خصائصه.
مقارنة سريعة: أيهما تختاري؟
| الصيغة | سهولة القراءة | دعم الشفافية | الأفضل لـ |
|---|---|---|---|
| HEX | متوسطة | محدود | نسخ ولصق سريع من أدوات التصميم |
| RGB/RGBA | جيدة | ممتاز (RGBA) | التحكم الدقيق بالشفافية |
| HSL/HSLA | ممتازة | ممتاز (HSLA) | تعديل درجات اللون يدويًا |
كيف تحوّل بين الصيغ الثلاث بسهولة؟
باستخدام محول الألوان على فورا.tools:
- الصق كود اللون بأي صيغة (HEX أو RGB أو HSL).
- شاهد التحويل الفوري لباقي الصيغ الاتنين.
- شاهد معاينة حية للون نفسه قبل النسخ.
أسئلة شائعة
إيه أكتر صيغة شائعة الاستخدام في CSS؟
HEX هي الأكتر شيوعًا تاريخيًا، لكن RGB وHSL بقوا مستخدمين أكتر مع الحاجة للتحكم في الشفافية أو السطوع.
هل ممكن أضيف شفافية للون بصيغة HEX؟
نعم، فيه صيغة HEX ممتدة بـ8 خانات، لكنها أقل شيوعًا ودعمها محدود مقارنة بـRGBA.
ليه HSL أسهل لتعديل درجة اللون يدويًا؟
لأنها بتفصل الصبغة والتشبع والإضاءة كمكونات منفصلة — تعديل رقم واحد بيديكِ نتيجة متوقعة بسهولة.
هل تحويل لون من صيغة لأخرى بيغيّر اللون الفعلي؟
لا، التحويل هو نفس اللون بالضبط بس ممثّل رياضيًا بطريقة مختلفة — مفيش أي فقدان في اللون النهائي.
خلاصة
الثلاث صيغ بيمثلوا نفس الألوان بالظبط، والاختيار بينهم بيرجع لاحتياجك الفعلي — HEX للسرعة، RGB للشفافية، وHSL لتعديل درجات اللون بسهولة وبداهة.