HEX vs RGB vs HSL — دليل شامل لصيغ الألوان في تصميم الويب
تعرف على الفروقات بين صيغ الألوان HEX وRGB وHSL. اكتشف متى تستخدم كل صيغة وكيفية التحويل بينها لتصميم وتطوير الويب.
لماذا يجب فهم صيغ الألوان
الألوان هي أساس التصميم المرئي. سواء كنت تبني موقعًا إلكترونيًا أو تصمم تطبيقًا للهاتف أو تنشئ أعمالًا فنية رقمية، ستواجه باستمرار صيغ ألوان مختلفة. الصيغ الثلاث الأكثر شيوعًا على الويب هي HEX وRGB وHSL.
كل صيغة تمثل نفس الألوان بطريقة مختلفة. يعتمد الاختيار على سير عملك وأدواتك وأهدافك.
ما هو HEX؟
HEX (ست عشري) هو صيغة الألوان الأكثر استخدامًا على الويب. يستخدم رمزًا من ستة أحرف مسبوقًا بعلامة #، مثل #FF0000 للأحمر و#00FF00 للأخضر و#0000FF للأزرق.
HEX هو الخيار الافتراضي لمعظم مطوري الويب لأنه مختصر ومدعوم عالميًا وسهل النسخ واللصق من أدوات التصميم.
ما هو RGB؟
RGB اختصار لـ Red (أحمر) وGreen (أخضر) وBlue (أزرق). في CSS، يُكتب الأحمر النقي كـ rgb(255, 0, 0). تتراوح كل قيمة من 0 إلى 255.
يعتمد RGB على نموذج الألوان الجمعي. كما يدعم قناة ألفا للشفافية: rgba(255, 0, 0, 0.5) ينشئ أحمر شبه شفاف.
ما هو HSL؟
HSL اختصار لـ Hue (الصبغة) وSaturation (التشبع) وLightness (الإضاءة). يُكتب الأحمر النقي كـ hsl(0, 100%, 50%). الصبغة هي زاوية على عجلة الألوان من 0 إلى 360 درجة.
HSL هو الصيغة الأكثر بديهية للبشر. تريد لونًا أغمق؟ قلل الإضاءة. تريد نغمة أهدأ؟ قلل التشبع.
المقارنة: HEX vs RGB vs HSL
الصيغ الثلاث يمكنها تمثيل نفس الـ 16.7 مليون لون. الفرق في سهولة القراءة وسير العمل.
HEX الأكثر اختصارًا لكنه صعب القراءة. RGB يتوافق مع طريقة عرض الشاشات للألوان. HSL الأكثر سهولة للبشر.
متى تستخدم كل صيغة؟
استخدم HEX لكتابة CSS مختصر ومعياري. استخدم RGB عند الحاجة للشفافية أو التلاعب البرمجي بالألوان. استخدم HSL لأنظمة التصميم والسمات وتغييرات الألوان الديناميكية.
حوّل بين الصيغ فورًا
لا تحتاج لحفظ صيغ التحويل. أداة منتقي الألوان لدينا تتيح لك اختيار أي لون ورؤية قيمه بصيغ HEX وRGB وHSL وCMYK وغيرها فورًا. جرب أدوات الألوان المجانية لدينا.