🎨 تحويل الألوان
تحويل بين HEX وRGB وHSL مع معاينة
صيغ اللون ومتى تستخدم كل صيغة
صيغة HEX سداسية مكوّنة من ست خانات تمثّل الأحمر والأخضر والأزرق، وهي الأكثر استخدامًا في الويب لأنها قصيرة وسهلة النسخ.
وصيغة RGB تعطي كل قناة رقمًا من 0 إلى 255، وتفيد عند حساب الشفافية، وصيغة HSL تصف اللون بالدرجة والتشبع والإضاءة، وهي الأسرع في توليد تنويعات متدرجة من لون واحد.
أساسيات هارموني الألوان
من دائرة الألوان تولد أنظمة متناسقة: الألوان المتقابلة للتباين، والمجاورة للتناسق الهادئ، والثلاثية للتوزيع المتوازن في التصميم.
ولتحسين قراءة النص على الخلفية اضبط الإضاءة في صيغة HSL: غيّر الإضاءة بدون تغيير الدرجة والتشبع فتحصل على نفس اللون بدرجة أفتح أو أغمق.
📖 دليل الاستخدام
أداة تحويل الألوان بين HEX وRGB وHSL مع معاينة حية. اختر أي لون باستخدام منتقي الألوان أو اكتب كود HEX — ستحصل على القيم المحولة فوراً مع معاينة اللون.
HEX (Hexadecimal) هو التنسيق الأكثر شيوعاً في CSS وHTML. RGB (Red Green Blue) يستخدم في CSS ومعالج الصور. HSL (Hue Saturation Lightness) أسهل للفهم البشري — يسمح بتعديل اللون والكثافة والإضاءة بشكل بديهي.
للمطورين: استخدم الأداة لتحويل ألوان التصميم من Figma/Photoshop (HEX) لـ CSS (RGB أو HSL). لمصممي UI: جرب ألواناً مختلفة وانسخ القيم المناسبة. لكل من يعمل بالألوان: اعرض أي لون بثلاث تنسيقات مختلفة.
مثال: الأزرق الكلاسيكي #3B82F6 → RGB: 59,130,246 → HSL: 217°, 91%, 60%. الأحمر #FF0000 → RGB: 255,0,0 → HSL: 0°, 100%, 50%. الأخضر #00FF00 → RGB: 0,255,0 → HSL: 120°, 100%, 50%.
نصيحة لمصممي UI: استخدم HSL لتوليد درجات ألوان متناسقة بسرعة. غير L (Lightness) بنسب ثابتة (95% للخلفيات، 50% للعناصر الأساسية، 20% للنصوص) مع ثبات H و S — تحصل على لوحة ألوان متكاملة.
الأداة تعمل بالكامل في المتصفح وتدعم جميع المتصفحات الحديثة.
❓ الأسئلة الشائعة
إجابات لأكثر الأسئلة شيوعاً
🔗 أدوات ذات صلة
🔗 شارك الأداة
شارك الأداة مع أصحابك — كل الأداة مجانية ومتاحة بدون تسجيل