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

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

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

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

تعكس الطريقة شروحات MDN وCSS للألوان: HEX وRGB وHSL صيغ مختلفة لألوان في فضاء sRGB.

يتحول اللون #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.

يحدث تحويل الألوان داخل المتصفح دون رفع ملفات. يتم تحليل اللون وتمثيله عبر قنوات رقمية مكافئة لكل صيغة.