محوّل الألوان — HEX وRGB وHSL
حوّل أي لون بين صيغ HEX وRGB وHSL وانسخ الكود فوراً — أداة مجانية للمصممين.
#6366f1rgb(99, 102, 241)hsl(239, 84%, 67%)rgba(99, 102, 241, 1)التحويل يجري محلياً
آمن للهويات غير المعلنة
بلا حساب
اتصال آمن
كيف تعمل
- 1
أدخِل لوناً
الصق رمز HEX، أو اكتب قيم RGB، أو اضبط HSL — أيّها توفّر لديك.
- 2
اقرأ الصيغتين الأخريين
تتحدّثان فوراً، إلى جانب عيّنة للّون الناتج.
- 3
انسخ ما تحتاجه
خذ الصيغة التي يستعملها ملف التنسيق أو أداة التصميم أو دليل هويتك.
لماذا تستخدم هذه الأداة
ثلاث صيغ في آنٍ واحد
HEX وRGB وHSL تبقى متزامنة كلما غيّرت إحداها — بلا تحويل مرتين للتأكد.
عدّل بـHSL وسلّم بـHEX
HSL هو النموذج الذي تستطيع التفكير به، وHEX ما تطلبه معظم ملفات التنسيق والتصميم.
عيّنة لونية حيّة
اللون يُعرض أثناء الكتابة، فيظهر أي خطأ مطبعي في رمز HEX فوراً.
نسخ بنقرة
خذ النصّ الذي يتوقّعه CSS أو إعدادات Tailwind أو أداة التصميم، منسّقاً بشكل صحيح.
لا شيء يُرفع
التحويل عملية حسابية تجري في متصفحك — ولا تُرسل أي قيمة إلى أي مكان.
مجاني بلا حساب
بلا تسجيل، وبلا حدّ لعدد التحويلات، وبلا علامة مائية على شيء.
HEX وRGB وHSL تصف اللون نفسه بطرق مختلفة
الصيغ الثلاث تخاطب ألوان الشاشة نفسها؛ والفرق بينها في طريقة تنظيم الرقم، وهذا التنظيم هو ما يجعل إحداها أسهل من الأخرى في مهمة بعينها. صيغة HEX تحزم ثلاث قيم في نصّ مضغوط — فـ`#3B82F6` هو أحمر 59 وأخضر 130 وأزرق 246 مكتوبة بالنظام السداسي عشر. وRGB تذكر القنوات الثلاث مباشرةً. أما HSL فتعيد تنظيم المعلومة نفسها إلى صبغة (أي لون، كزاوية من 0 إلى 360)، وتشبّع (كم هو زاهٍ، من 0 إلى 100٪)، وإضاءة (كم هو فاتح، من 0 إلى 100٪). والتحويل بينها لا يفقد شيئاً: `#3B82F6` و`rgb(59, 130, 246)` و`hsl(217, 91%, 60%)` لونٌ واحد مكتوب بثلاث طرق.
لماذا HSL هو الجدير بالتعلّم
يصعب التفكير بـHEX وRGB لأن تغيير اللون يعني تغيير ثلاثة أرقام دفعة واحدة بلا علاقة واضحة بما تراه. اجعل أزرق أفتح في RGB وستضطر لرفع القنوات الثلاث بمقادير تخمّنها. أما في HSL فالتعديل نفسه رقم واحد: ارفع الإضاءة. تريد نسخة هادئة من لون هويتك؟ اخفض التشبّع واترك الباقي. تحتاج حالة تمرير أغمق قليلاً من الأساس؟ اطرح عشرة من الإضاءة. ولهذا أيضاً فـHSL هو الطريق العملي لبناء تدرّج لوني: ثبّت الصبغة والتشبّع، وتدرّج بالإضاءة، فتبقى العائلة متماسكة بحكم البناء لا بالمحاولة والخطأ.
أين تُستعمل كل صيغة فعلاً
تسود HEX في تسليم التصاميم: أدلة الهوية، وFigma، ومعظم ملفات التنسيق ما زالت تحدّد الألوان برموز من ستة محارف، وهي الصيغة التي يرسلها إليك العميل أو المطبعة على الأرجح. وتظهر RGB حيث يلزم التعامل مع القنوات برمجياً، وبصيغة `rgba()` حين تدخل الشفافية. أما HSL فتزداد حضوراً في CSS المكتوب يدوياً، تحديداً لأن من يصون الشيفرة يقرأ `hsl(217, 91%, 60%)` فيعرف أنه أزرق مشبَع بإضاءة متوسطة، بينما لا يخبره `#3B82F6` بشيء حتى يعرضه. والسير الشائع أن تفكّر بـHSL أثناء التصميم ثم تحوّل إلى HEX لوثيقة التسليم — وهو التحويل الذي وُجدت هذه الأداة لتجعله فورياً.
قراءة رمز HEX بلا محوّل
رمز HEX من ستة محارف هو ثلاثة أزواج: أحمر وأخضر وأزرق، كلٌّ من `00` إلى `FF` (أي 0 إلى 255). ونمطان يستحقان التعرّف عليهما بالعين. حين تتساوى الأزواج الثلاثة — `#333333` و`#CCCCCC` — يكون اللون رمادياً محايداً، وكلما ارتفعت القيمة صار أفتح. وحين يهيمن زوج بوضوح، فتلك القناة هي اللون: `#CC3333` يُقرأ أحمر، و`#33CC33` أخضر. وهذا يكفي لالتقاط خطأ ظاهر قبل العرض، لكنه لا يكفي للحكم على قرب لونين من بعضهما — وهنا بالضبط يكون التحويل إلى HSL ومقارنة المكوّنات الثلاثة أسرع من التحديق في رموز سداسية.
تحويل اللون ليس التحقّق من صلاحيته
المحوّل يخبرك ما هو اللون، لا ما إذا كان مقروءاً على خلفيته. وهما سؤالان منفصلان، والثاني له عتبة لا رأي: يشترط معيار WCAG نسبة تباين لا تقلّ عن 4.5:1 لنصّ المتن العادي. وقد يكون زوج ألوان مطابقاً للهوية تماماً ويسقط في هذا الاختبار. فإن كان اللون الذي تحوّله سيحمل نصّاً — أو كان هو النص — فمرّر الزوج على مدقّق التباين قبل الالتزام به. وكذلك إن كنت تبني مجموعة ألوان لا تحوّل لوناً واحداً، فـمولّد اللوحات يعمل على العلاقات بين الصبغات، وهو ما لا يعالجه التحويل وحده.
الشفافية وصيغة الثمانية محارف
لكلٍّ من HEX وRGB نسخة شفافة: فـHEX من ثمانية محارف تضيف محرفين لقناة ألفا، و`rgba()` تضيف قيمة رابعة من 0 إلى 1. وهذه الأداة تحوّل الصيغة المعتمة من ستة محارف، وهي ما تستعمله وثائق الهوية وملفات التصميم والغالبية الساحقة من تصريحات التنسيق. فإن احتجت شفافية، فحوّل اللون الصلب هنا وأضف قناة ألفا في ملف التنسيق — فيبقى اللون الأساسي مصدراً واحداً للحقيقة ويضبط كل استعمال شفافيته الخاصة، بدل تثبيت عشرات المتغيّرات شبه المتطابقة داخل لوحة الألوان.
أخطاء شائعة يجب تجنّبها
- تعديل اللون بتحريك قنوات RGB. جعله أفتح أو أهدأ في RGB يعني ضبط ثلاثة أرقام بمقادير تخمّنها. حوّل إلى HSL، وغيّر المكوّن الواحد الذي يصف ما تريده، ثم حوّل عائداً.
- بناء تدرّج لوني باختيار الدرجات بالعين. التدرّج بالإضاءة في HSL مع تثبيت الصبغة والتشبّع يُنتج عائلة متماسكة؛ أما انتقاء رموز HEX يدوياً فيُنتج عائلة تنحرف صبغتها وتبدو موحلة في الوسط.
- افتراض أن اللون المحوَّل متاح للوصول. التحويل عملية حسابية لا تقول شيئاً عن المقروئية — فالزوج ما زال عليه تجاوز 4.5:1 لنصّ المتن، ولا يخبرك بذلك إلا فحص التباين.
- نسخ رمز HEX بلا علامة المربّع، أو معها، إلى حقل يتوقّع العكس. الصيغتان شائعتان ولا واحدة منهما مقبولة عالمياً؛ تحقّق مما تطلبه أداتك بدل الافتراض.
- توقّع أن يُطبع لون الشاشة كما هو. صيغ HEX وRGB وHSL تصف كلها ضوءاً تصدره شاشة؛ أما الطباعة فتستعمل أحبار CMYK، وألوان الشاشة الزاهية — خصوصاً الأزرق والأخضر المشبَعين — لا مقابل حبريّ دقيق لها.
كيف تُقارن
| KeroTools | برامج التصميم | محوّلات محرّكات البحث | |
|---|---|---|---|
| HEX وRGB وHSL معاً | الثلاث، حيّة | نعم | واحدة في المرة عادةً |
| إرسال القيم إلى خادم | أبداً | لا | غالباً |
| عيّنة لونية حيّة | نعم | نعم | أحياناً |
| حساب أو ترخيص | لا هذا ولا ذاك | يتطلب ترخيصاً | لا هذا ولا ذاك |
| يعمل دون اتصال | بعد التحميل الأول | نعم | لا |
| التكلفة | مجاني | مدفوع | مجاني |
المزايا
إدخال وإخراج HEX
صيغة من ستة محارف، مع علامة المربّع أو بدونها.
إدخال وإخراج RGB
ثلاث قنوات من 0 إلى 255، بالصيغة التي يقبلها CSS مباشرة.
إدخال وإخراج HSL
الصبغة بالدرجات، والتشبّع والإضاءة بالنسب المئوية — النموذج الذي يفكّر به المصمّمون فعلاً.
معاينة لونية حيّة
عيّنة تعرض القيمة الحالية فتُلتقط الأخطاء بالعين.
اتجاهان
عدّل أياً من الثلاث فتتبعها الأخريان؛ لا حقل مصدر ثابت.
نصوص جاهزة للنسخ
المخرَج منسّق ليُلصق في CSS مباشرةً بلا تنظيف.
بلا تثبيت
لا شيء يُنزَّل أو يُثبَّت — يعمل على صفحة الويب مباشرة.
يدعم العربية والاتجاه من اليمين
واجهة كاملة بثماني لغات، منها العربية بالاتجاه الصحيح.
آمن افتراضياً
عبر HTTPS، بلا تتبّع للملفات وبلا رفع لأي طرف ثالث.
من يستخدمها
مطوّرو الواجهات
تحويل رموز HEX المسلَّمة من المصمّم إلى قيم HSL يسهل صيانة ملف التنسيق بها.
المصمّمون
قراءة لون الهوية بـHSL لبناء درجات فاتحة وغامقة تبقى في عائلة الصبغة نفسها.
المسوّقون وأصحاب العلامات
الحصول على الصيغة التي يطلبها محرّر السمة في كل منصّة، انطلاقاً من لون هوية واحد.
كل من يعدّل سمة
مطابقة لون مأخوذ من أداة في حقل يتوقّع صيغة مختلفة.
الأسئلة الشائعة
لا. كل شيء يعمل محلياً في متصفحك — لا شيء يُرفع أو يُخزَّن أو يُشارَك.
نعم — مجاني تماماً، بلا حساب وبلا حدود.