محوّل الألوان
حوّل بين رموز الألوان HEX وRGB وHSL فوريًا. يشمل منتقي ألوان، مجاني.
1,060 مشاهدة
كيف تعمل؟
هذه الترميزات الثلاثة تصف كلها اللون نفسه تمامًا — فهي ببساطة تُرمّز مستويات الضوء الأحمر والأخضر والأزرق التي تمزجها الشاشة لإنتاجه. يخزّن RGB كل قناة كرقم عشري من 0 إلى 255. أما HEX فهو ببساطة RGB مكتوبًا بالأساس 16: تصبح كل قناة زوجًا سداسي عشريًا من رقمين، لذا يصبح rgb(255, 128, 0) هو #ff8000 (ff = 255، 80 = 128، 00 = 0). لا تُكتسب أو تُفقد أي معلومة لونية في هذه الترجمة — إنها مجرد ترميز مختلف.
HSL مختلف: فهو يعيد اشتقاق اللون على ثلاثة محاور إدراكية — التدرج (hue) والتشبع (saturation) والإضاءة (lightness) — تُحسب رياضيًا من قنوات RGB. التدرج (0–360°) هو الزاوية على عجلة الألوان، تُحسب من أي قناة هي الأكبر ومدى التباعد بين القنوات: بالنسبة إلى #ff8000، الأحمر هو الأقصى (255) والأزرق هو الأدنى (0)، وتعطي الصيغة 60 × ((الأخضر − الأزرق) / (الأقصى − الأدنى)) القيمة 60 × (128/255) ≈ 30°، ما يضعه في نطاق البرتقالي. الإضاءة هي متوسط أعلى وأدنى قناة — هنا (255 + 0) / 2 ≈ 50%. أما التشبع فيقيس مدى بُعد اللون عن الرمادي عند تلك الإضاءة — 100% هنا، لأن قناة واحدة في أقصى شدتها وأخرى عند الصفر. يُقرأ الناتج معًا كـ hsl(30, 100%, 50%) — البرتقالي نفسه الذي يمثله #ff8000، موصوفًا بطريقة مختلفة.
هذا بالضبط سبب تفضيل المصممين لـHSL على RGB: لجعل لون أغمق بنسبة 20% مع الحفاظ على تدرجه، يحتاج HSL فقط إلى خفض قيمة الإضاءة — بينما يتطلب RGB إعادة حساب القنوات الثلاث جميعها بشكل تناسبي. اختر لونًا باستخدام المنتقي أو اكتب أي رمز HEX، وستحوّله هذه الأداة إلى الترميزين الآخرين فورًا.
ما يجب أن تعرفه
صيغ HEX القصيرة المكوّنة من 3 أرقام (#f80) والصيغ المكوّنة من 4/8 أرقام مع قناة شفافية (#ff8000cc، rgba(255,128,0,0.8)) هي أشكال شائعة؛ تتعامل هذه الأداة مع HEX القياسي المعتم المكوّن من 6 أرقام ومعادِلَيه في RGB وHSL. تُطابق أسماء الألوان مثل orange قيم HEX ثابتة معرَّفة في مواصفات CSS، لكن ليس لكل اسم لون رمز HEX سهل التذكر، وهو سبب آخر يجعل المطورين يحوّلون بين الصيغتين ذهابًا وإيابًا. قد يبدو لونان متطابقين على شاشة واحدة لكنهما يظهران بشكل مختلف قليلًا على شاشة أخرى، لأن شاشات المستهلكين تتفاوت في مدى الألوان والمعايرة — قيم HEX/RGB/HSL أرقام دقيقة، لكن الضوء الذي تنتجه غير مضمون أن يكون متطابقًا تمامًا عبر الشاشات. عند اختيار ألوان النص والخلفية، تذكّر أن قيمة الإضاءة في HSL ليست نفسها التباين الإدراكي — يمكن لأصفر مشبع وأزرق مشبع أن يتشاركا نفس قيمة L لكن يبدوان مختلفين تمامًا مقابل الأبيض، لذا يجب أن تعتمد فحوصات الإتاحة على حساب نسبة تباين حقيقية، لا على رقم L فقط.
يقبل CSS أيضًا صيغة RGB القائمة على النسبة المئوية، مثل rgb(100%, 50%, 0%)، كمعادل تام لـ rgb(255, 128, 0) — مفيد عند العمل مع أدوات تصميم تعبّر عن اللون كنسب مئوية بدلًا من أعداد صحيحة من 0 إلى 255. تذهب دوال ألوان CSS الأحدث مثل oklch() وlab() خطوة أبعد من HSL: فهي مصمَّمة لتكون متجانسة إدراكيًا، أي أن الخطوات الرقمية المتساوية في الإضاءة تبدو مختلفة بمقدار متساوٍ للعين البشرية عبر كل تدرج لوني، وهو ما لا يضمنه HSL البسيط بالكامل. ومع ذلك، بالنسبة لعمل الويب والواجهات اليومي، تظل HEX وRGB وHSL الصيغ الثلاث التي ستقابلها في كل قاعدة شيفرة ودليل تصميم وأداة تصميم تقريبًا.
الأسئلة الشائعة
كيف أحوّل لون HEX إلى RGB؟
قسّم رمز HEX إلى ثلاثة أزواج ثنائية الرقم واقرأ كل زوج كرقم بالأساس 16: بالنسبة إلى #ff8000، ff=255 (أحمر)، 80=128 (أخضر)، 00=0 (أزرق)، ما يعطي rgb(255, 128, 0). تُجري هذه الأداة التحويل فورًا أثناء الكتابة أو اختيار لون.
هل رموز HEX المكونة من 3 أرقام (مثل #f80) مدعومة؟
نعم. يُضاعِف الترميز القصير كل رقم ليتوسّع إلى الصيغة الكاملة من 6 أرقام — يصبح #f80 هو #ff8800 — وتقبل الأداة كلا الشكلين القصير والطويل بالتبادل.
متى يجب أن أفضّل HSL على RGB؟
كلما احتجت إلى نسخة أفتح أو أغمق أو أكثر خفوتًا من لون تملكه بالفعل. في HSL تغيّر قيمة واحدة فقط — الإضاءة أو التشبع — ويبقى التدرج ثابتًا؛ أما في RGB فيعني التعديل نفسه إعادة حساب القنوات الثلاث جميعها بشكل تناسبي. يقبل CSS دالة hsl() مباشرة، لذا هذا ليس مجرد راحة أثناء التصميم فقط.
كيف تُحسب قيمة التدرج (hue) في HSL فعليًا؟
يأتي التدرج من العلاقة الزاوية بين قنوات RGB: تنظر الصيغة إلى أي قناة هي الأكبر، وأيها الأصغر، والفرق بينهما، ثم تُسقط ذلك على عجلة ألوان من 0 إلى 360°. بالنسبة إلى #ff8000 (255، 128، 0)، الأحمر هو الأعلى والأزرق هو الأدنى، ما يضع التدرج عند 30°، تمامًا في نطاق البرتقالي.
هل يفقد التحويل بين HEX وRGB وHSL أي دقة لونية؟
لا — HEX وRGB هما ترميزان للأرقام نفسها تمامًا، وHSL هو تحويل حتمي وقابل للعكس لهذه الأرقام نفسها. التحويل ذهابًا وإيابًا أي عدد من المرات يُعيد اللون الأصلي بدقة تامة؛ لا شيء يُقرَّب أو يُفقد في أي من الاتجاهين.
أدوات مشابهة
الإبلاغ عن مشكلة
محوّل الألوان
التعليقات
لا توجد تعليقات بعد — كن أول من يكتب تعليقًا!