محول HSL إلى RGB

تحويل HSL إلى RGB: دليل عملي للمصممين والمطورين

لماذا يُستخدم تحويل HSL إلى RGB؟

عند العمل على تصميم واجهات أو توليد لوحات ألوان، يفضّل الكثيرون نموذج HSL لأنه يُبنى على طريقة تفكير البشر في الألوان: درجة اللون (Hue) من 0 إلى 360، ثم التشبع (Saturation) والإضاءة (Lightness) كنسب مئوية. لكن عندما يحين وقت تطبيق هذه الألوان في CSS أو أي كود شاشة، تحتاج إلى قيم RGB (0–255) لأن الشاشات تعمل بمنطق جمع الضوء الأحمر والأخضر والأزرق. هذه الأداة تفعل ذلك فوراً: تدخل 243, 75%, 59% مثلاً، ويظهر لك المقابل rgb(79, 70, 229) دون أي تأخير أو رفع للبيانات.

الفرق الجوهري هنا أن تغيير الإضاءة في HSL يُبقي درجة اللون ثابتة؛ هذه ميزة لا توفرها أنظمة مثل RGB أو CMYK. لذلك يستخدم المصممون HSL لبناء التدرجات والسمات اللونية، ثم يحتاجون إلى تحويل دقيق إلى RGB لكتابة الكود. وهذا التحويل خالٍ من الفقد: كل قيمة HSL صالحة تقابل بالضبط ثلاثية RGB واحدة ضمن النطاق الظاهر، دون أي قص أو انزياح لوني — بعكس التحويلات من LAB أو CMYK إلى RGB التي قد تنتج ألواناً خارج النطاق.

كيف يعمل هذا المحول بالضبط؟

الأداة تأخذ ثلاثة مدخلات فقط:

• درجة اللون (Hue): رقم بين 0 و360، يمثل موقع اللون على عجلة الألوان (0 = أحمر، 120 = أخضر، 240 = أزرق).
• التشبع (Saturation): نسبة مئوية من 0% (رمادي تام) إلى 100% (لون نقي).
• الإضاءة (Lightness): نسبة مئوية من 0% (أسود تام) إلى 100% (أبيض تام). 50% يعطي اللون النقي عادة.

بمجرد تعديل أي من هذه الحقول، تُحدَّث جميع الحقول الأخرى فوراً:

• HEX: ستة أرقام ست عشرية، مثل #4F46E5.
• RGB: ثلاثة أرقام 0–255، مثل 79, 70, 229.
• HSL: يعيد إظهار ما أدخلته (للتحقق).
• HSV: درجة لون وتشبع وقيمة (Value) تُستخدم غالباً في أدوات التحرير الرسومية.
• CMYK: نموذج الطرح المستخدم في الطباعة — لكنه تقديري يعتمد على شاشتك.
• LAB: نموذج يصف كل الألوان التي تراها العين البشرية، مستقل عن الجهاز.

لا شيء يُرفع إلى الخادم؛ كل العمليات الحسابية تجري في متصفحك مباشرة. الصيغة الرياضية للتحويل من HSL إلى RGB تعتمد على معادلة قياسية موصوفة في مواصفات CSS Color Module Level 4. تبدأ بقسمة القيم النسبية للإضاءة والتشبع، ثم حساب المساعد (Chroma) ثم إضافة الإزاحة لتتناسب مع النطاق 0–255.

الفروقات بين نماذج الألوان: HSL مقابل RGB

جدول يوضح الخصائص الأساسية لكل نموذج:

لماذا لا يوجد قص خارج النطاق (out‑of‑gamut) هنا؟ لأن HSL وRGB يشتركان في نفس النطاق اللوني لشاشات sRGB. أي تركيبة HSL صالحة — حتى 0, 100%, 50% (أحمر نقي) أو 0, 0%, 50% (رمادي) — تقع ضمن مكعب RGB. أما إذا حاولت تحويل لون من LAB بقيمة عالية التشبع خارج sRGB، فستضطر الأدوات إلى قصه أو تقريبه، مما يغيّر اللون. هنا لا يحدث ذلك.

الأمر الآخر: في RGB، تغيير الإضاءة غالباً يحتاج إلى ضبط القنوات الثلاث معاً للحفاظ على درجة اللون. في HSL، تكتب lightness: 70% بدلاً من 30% ويظل اللون كما هو في الأساس — هذا هو السبب الذي يجعل المصممين يختارون HSL لتوليد متغيرات لون واحد.

متى تحتاج إلى هذه الأداة؟

