🎨
← العودة للأدلة

HEX مقابل RGB مقابل HSL: أي صيغة ألوان يجب أن تستخدم؟

· وسوم: hex-vs-rgb-vs-hsl, color-formats, css, web-development, color-converter

HEX مقابل RGB مقابل HSL: أي صيغة ألوان يجب أن تستخدم؟

تقدم CSS طرقًا متعددة لتعريف الألوان، لكن الصيغ الثلاث الأكثر شيوعًا هي HEX و RGB و HSL. كل صيغة لها نقاط قوة مميزة، ومعرفة متى تستخدم كل منها يمكن أن يحسن بشكل كبير من قابلية صيانة أوراق الأنماط وقدرتك على إنشاء أنظمة ألوان ديناميكية. يحلل هذا الدليل كل صيغة حتى تتمكن من اختيار الصيغة المناسبة لأي موقف.

صيغة ألوان HEX: المعيار الصناعي

ألوان HEX (الست عشرية) هي الصيغة الأكثر استخدامًا في تصميم الويب. يُكتب اللون الست عشري على شكل # متبوعًا بستة أرقام ست عشرية تمثل قيم الأحمر والأخضر والأزرق بهذا الترتيب.

#FF5733
  • #FF — أحمر (255 بالنظام العشري)
  • #57 — أخضر (87 بالنظام العشري)
  • #33 — أزرق (51 بالنظام العشري)

تنويعات HEX

تدعم HEX عدة ترميزات لاحتياجات مختلفة:

/* الست عشري القياسي بستة أرقام */
color: #FF5733;

/* المختصر — الأزواج المتطابقة تنهار إلى ثلاثة أرقام */
color: #F53; /* يتوسع إلى #FF5533 */

/* الست عشري بثمانية أرقام مع قناة ألفا */
color: #FF573380; /* شفافية 50% */

HEX المختصر يعمل عندما يستخدم كل زوج أحرفًا متطابقة: #AABBCC يصبح #ABC. هذا مجرد اصطلاح لتوفير المساحة مدعوم من جميع المتصفحات.

