منتقي ومحول كود الألوان

ما وظيفة محول أكواد الألوان؟

تساعدك هذه الأداة على فحص اللون نفسه بأكثر من صيغة مستخدمة في التصميم والبرمجة. عند اختيار لون من منتقي الألوان أو كتابة قيمة HEX مثل #3D7EF7، يحسب المتصفح مباشرة قيمة RGB بقنوات من 0 إلى 255، وقيمة HSL بدرجة لون من 0 إلى 360 ونسب تشبع وإضاءة من 0 إلى 100%، ثم يعرض الاسم القياسي إذا كان اللون يطابق أحد ألوان CSS المسماة. كما يحسب اللون المتمم بتدوير درجة اللون 180 درجة، وهي طريقة سريعة لبناء تباين بصري أولي قبل تعديل اللوحة يدويا.

متى تستخدم HEX وRGB وHSL؟

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

حدود النتيجة ونصائح عملية

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

تحويلات اللون في الواجهة

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

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

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