محول الألوان
حوّل بين صيغ الألوان HEX و RGB و HSL مع التحرير ثنائي الاتجاه — غيّر أي قيمة وتتحديث القيم الأخرى فورًا. يوفر منتقي الألوان الأصلي للمتصفح تحديدًا بصريًا، بينما تتيح المدخلات الرقمية الدقيقة تحديد اللون بدقة. انسخ صيغ جاهزة لـ CSS مباشرةً لأعمال تطوير الويب والتصميم.
ماذا تفعل هذه الأداة؟
يوفر محول الألوان تحويلًا ثنائي الاتجاه بين صيغ الألوان الأساسية الثلاث للويب. HEX (الستاديسيمال) يستخدم صيغة #RRGGBB أو #RGB مع قيم 00-FF لكل قناة. RGB (الأحمر، الأخضر، الأزرق) يستخدم قيمًا عشرية 0-255 لكل قناة، ويُكتب عادةً كـ rgb(255, 0, 128). HSL (الصبغة، التشبع، الإضاءة) يستخدم الصبغة بالدرجات (0-360) والتشبع/الإضاءة كنسب مئوية (0-100%)، ويُكتب كـ hsl(300, 50%, 50%). يعرض رقعة لون حية للون الحالي، وتوفر أزرار النسخ صيغ جاهزة لـ CSS للاستخدام الفوري في ملفات الأنماط.
كيف تعمل
تتم تحويل قيم الألوان باستخدام رياضيات مساحات الألوان القياسية. HEX إلى RGB: كل زوج من أرقام الستاديسيمال يتحول إلى قيمة عشرية 0-255. RGB إلى HSL: تُعوّض قيم RGB إلى 0-1، ويحدد الحد الأقصى والأدنى الإضاءة، ويعتمد التشبع على نطاق الإضاءة، وتُحسب الصبغة بناءً على أكبر مكون RGB باستخدام صيغ مثلثية. يعكس HSL إلى RGB هذه العملية. عند تحرير أي حقل، يتم تحليل اللون وتحويله إلى جميع التمثيلات الثلاثة وعرضه. يوفر مدخل اللون الأصلي للمتصفح اختيار ألوان مدمج مع نظام التشغيل على المنصات الداعمة.
الميزات
- HEX ↔ RGB ↔ HSL — حرّر أي قيمة، وتتحديث القيم الأخرى
- تكامل مع منتقي الألوان الأصلي للمتصفح
- معايشة رقعة لون حية
- انسخ rgb(...) أو hsl(...) جاهزة لـ CSS بنقرة واحدة
- مرجع Hex8 (مع ألفا) لأدوات التصميم
- تحويل فوري ثنائي الاتجاه
- تحقق من نطاقات الإدخال لكل صيغة
كيفية الاستخدام
- 1
اختر أو أدخل لونًا
استخدم منتقي الألوان الأصلي، أو الصق رمز HEX، أو أدخل قيم RGB/HSL مباشرة. يتم قبول أي قيمة لون صالحة.
- 2
دقّن باستخدام شريط التمرير أو الأرقام
عدّل شريط التمرير لـ R/G/B للتحكم الدقيق في قنوات اللون، أو عدّل قيم H/S/L لتغيير الصبغة أو ضبط التشبع والسطوع.
- 3
انسخ صيغة CSS
انقر على 'نسخ CSS' للصيغة المفضلة لديك — HEX للإيجاز، rgb للقابلية للقراءة، أو hsl للتعديلات البديهية.
- 4
استخدم Hex8 لأدوات التصميم
يُظهر حقل Hex8 صيغة #RRGGBBAA مع ألفا. انسخها لأدوات التصميم مثل Figma أو Photoshop التي تدعم HEX مع الشفافية.
حالات الاستخدام الشائعة
تطوير الويب
حوّل ألوان مخططات التصميم إلى قيم CSS، عدّل ألوان لوحة الألوان رياضيًا عبر HSL، وانسخ رموز HEX الدقيقة للتنفيذ.
التصميم الجرافيكي
ترجم الألوان بين أدوات التصميم التي تستخدم صيغًا مختلفة، وتحقق من دقة الألوان عبر تمثيلات HEX و RGB و HSL.
استكشاف مخططات الألوان
استخدم HSL لإنشاء تباينات: عدّل الصبغة لألوان مكملة، التشبع للتحكم في الشدة، السطوع للتلوينات والظلال.
فحص إمكانية الوصول
حوّل الألوان للتحقق من نسب التباين وضمان توافق التصميمات مع معايير إمكانية الوصول WCAG لوضوح الألوان.
نصائح وأفضل الممارسات
- HSL أكثر بديهية لتعديل الألوان من RGB — غيّر الصبغة دون التأثير على السطوع، أو عدّل التشبع دون تغيير اللون الأساسي
- HEX هو الأكثر إيجازًا لـ CSS (7 أحرف مقابل 16+ لـ rgb/hsl)، لكن rgb() و hsl() أكثر قابلية للقراءة وتدعم عمليات CSS calc()
- استخدم منتقي الألوان الأصلي (انقر على مدخل اللون) للاختيار البصري — يتكامل مع منتقئات ألوان نظام التشغيل على macOS و Windows
- للأبيض والأسود، استخدم HSL مع تشبع 0% — أي قيمة صبغة تعمل، فقط L (السطوع) يؤثر على النتيجة