HEX بثمانية أرقام (#RRGGBBAA) أضاف شفافية ألفا. تتراوح قيمة ألفا من 00 (شفاف تمامًا) إلى FF (معتم تمامًا). دعم المتصفح لـ hex بثمانية أرقام ممتاز في جميع المتصفحات الحديثة.

المختصر بأربعة أرقام (#RGBA) موجود أيضًا: #F538 يتوسع إلى #FF553388.

متى تستخدم HEX

  • النسخ واللصق من أدوات التصميم — Figma و Sketch و Adobe XD جميعها تخرج hex افتراضيًا
  • ألوان العلامة التجارية المرمزة بشكل ثابت — Hex لا لبس فيه ومضغوط للقيم التي لا تتغير أبدًا
  • التوثيق والنماذج الأولية — Hex هي الصيغة الأكثر تمييزًا بين المصممين والمطورين
  • خصائص CSS المخصصة — تخزين رموز العلامة التجارية في hex ممارسة شائعة

متى تتجنب HEX

  • معالجة الألوان برمجيًا — يتطلب تعديل القنوات الفردية تحليل السلاسل النصية
  • إنشاء أنظمة الألوان — يتضمن توليد المتغيرات الأفتح أو الأغمق رياضيات غير بسيطة
  • توصيل نية اللون — لا يعطي hex أي معلومات دلالية عن اللون

صيغة ألوان RGB: التحكم في القنوات

RGB تعني الأحمر والأخضر والأزرق. في CSS، تُكتب كدالة بقيم من 0 إلى 255 أو نسب مئوية (0% إلى 100%).

/* الصيغة القديمة المفصولة بفواصل */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* الصيغة الحديثة المفصولة بمسافات */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* القيم المئوية */
color: rgb(100% 34% 20%);

تحسينات صيغة RGB الحديثة

قامت مواصفة CSS Color Level 4 بتحديث دالة rgb() بطريقتين مهمتين:

  1. قيم مفصولة بمسافات — لم تعد الفواصل مطلوبة، مما يجعل الصيغة أنظف
  2. ألفا مفصولة بشرطة مائلة — لم يعد الاسم المستعار rgba() مطلوبًا؛ rgb() الآن تقبل قناة ألفا اختيارية

كلتا الصيغتين القديمة والحديثة مدعومتان بالكامل، لكن الصيغة الحديثة موصى بها للكود الجديد.

متى تستخدم RGB

  • Canvas و WebGL — واجهات برمجة بيانات الصور تعيد قيم البكسل بـ RGB
  • تعديلات الألوان الرقمية — عندما يكون لديك قيم الأحمر والأخضر والأزرق مخزنة كمتغيرات منفصلة
  • الترجمة من مواصفات التصميم — بعض أنظمة التصميم تحدد الألوان كثلاثيات RGB
  • العمل مع منتقي الألوان — العديد من واجهات منتقي الألوان تستخدم منزلقات 0-255

متى تتجنب RGB

  • إنشاء لوحات ألوان متماسكة — تعديل القنوات الثلاث بشكل مستقل يجعل التعديلات المتسقة صعبة
  • قابلية القراءة البشرية — rgb(123, 45, 67) لا يعطي أي إحساس فوري باللون الذي يمثله

صيغة ألوان HSL: ألوان صديقة للإنسان

HSL تعني درجة اللون والتشبع والإضاءة. هذه الصيغة أكثر بديهية للبشر لأنها تفصل اللون نفسه (درجة اللون) عن شدته (التشبع) وسطوعه (الإضاءة).

/* الصيغة القديمة */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* الصيغة الحديثة */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

فهم قنوات HSL

درجة اللون (0-360) — زاوية اللون على عجلة الألوان. هذا هو مكون "ما هو اللون":

| قيمة الدرجة | اللون | |-----------|---------| | 0 أو 360 | أحمر | | 30 | برتقالي | | 60 | أصفر | | 120 | أخضر | | 180 | سماوي | | 240 | أزرق | | 300 | أرجواني |

التشبع (0-100%) — مدى شدة أو حيوية اللون. 0% ينتج درجة من الرمادي؛ 100% هي أنقى نسخة من درجة اللون.

الإضاءة (0-100%) — مدى فتح أو غمق اللون. 0% دائمًا أسود، 50% هي النسخة "العادية" من درجة اللون، و 100% دائمًا أبيض.

لماذا HSL متفوقة لأنظمة الألوان

HSL تجعل المهام الصعبة في HEX أو RGB بسيطة للغاية:

/* لون العلامة التجارية الرئيسي */
--brand: hsl(220, 80%, 50%);

/* حالة التحويم — أفتح قليلاً */
--brand-hover: hsl(220, 80%, 60%);

/* حالة النشاط — أغمق قليلاً */
--brand-active: hsl(220, 80%, 40%);

/* حالة التعطيل — منخفض التشبع */
--brand-disabled: hsl(220, 30%, 70%);

/* تظليل الخلفية — فاتح جدًا */
--brand-bg: hsl(220, 40%, 95%);

مع HSL، كل متغير هو تغيير متغير واحد. هذا مستحيل مع HEX ومرهق مع RGB.

متى تستخدم HSL

  • إنشاء لوحات الألوان — HSL هو المعيار الفعلي لتوليد رموز التصميم
  • السمات والوضع الداكن — استبدل قيم الإضاءة لإنشاء متغيرات الوضع الداكن
  • حالات التحويم والتركيز — اضبط الإضاءة بنسبة مئوية ثابتة
  • تعديلات إمكانية الوصول — زد تباين الإضاءة دون تغيير اللون
  • منتقيات الألوان التفاعلية — منزلقات HSL أكثر بديهية من منزلقات RGB

جدول مقارنة سريع

| الميزة | HEX | RGB | HSL | |---------|-----|-----|-----| | قابلية القراءة على مستوى البكسل | ضعيفة | متوسطة | جيدة | | دلالات القنوات | مبهمة | رقمية | إدراكية | | التعديل البرمجي | صعب | متوسط | سهل | | شفافية ألفا | hex بثمانية أرقام | rgb(R G B / A) | hsl(H S% L% / A) | | دعم المتصفح | ممتاز | ممتاز | ممتاز | | الصيغة الحديثة | لا | نعم | نعم | | افتراضي أدوات التصميم | نعم | شائع | نادر | | ملاءمة نظام الألوان | ضعيفة | مقبولة | ممتازة |

دعم المتصفح: الثلاثة جميعها آمنة

تتمتع HEX و RGB و HSL بدعم متصفح متطابق. تعمل الثلاثة جميعها في كل متصفح صدر منذ Internet Explorer 9. الصيغة الحديثة المفصولة بمسافات (rgb(255 0 0 / 0.5)) مدعومة في جميع المتصفحات التي صدرت منذ عام 2020. لا يوجد سبب توافقي لاختيار واحدة على الأخرى.

إطار قرار عملي

اختر صيغتك بناءً على ما تفعله:

  1. تنسخ من نموذج تصميم؟ استخدم HEX — إنها ما تخرجه أدوات التصميم.
  2. تبني نظام رموز تصميم؟ استخدم HSL — إنها تجعل توليد اللوحات بسيطًا.
  3. تعمل مع canvas أو بيانات الصور؟ استخدم RGB — واجهات برمجة البكسل تستخدم RGB بشكل أصلي.
  4. تكتب قاعدة نمط لمرة واحدة؟ استخدم HEX — إنها الأكثر إيجازًا.
  5. تنشئ انتقالات لونية ديناميكية؟ استخدم HSL — استيفاء درجة اللون ينتج تأثيرات قوس قزح؛ استيفاء RGB ينتج وسائط موحلة.

التحويل بين أي صيغة

استخدم محول الألوان المجاني عبر الإنترنت الخاص بنا للتحويل الفوري بين HEX و RGB و HSL وصيغ الألوان الأخرى في CSS. لا مزيد من الرياضيات اليدوية أو البحث في أدوات مطوري المتصفح.