تخطي إلى المحتوى

🎨 محول HSL إلى RGB وHEX — أداة تحويل الألوان

محول الألوان المجاني بين HSL، RGB، HEX، HSLA. أداة مباشرة مع منتقي ألوان بصري، عرض القيم بكل التنسيقات، ونسخ بنقرة واحدة لمصممي الويب ومطوريه.

كود CSS جاهز للنسخ
color: #3b82f6;

📚 عن أنظمة الألوان

تنسيقات الألوان في الويب الحديث ثلاثة رئيسية: HEX (سداسي عشري قصير مثل #3B82F6)، RGB (ثلاث قيم 0-255)، وHSL (صبغة، تشبع، إضاءة). كل تنسيق له استخدامه: HEX للمشاركة السريعة، RGB للأكواد المنخفضة المستوى، وHSL لتعديل الألوان بشكل بصري.

قاعدة عملية: ابدأ بـ HSL لتصميم نظام ألوانك (سهل التعديل)، احفظه كـ HEX في النهاية لمشاركة بسيطة. للتفاعل البرمجي، RGB هو الأسرع. HSLA يضيف الشفافية لتراكب الألوان فوق صور أو خلفيات.

🎯 نصائح للمصممين:
  • للحصول على ألوان متناغمة، ثبّت الإضاءة (L) عند 50% وغيّر الصبغة (H) كل 30° للحصول على متمم لون.
  • للأزرار النشطة/المعطلة، خفّض الإضاءة بـ 10-15% للحصول على درجات أغمق.
  • تجنّب تشبعاً 100% للنصوص — يصعب قراءته. استخدم 70-85% للأشكال، و50-70% للخلفيات.

❓ أسئلة شائعة

ما الفرق بين HSL و RGB؟
RGB يحدد اللون بثلاث قيم (أحمر، أخضر، أزرق) من 0 إلى 255. HSL يستخدم الصبغة (Hue 0-360°)، التشبع (Saturation 0-100%)، والإضاءة (Lightness 0-100%) — وهو أسهل لإنشاء تدرجات وألوان متناغمة.
متى أستخدم HSL بدلاً من RGB؟
استخدم HSL عند تعديل سطوع لون موجود (غيّر Lightness فقط)، إنشاء تدرجات بألوان متشابهة (Hue قريبة)، أو بناء أنظمة تصميم مرنة.
هل HSLA يدعم الشفافية؟
نعم — HSLA يضيف قناة Alpha (الشفافية) من 0 (شفاف بالكامل) إلى 1 (معتم بالكامل). صيغة CSS: hsla(120, 50%, 50%, 0.8).
ما الفرق بين HEX و RGB؟
HEX هو ترميز سداسي عشري لـ RGB. #FF0000 يكافئ rgb(255, 0, 0). HEX أقصر وأسهل للنسخ.