محول الألوان

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

Built by Bob Article by Lace QA by Ben Shipped April 26, 2026

كيفية الاستخدام

1
أدخل رمز لون HEX في حقل الإدخال أو استخدم منتقي الألوان لاختيار لون.
2
تعرض الأداة تلقائياً قيم RGB و HSL المحولة في الوقت الفعلي.
3
انسخ أياً من تنسيقات الألوان المحولة إلى الحافظة بنقرة واحدة.

📏 REM to PX Converter ✨ CSS Animation Generator 📐 Unit Converter

الأسئلة الشائعة

ما هو تنسيق لون HEX؟

تنسيق لون HEX هو تمثيل سداسي عشري للون، يُستخدم عادة في تصميم الويب. يتكون من '#' متبوع بستة أحرف أبجدية رقمية (مثلاً، #RRGGBB)، حيث يمثل كل زوج المكونات الحمراء والخضراء والزرقاء للون.

كيف أحول من RGB إلى HSL باستخدام هذه الأداة؟

هذه الأداة تحول تلقائياً اللون الذي تدخله (إما عبر منتقي الألوان أو بكتابة قيمة HEX) إلى قيم RGB و HSL المقابلة، وتعرضها في الوقت الفعلي. لا تحتاج لأداء أي حسابات يدوية.

لماذا توجد تنسيقات ألوان مختلفة مثل HEX و RGB و HSL؟

توجد تنسيقات ألوان مختلفة لأنها تخدم أغراضاً وسير عمل متنوعة. HEX موجز للويب، RGB حدسي للشاشات الرقمية (نموذج لون إضافي)، و HSL غالباً مفضل من المصممين لانتظامه الإدراكي وسهولة التعديل (الصبغة، التشبع، الإضاءة).

هل يمكنني استخدام أداة محول الألوان هذه لمشاريع تصميم الويب؟

بالتأكيد! هذه الأداة مثالية لمصممي ومطوري الويب لتحويل الألوان بسرعة بين تنسيقات HEX و RGB و HSL، مع ضمان الاتساق والدقة عبر مشاريعهم. توفر أيضاً إخراج متغير CSS للراحة.

هل هذه الأداة دقيقة لمطابقة الألوان الدقيقة في العمل الاحترافي؟

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

Ratings & Reviews

Rate this tool

Loading reviews…

ماذا يفعل محول الألوان

اختر لوناً بأي تنسيق معياري — HEX أو RGB أو HSL أو HSV — ومحول ألوان Microapp يعرض لك القيم المكافئة في كل تنسيق آخر، جنباً إلى جنب. زائد عينة معاينة حية ترى فيها بالضبط اللون الذي تعمل به. كل ذلك في متصفحك، فوراً.

المصممون والمطورون يحتاجون باستمرار للترجمة بين التنسيقات: مواصفة العلامة التجارية تستخدم HEX، الكود يريد RGB مع شفافية، نظام التصميم يجزّئ HSL، محرر الصور يصدّر RGBA. التحويلات يدوياً مملة ومعرضة للخطأ. هذه النسخة الصحيحة دائماً.

كيف تستخدمه

اكتب أو الصق قيمة لون في أي من حقول الإدخال الأربعة (HEX، RGB، HSL، HSV).
الحقول الثلاثة الأخرى تتحدث فوراً بالمكافئات المحولة. عينة المعاينة تظهر اللون الفعلي.
استخدم المنتقي للاختيار البصري — اسحب مربع اللون أو شريط الصبغة، وكل إخراجات التنسيقات الأربعة تتحدث في الوقت الفعلي.
انقر "نسخ" بجانب أي تنسيق لوضعه في حافظتك.

مثال محلول. أخضر علامة Microapp التجارية:
HEX: #1B6B45
RGB: rgb(27, 107, 69)
HSL: hsl(150, 60%, 26%)
HSV: hsv(150, 75%, 42%)
نفس اللون، أربعة تنسيقات. استخدم أياً يطابق أداتك.

التنسيقات الأربعة موضحة

HEX. ستة أحرف هكس تمثل الأحمر والأخضر والأزرق (اثنان لكل). #1B6B45 يعني R=0x1B (27)، G=0x6B (107)، B=0x45 (69). التنسيق الأكثر شيوعاً لتصميم الويب — كل ملف CSS مليء بـ HEX. اختصارات الثلاثة أحرف (#1B6) تضاعف كل حرف، لكنها تعمل فقط للألوان ذات الأرقام السداسية المتطابقة.

RGB. ثلاثة أعداد صحيحة من 0-255 تمثل نفس الأحمر والأخضر والأزرق. rgb(27, 107, 69) متطابق مع #1B6B45 — نفس الأرقام بالعشري. RGB له متغير alpha، RGBA، للشفافية الجزئية: rgba(27, 107, 69, 0.5) هو أخضر نصف معتم.

HSL. Hue (الصبغة، 0-360 درجة على عجلة الألوان)، Saturation (التشبع، 0-100% من شدة اللون)، Lightness (الإضاءة، 0-100% من الأسود إلى الأبيض). hsl(150, 60%, 26%) يعني صبغة خضراء-سماوية، مشبعة باعتدال، داكنة إلى حد ما. HSL حدسي للمصممين — يمكنك ضبط "اجعله أغمق" بخفض الإضاءة دون التأثير على الصبغة.

HSV. Hue، Saturation، Value (يُسمى أحياناً HSB). مشابه لـ HSL لكن Value يمثل السطوع من أسود-إلى-لون-نقي بدلاً من أسود-إلى-أبيض. HSV هو ما تستخدمه معظم محررات الصور (Photoshop، Figma) في منتقي الألوان لديهم.

متى تستخدم كل تنسيق

استخدم هذا التنسيق	متى
HEX	CSS، مواصفات التصميم، رسائل Slack، أي مكان تحتاج فيه سلسلة قصيرة واحدة
RGB / RGBA	التلاعب البرمجي بالألوان، الشفافية الجزئية، حركات CSS التي تستكمل الألوان
HSL / HSLA	توليد الثيمات، لوحات الألوان، تفتيح/تغميق لون العلامة التجارية برمجياً
HSV	محررات الصور، منتقيات الألوان، الأماكن التي يطابق فيها "value" بشكل أفضل السطوع المُدرَك

الدقائق التي يصادفها المصممون

HSL Lightness مقابل HSV Value — ليسا متشابهين. لونان بـ HSL Lightness 50% يمكن أن يبدوا مختلفين جداً في السطوع لأن Lightness في HSL هي نقطة المنتصف بين الأسود والأبيض. HSV Value 50% يعني "نصف سطوع النسخة المشبعة النقية". عند أتمتة "اجعله أغمق 20%"، استخدام HSL يعطي نتائج أكثر انتظاماً عبر الصبغات من HSV.

HEX هو sRGB افتراضياً. عندما تكتب #1B6B45، يفسره المتصفح كـ sRGB. الشاشات الحديثة غالباً لها نطاقات ألوان أوسع (P3، AdobeRGB)، وCSS يدعم الآن تحديدها: color(display-p3 0.106 0.420 0.270). لمعظم عمل الويب، التزم بـ sRGB / HEX؛ لعمل HDR أو القريب من الطباعة، تنسيقات النطاق الأوسع تهم.

Alpha (الشفافية) لا تنطبق على HEX. تقريباً. CSS الحديث يدعم HEX 8 أحرف مع alpha كآخر حرفين: #1B6B4580 هو أخضر العلامة عند alpha 50%. المتصفحات الأقدم تتجاهل بايتات alpha. RGBA و HSLA مدعومان أكثر شمولاً للشفافية.

أخطاء الألوان الشائعة

نسيان # في HEX. CSS يتطلب #1B6B45، لا 1B6B45. محول Microapp يقبل كليهما للإدخال لكن يخرج دائماً بـ #.

HEX بأحرف صغيرة مقابل كبيرة. متطابقان وظيفياً (#1b6b45 = #1B6B45). معظم أنظمة التصميم تطبع على الكبيرة لقابلية القراءة؛ CSS لا يهتم.

أخطاء التقريب عند التحويل. الذهاب والإياب HSL → HEX → HSL يمكن أن ينتج قيمة HSL مختلفة قليلاً بسبب تقريب الأعداد الصحيحة (HEX أعداد صحيحة؛ HSL أعداد عشرية). محول Microapp يستخدم حسابات عالية الدقة داخلياً؛ يجب أن ترى نتائج متسقة، لكن في الكود قد ترى انجرافاً على مدى عدة دورات.

أدوات ذات صلة

لتحويل HEX إلى RGB فقط، أداة Hex إلى RGB الأبسط أسرع. لإيجاد اللون المسمى الأقرب لقيمة HEX، يمكن لـ منتقي اسم اللون التعرف عليه. لتوليد لوحة ألوان منسقة حول لون أساسي، انظر مولد لوحة الألوان.