FW فورا.tools

HEX أم RGB أم HSL: إيه الفرق ومتى تستخدمي كل صيغة

#4F3FF0 79,63,240 245°,84%,60%

نفس اللون بالظبط، ثلاث طرق مختلفة لكتابته. لو بتشتغلي بـ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:

  1. الصق كود اللون بأي صيغة (HEX أو RGB أو HSL).
  2. شاهد التحويل الفوري لباقي الصيغ الاتنين.
  3. شاهد معاينة حية للون نفسه قبل النسخ.
جرّبي محول الألوان الآن
تحويل فوري بين HEX وRGB وHSL مع معاينة مباشرة
افتح الأداة

أسئلة شائعة

إيه أكتر صيغة شائعة الاستخدام في CSS؟

HEX هي الأكتر شيوعًا تاريخيًا، لكن RGB وHSL بقوا مستخدمين أكتر مع الحاجة للتحكم في الشفافية أو السطوع.

هل ممكن أضيف شفافية للون بصيغة HEX؟

نعم، فيه صيغة HEX ممتدة بـ8 خانات، لكنها أقل شيوعًا ودعمها محدود مقارنة بـRGBA.

ليه HSL أسهل لتعديل درجة اللون يدويًا؟

لأنها بتفصل الصبغة والتشبع والإضاءة كمكونات منفصلة — تعديل رقم واحد بيديكِ نتيجة متوقعة بسهولة.

هل تحويل لون من صيغة لأخرى بيغيّر اللون الفعلي؟

لا، التحويل هو نفس اللون بالضبط بس ممثّل رياضيًا بطريقة مختلفة — مفيش أي فقدان في اللون النهائي.

خلاصة

الثلاث صيغ بيمثلوا نفس الألوان بالظبط، والاختيار بينهم بيرجع لاحتياجك الفعلي — HEX للسرعة، RGB للشفافية، وHSL لتعديل درجات اللون بسهولة وبداهة.

إعلان · Advertisement