محوّل الألوان
حوّل بين صيغ HEX و RGB و HSL مع معاينة حية
تحويل صيغ الألوان اونلاين
أداة أساسية لكل مصمم ومطور واجهات: التقط لوناً من المنتقي أو الصق كود HEX لتحصل فوراً على الصيغ المكافئة RGB و HSL جاهزة للنسخ بصيغ CSS الصحيحة، مع معاينة حية للون. صيغة HSL تسهّل عليك اشتقاق درجات أفتح وأغمق من نفس اللون بتعديل قيمة الإضاءة فقط.
طريقة الاستخدام
- اختر اللون من المنتقي أو الصق كود HEX.
- انسخ أي صيغة بزر النسخ المجاور لها.
أسئلة شائعة
ما الفرق بين RGB و HSL؟
RGB تصف اللون بمزيج الأحمر والأخضر والأزرق، بينما HSL تصفه بدرجة اللون وتشبّعه وإضاءته — وهي أسهل للتعديل اليدوي.
هل تدعم الأداة الشفافية (Alpha)؟
الصيغ المعروضة بدون قناة شفافية؛ أضف قيمة alpha يدوياً (rgba/hsla) عند الحاجة.
لماذا لا يقبل الحقل بعض الأكواد؟
الصيغة المقبولة هي HEX من 6 خانات مسبوقة بعلامة #، مثل #a78bfa.
أبرز المميزات
- تحويل فوري بين صيغ HEX و RGB و HSL في الاتجاهات كلها.
- معاينة حية للون أثناء التعديل.
- نسخ أي صيغة بضغطة واحدة.
- قيَم دقيقة صالحة للاستخدام المباشر في CSS.
- يعمل محلياً في متصفحك دون اتصال.
لماذا تستخدم هذه الأداة؟
المصمم يسلّمك HEX، ومكتبة الرسوم تطلب RGB، وأنت تحتاج HSL لتفتيح اللون برمجياً. بدل حفظ معادلات التحويل أو تخمين القيم، تحصل على الصيغ الثلاث متزامنة مع معاينة تؤكد أن اللون هو المقصود قبل وضعه في الكود.
أخطاء شائعة يجب تجنبها
- نسخ HEX بدون علامة # فتتجاهله بعض السياقات بصمت.
- الخلط بين RGB و RGBA — نسيان قناة الشفافية يجعل العنصر معتماً حيث أردته شفافاً.
- تعديل الإضاءة بتغيير قيم RGB يدوياً بدل قناة L في HSL المصممة لذلك.
- الاعتماد على أسماء الألوان النصية (مثل red) في تصميم دقيق — قيمها تختلف عن ألوان هويتك.