كيف تحوّل الألوان بين HEX وRGB وHSL

يسلّم المصممون الألوان بصيغة HEX، وتتوقع أطر CSS صيغة RGB أو HSL، وقد تسرد إرشادات العلامة التجارية الثلاثة جميعها. التحويل اليدوي معرض للخطأ لأن رقماً ست عشرياً خاطئاً واحداً يغيّر درجة اللون بالكامل. يحتاج المصممون ومطورو الواجهة ومديرو العلامات وكتّاب التوثيق إلى تحويل موثوق يعرض أيضاً عينة مرئية للتأكيد.

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

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

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

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

يتحول اللون #14B8A6 إلى RGB 20, 184, 166 لأن 14 بالست عشري تساوي 20 عشرياً، وB8 تساوي 184، وA6 تساوي 166. ويمثل اللون نفسه تقريباً HSL 173, 80%, 40%.

المعادلات: كل زوج HEX يتحول إلى قناة عشرية. وتحويل RGB إلى HSL يستخدم أكبر وأصغر قنوات RGB لاشتقاق الإضاءة والتشبع وزاوية اللون. مثال تحويل قيم الألوان بين صيغ الويب الشائعة صغير عمداً حتى يمكن فحص الحساب أو التحويل يدوياً قبل الاعتماد على نتيجة آلية أسرع.

قد يجعل التقريب قيمة HSL المحولة تعود إلى RGB قريب لا مطابق تماماً. الشفافية والألوان واسعة النطاق والأسماء اللونية وقيم OKLCH الحديثة موضوعات منفصلة عن تحويل HEX/RGB/HSL الأساسي.

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

استخدم قائمة فحص تحويل قيم الألوان بين صيغ الويب الشائعة قبل قبول النتيجة. فهي تجعل العمل قابلاً للمسح السريع، وهذا مهم لأن كثيراً من قراء الويب يراجعون العناوين والقوائم قبل قراءة الشرح كاملاً.

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

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

المدخلات: HEX أو قنوات RGB أو قنوات HSL. المخرجات: HEX وRGB وHSL وعينة مرئية. تتحقق الأداة من النطاقات ولا تقبل كل صيغ CSS Color Level 4.

يحدث تحويل الألوان داخل المتصفح دون رفع ملفات. يطبق الفحص عبر الموقع هذه العملية داخل المتصفح: يتم تحليل اللون وتمثيله عبر قنوات رقمية مكافئة لكل صيغة. استخدم النتيجة كنقطة فحص واضحة، ثم قارنها بالقاعدة أو المنصة أو المستند أو السياسة التي تتحكم في مهمتك الفعلية.

ولنتائج أقوى، استخدم أدوات الصور عند تجهيز أصول يجب أن تطابق لوحة محددة. وأخيراً، احتفظ بالألوان المعتمدة في ملف رموز تصميم أو دليل علامة. الخطوة التالية بسيطة: افتح أداة TOOLFINA المرتبطة، وأدخل المدخلات المجهزة، وراجع تسميات المخرجات، واحتفظ بالقيمة النهائية مع ملاحظاتك إذا كانت النتيجة ستستخدم لاحقاً.

سؤال المراجعة النهائي في تحويل قيم الألوان بين صيغ الويب الشائعة هو هل سيفهم شخص يرى المدخلات والقاعدة نفسها لماذا قُبل الناتج. إذا لم تكن النتيجة قابلة للشرح في جملة أو جملتين واضحتين، فاحتفظ بالمصدر والإعدادات والقيمة النهائية معاً قبل إعادة استخدامها.