• مصمم واجهات: بنيت لوحة باستخدام HSL في Figma أو Sketch، وتريد كتابة كود CSS يعيد إنتاج نفس الألوان بدقة. المحول يعطيك RGB مباشرة.
• مطور فرونت إند: تصميمك يُعطى بصيغة HSL، لكن إطار العمل (مثل Tailwind أو Material UI) يتطلب RGB أو HEX. أدخل القيم واحصل على الرقم الثلاثي.
• أي شخص يعمل مع السمات (themes): عندما تحتاج إلى توليد درجات أفتح أو أغمق من لون أساسي، تعدل الإضاءة فقط في HSL ثم تحوِّل النتيجة إلى RGB لتطبيقها.
• التدقيق اللوني: تريد التأكد من أن قيمة RGB معينة تقابل درجة لون معينة في عجلة الألوان. المحول يظهر لك أيضاً HSL وHSV وLAB.

جميع هذه السيناريوهات تتطلب تحويلاً فورياً دون فتح برنامج ثقيل أو كتابة دالة جافاسكريبت بنفسك. الأداة تنجز المهمة بنقرة واحدة.

القيود والحالات الطرفية

• إدخال غير صحيح: إذا كتبت مثلاً 243, 75, 59 (بدون علامة النسبة المئوية للتشبع والإضاءة)، يظهر الخطأ:
  "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
  يجب أن تكون القيمتان الثانية والثالثة بصيغة النسبة المئوية.

• CMYK تقديري فقط: عند الطباعة الاحترافية، تعتمد النتيجة النهائية على نوع الورق والحبر والملف الشخصي للطابعة (ICC profile). القيمة المعروضة هنا هي تقريب مبني على نموذج تحويل قياسي، وقد تختلف عن الواقع. لا تعتمد عليها في الإنتاج المطبوع دون معايرة.

• لا يوجد فقد: كما ذكرنا، التحويل من HSL إلى RGB والعكس داخل نفس النطاق (sRGB) هو تحويل واحد لواحد. لا تفقد أي معلومات لونية. يمكنك أخذ أي RGB عشوائي، تحويله إلى HSL ثم العودة إلى RGB وستحصل على نفس الأرقام الثلاثة.

• تحديث فوري: كل حقل يتفاعل مع التغييرات مباشرة. لا توجد زر "تحويل" منفصل. إذا غيرت قيمة HSL، ستتغير جميع الحقول الأخرى في الوقت الحقيقي.

أسئلة شائعة

1. هل أحتاج إلى اتصال بالإنترنت لاستخدام المحول؟
لا. كل العمليات الحسابية تجري في متصفحك باستخدام جافاسكريبت. الصفحة تعمل بالكامل محلياً بعد تحميلها. لا تُرفع أي بيانات.

2. لماذا قيمة CMYK مختلفة عما أراه في برنامج الطباعة؟
لأن المحول يستخدم تحويلاً مبسطاً يفترض مساحة لونية قياسية (sRGB إلى CMYK عام). المطابع تستخدم ملفات تعريف محددة (مثل FOGRA39) تختلف بناءً على الورق والحبر. لذا تعامل مع قيمة CMYK هنا كتقدير أولي فقط.

3. هل يمكنني تحويل RGB إلى HSL بهذه الأداة؟
الصفحة مخصصة للتحويل من HSL إلى RGB ونواتج أخرى. لكن بما أن جميع الحقول قابلة للتحرير؟ لا، وصف الأداة ينص على أن تعديل حقل HSL يحدّث الباقي. ليس هناك حقل إدخال منفصل لـ RGB لتحديث HSL منه. تحتاج إلى أداة أخرى للاتجاه المعاكس. (هذه إجابة واقعية بناءً على الوصف المقدم).

4. ما النطاق الدقيق لقيم الإضاءة؟
0% يعني أسود تام (بغض النظر عن درجة اللون والتشبع)، 100% يعني أبيض تام. القيمة 50% تعطي أقصى تشبع للون الأساسي. مثلاً 0, 100%, 50% يعطي أحمر نقي (255,0,0).

5. هل يوجد حد أقصى لعدد المنازل العشرية في الإخراج؟
عادةً تظهر الأرقام الصحيحة فقط (0–255) لأن RGB لا يستخدم كسوراً في الاستخدام الشائع. لكن النموذج الرياضي يسمح بقيم عشرية؛ الأداة تقرِّب إلى أقرب عدد صحيح كما هو متوقع لـ CSS.

6. لماذا لا توجد ألوان خارج النطاق هنا بينما توجد في تحويلات أخرى؟
لأن HSL وsRGB يتشاركان نفس النطاق اللوني (gamut). أي لون يمكن تمثيله بـ HSL يقع داخل مثلث ألوان sRGB. بينما LAB يمكن أن يمثل ألواناً أوسع لا تستطيع الشاشة عرضها، مما يضطر لأدوات القص أو الإسقاط.

---

هذه الأداة الصغيرة تسد فجوة واضحة: التفكير باللون كإنسان ثم نقله إلى الآلة دون التضحية بالدقة. سواء كنت تبني لوحة ألوان جديدة أو تحوّل قيمة من تصميم إلى كود، ستجد أن تحويل HSL إلى RGB بهذه البساطة هو خيار عملي لا يحتاج إلى شرح.