HEX وRGB وHSL: فهم رموز ألوان الويب
أنت تحرر موقعًا وترى #FF5733 في CSS. أو تعمل مع مصمم يرسل لك rgb(255, 87, 51). أو أداة تصميم تعرض لونًا كـ hsl(11, 100%, 60%). كلها تصف نفس اللون بالضبط، أحمر-برتقالي زاهي، لكن بثلاث صيغ مختلفة.
كيف تعمل الألوان الرقمية
كل لون على شاشتك يُنشأ بمزج ثلاثة ألوان أساسية للضوء: الأحمر والأخضر والأزرق. هذا هو نموذج ألوان RGB.
ألوان HEX
رمز لون HEX هو سلسلة من ستة أحرف مسبوقة برمز المربع. الأحرف الستة مقسمة إلى ثلاثة أزواج، كل منها يمثل قناة لون بالنظام السداسي عشر.
تحليل #FF5733:
- FF = أحمر عند 255 (الحد الأقصى)
- 57 = أخضر عند 87
- 33 = أزرق عند 51
ألوان RGB
ترميز RGB يذكر مباشرة قيم قنوات الأحمر والأخضر والأزرق كأرقام عشرية من 0 إلى 255. الصيغة الأكثر بديهية.
ألوان HSL
HSL تعني تدرج اللون والتشبع والإضاءة. بدلاً من التفكير بمزج الأحمر/الأخضر/الأزرق، تصف HSL اللون بالطريقة التي يفكر بها البشر طبيعيًا.
هل تعلم؟ HSL تُعتبر أكثر صيغة ألوان ملائمة للمصممين لأنها تتطابق مع كيفية وصفنا الطبيعي للألوان. "اجعله أفتح" يعني زيادة قيمة L. "اجعله أقل حيوية" يعني تقليل قيمة S.
متى تستخدم أي صيغة
| الصيغة | الأفضل لـ | الميزة |
|---|---|---|
| HEX | أوراق أنماط CSS، مواصفات التصميم | مختصرة، مفهومة عالميًا |
| RGB | التلاعب البرمجي بالألوان | قيم قنوات بديهية |
| HSL | أعمال التصميم، إنشاء لوحات ألوان | تطابق إدراك الإنسان للألوان |
نصيحة حوّل بين HEX وRGB وHSL والمزيد: كيفية تحويل رموز الألوان. أدخل أي لون بأي صيغة واحصل على جميع الصيغ الأخرى فورًا.
ابدأ العمل مع الألوان:
جميع الأدوات مجانية وتعمل مباشرة في متصفحك.