شرح صيغ الألوان: HEX و RGB و HSL

إذا سبق لك تنسيق موقع، فقد صادفت أكواد ألوان مثل #4f46e5. لكنها مجرد واحدة من ثلاث طرق شائعة لوصف اللون على الشاشة. معرفة الثلاثة تجعلك أسرع وأكثر مرونة.

HEX — كلاسيكية الويب

كود HEX قيمة من ست خانات مثل #4f46e5، حيث يمثّل كل زوج الأحمر والأخضر والأزرق. إنها مختصرة ومدعومة عالميًا، ولهذا هي الصيغة الأكثر شيوعًا في CSS وأدوات التصميم.

RGB — كيف تعمل الشاشات فعلًا

تصف RGB اللون بثلاثة أرقام من 0–255 للأحمر والأخضر والأزرق، مثل rgb(79, 70, 229). تتوافق مباشرة مع كيفية مزج الشاشة للضوء، وتضيف صيغة RGBA الشفافية.

HSL — المفضّلة لدى المصمّمين

HSL اختصار للصبغة والتشبّع والإضاءة — مثل hsl(243, 75%, 59%). إنها الأكثر بديهية للبشر: لجعل اللون أفتح ترفع الإضاءة فقط، ولتغييره تبدّل الصبغة. هذا يجعل بناء لوحات الألوان أسهل بكثير.

التحويل بينها

نادرًا ما تحتاج للتحويل يدويًا. يعرض محوّل الألوان قيم HEX و RGB و HSL لأي لون جنبًا إلى جنب، ويتيح لك مولّد التدرّجات مزج اثنين منها في كود CSS جاهز للنسخ.

أيها تستخدم؟

استخدم HEX للألوان الثابتة السريعة للعلامة التجارية؛ وRGB (أو RGBA) عندما تحتاج شفافية؛ وHSL عندما تريد تعديل أو توليد درجات مرتبطة. كلها تنتج الألوان نفسها — اختر ما يسهّل مهمتك الحالية.