محول الألوان - HEX، RGB، HSL | Hexa

لماذا يحتاج المصممون والمطورون تحويل الألوان

الألوان تُمثّل بشكل مختلف عبر الأدوات والمنصات. CSS تستخدم HEX (#ff5733) أو RGB (rgb(255, 87, 51)). برامج التصميم قد تستخدم HSL لتعديل اللون والتشبع والإضاءة بسهولة. واجهات برمجة التطبيقات وأنظمة التصميم غالباً تتوقع صيغة واحدة بينما مصدرك يقدم أخرى. التحويل اليدوي عرضة للأخطاء—خطأ إملائي في كود HEX يمكن أن ينتج لوناً خاطئاً تماماً. محولنا يتعامل مع HEX و RGB و HSL فوراً، لذا يمكنك لصق لون من أي مصدر والحصول على المكافئ بالصيغة التي تحتاجها. راجع ألوان الويب على ويكيبيديا للصورة الكاملة لأنظمة ألوان الويب.

فهم HEX و RGB و HSL

HEX يستخدم كوداً من 6 أحرف (بالإضافة إلى ألفا اختياري) لتمثيل الأحمر والأخضر والأزرق. كل زوج من الأحرف قيمة سداسية عشرية 00–FF. #ff0000 أحمر نقي؛ #00ff00 أخضر نقي. مستخدم على نطاق واسع في CSS وأدوات التصميم وتطوير الويب.

RGB يعبّر عن نفس قيم الأحمر والأخضر والأزرق كأرقام 0–255. rgb(255, 0, 0) أحمر نقي. أكثر قابلية للقراءة لبعض المطورين؛ CSS وواجهات برمجة التطبيقات الكثيرة تدعمه.

HSL (اللون، التشبع، الإضاءة) يصف اللون بشكل مختلف. اللون هو زاوية اللون (0–360°). التشبع والإضاءة يتحكمان في الشدة والسطوع. مفيد عندما تريد إنشاء تنويعات لونية—غيّر الإضاءة للحصول على درجات أفتح أو أغمق من نفس اللون.

سيناريوهات التحويل الشائعة

من التصميم إلى الكود: مصممك يرسل HEX من Figma. تحتاج RGB لمكتبة رسوم بيانية. حوّل في خطوة واحدة.

تكامل واجهات برمجة التطبيقات: واجهة برمجة التطبيقات ترجع ألواناً بالـ RGB. واجهتك الأمامية تتوقع HEX. حوّل قبل العرض.

التلاعب بالألوان: HSL يسهّل إنشاء لوحات ألوان—نفس اللون، تشبع وإضاءة مختلفان. حوّل من HEX إلى HSL، عدّل، حوّل مرة أخرى.

الخصوصية والأداء

جميع التحويلات تعمل محلياً في متصفحك. لا نخزن أو ننقل قيم ألوانك. الأداة تعمل دون اتصال—لا اعتماد على الخوادم. نتائج فورية، بدون تسجيل.

افتح محول الألوان أدناه. أدخل لوناً في HEX أو RGB أو HSL واحصل على المكافئ في صيغ أخرى. لا حاجة لتسجيل.