محوّل الألوان (HEX، RGB، HSL)

تمزج سير عمل التصميم والتطوير بين عدة طرق لوصف نفس اللون الذي يظهر على الشاشة. HEX (#RRGGBB) مدمج في لوحات فحص CSS وFigma. يسرد نظام RGB القنوات الحمراء والخضراء والزرقاء من 0 إلى 255 - وهي اللغة الأصلية للشاشات وواجهات برمجة التطبيقات القماشية. يعبر HSL عن درجة اللون على عجلة 0–360 درجة، والتشبع بنسبة 0–100% من الحيوية، والخفة بنسبة 0–100%، وهو ما يجده العديد من المصممين أسهل عند تعديل الصبغات دون انحراف اللون.

يتم تعيين كافة التنسيقات الثلاثة في هذه الأداة إلى نفس نطاق sRGB عند تحويلها بشكل صحيح. HEX وRGB عبارة عن معكوسين تمامًا بدقة 8 بت. يستخدم HSL رياضيات الفاصلة العائمة داخليًا؛ بعد التحويل ذهابًا وإيابًا، قد ترى اختلافًا في قيم القناة بخطوة واحدة - وهو أمر طبيعي بالنسبة لسير عمل تحرير HSL.

قم بتبديل التحكم المجزأ في الإدخال بين HEX وRGB اعتمادًا على ما توفره عملية التسليم الخاصة بك. في الوضع HEX، اكتب مع التجزئة أو بدونها - يعمل كل من #3B82F6 و3B82F6، كما يفعل الاختصار المكون من ثلاثة أرقام #3BF الممتد إلى #33BBFF. في وضع RGB، أدخل القنوات بشكل منفصل؛ تقوم الأداة بإخراج الأحرف الكبيرة HEX بالإضافة إلى سلسلة rgb() CSS وتفاصيل HSL.

مثال عملي مع حقل HEX الافتراضي #3B82F6: أحمر = 0x3B = 59، أخضر = 0x82 = 130، أزرق = 0xF6 = 246. يعرض الملخص RGB(59, 130, 246) - وهو لون أزرق مشبع شائع في لوحات Tailwind UI. يهبط HSL بالقرب من 217 درجة لون، وتشبع 91%، وخفة 60%. قم بالتبديل إلى وضع RGB مع قيم القناة هذه وستحصل على نفس HEX مرة أخرى.

يعد HSL مفيدًا عند إنشاء رموز التصميم: ارفع الإضاءة لجعل #3B82F6 حالة تمرير دون اختيار لون جديد. تشبع أقل للخلفيات الصامتة. بالنسبة للموضوعات البرمجية، تقوم العديد من الفرق بتخزين HSL في خصائص CSS المخصصة لأن بناء جملة ألفا `hsl(217 91% 60% / 0.5)` يُقرأ بوضوح.

تتضمن الأخطاء الشائعة افتراض أن HEX يتضمن ألفا (#RRGGBBAA المكون من ثمانية أرقام غير مدعوم هنا)، وخلط 0-1 RGB المقيس من بعض واجهات برمجة التطبيقات الرسومية دون الضرب في 255، ومقارنة عينات Pantone المطبوعة بست عشرية sRGB على شاشة غير معايرة. ألوان الويب هي sRGB ذات الضوء المنبعث - يحتاج تحويل طباعة CMYK إلى ملف تعريف منفصل.

يكرر الاختصار السداسي المكون من ثلاثة أرقام كل قضمة - يصبح #ABC #AABBCC. تؤدي الأحرف غير الصالحة أو الطول الخاطئ إلى عرض عنوان متقطع يطلب لونًا صالحًا مثل #3B82F6. لم يتم تحليل ألوان CSS المسماة (rebeccapurple، cornflowerblue) — قم بتحويلها إلى HEX في DevTools أولاً، ثم الصقها هنا.

الحدود: sRGB غير شفاف فقط - لا يوجد CMYK أو Lab أو Display-P3 أو سداسي ألفا مكون من ثمانية أرقام. تنتمي محاكاة عمى الألوان وفحص التباين إلى حاسبة نسبة التباين. قد تعرض شاشات WCG درجات اللون الأزرق المشبعة بشكل مختلف عن معاينة sRGB على الشاشات القياسية.