محوِّل الألوان

ما هو مُحوِّل الألوان؟#

يُترجم مُحوِّل الألوان وصفًا واحدًا للون إلى الوصف الأخرى التي تحتاجها حزمتك فعلًا. يُعطيك المصمّم قيمة HEX من نموذج؛ ويسمح لك CSS بـ rgb() أوhsl()؛ ويريد خط رموز تصميم متغيّرة CSS؛ وتطلب مكتبة رسمٍ توليفَة RGBA مع قناة ألفا. اللون نفسه يرتدي أثوابًا شتّى، فتقضي وقتًا حقيقيًّا في التحويل يدويًّا أومع التخمين على آلة حاسبة.

تفعل هذه الصفحة التحويلات الأربعة دفعةً واحدة. اكتب لونًا أواختره فتحصل فورًّا على HEX وRGB وHSL وإعلان متغيّر CSS جاهزًا للّصق، ومعها عيّنة معاينة حيّة ولوحة خمس درجات تفتيح/تغميق مشتقّة من اللون عينه — كلّ ذلك محسوب محليًّا في متصفّحك.

السبب في تعايش HEX وRGB وHSL أنّ كلًّا منها يُحسن في مهمّة مختلفة. HEX (#4f46e5) مختصر ويهيمن على CSS وتصدير Figma وإرشادات العلامة. RGB (rgb(79, 70, 229)) يجعل قنوات الأحمر/الأخضر/الأزرق صريحة، وهو ما تتوقّعه شيفرات الصور ومعالجة بكسلات canvas. أمّا HSL (hsl(243, 75%, 59%)) المقسّم إلى تدرّج وتشبّع وإضاءة فهو الذي يستطيع الإنسان استيعابه — «اجعله أمضح بـ 10%» تغيير في رقم واحد في HSL ورقصة فوضوية بين ثلاثة أرقام في RGB.

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

1. اضبط لون الإدخال بإحدى طريقتين:
   • انقر مربّع اللون على اليسار لفتح منتقي الألوان الأصلي لنظام التشغيل واختر بصريًّا.
   • أواكتب قيمة في حقل النصّ بجانبه. تُقبل الصيغ HEX (#4f46e5 و#abc، أوالثماني الرقم #4f46e5ff بألفا)، وrgb() / rgba()، وhsl() / hsla().
2. اقرأ النتائج في القائمة على اليمين — HEX وRGB وHSL ومتغيّر CSS. كلّ حقل للقراءة فقط؛ انقر داخله وانسخ، أواستخدمه مرجعًا وأنت تعمل.
3. راقب كتلة المعاينة الكبيرة على اليمين؛ تمتلئ باللون الحالي لتتحقّق منه مقابل تصميمك.
4. استخدم لوحة العيّنات الخمسية أسفل المعاينة. تولّق متغيّرات darker وdark وbase وlight وlighter بإزاحة إضاءة HSL بخطوات من 10 نقاط — مفيد لحالات hover/active أولبناء سلمٍ درجيّ من لون علامة واحد.
5. يُؤكّد سطر الحالة التحويل أويُبلغ عن رسالة Invalid color إن لم يُحلَّل مُدخلك.

الميزات الرئيسية#

• ثلاث صيغ مقبولة، أربع مرتجعة. الصق HEX أوrgb() أوhsl() واحصل على HEX وRGB وHSL وإعلان متغيّر CSS دفعةً واحدة.
• واعٍ بألفا. HEX الثماني (#rrggbbaa) ومُدخلات rgba()/hsla() تحمل قناة ألفا إلى المخرَج، فتُحوَّل الألوان الشفّافة ذهابًا وإيابًا بشكل صحيح.
• مولّد لوحة درجية. صفُّ التفتيح/التغميق الخمسي مشتقّ من HSL لونك نفسه، لا من منحدر جاهز — فيبدو دائمًا من العائلة ذاتها.
• متغيّر CSS جاهز للّصق. سطر --color-brand: #4f46e5; يُسقط مباشرةً في كتلة :root، وتُعيد تسميته لاحقًا باسم رمزك.
• 100% من جهة العميل. بلا خادم خلفيّ ولا طلب شبكة. ألوان علامتك لا تغادر الصفحة.

مثال عملي#

تُحمَّل الصفحة باللون النيلي #4f46e5. بهذا المُدخل تمتلئ الحقول الأربعة:

HEX:        #4f46e5
RGB:        rgb(79, 70, 229)
HSL:        hsl(243, 75%, 59%)
CSS var:    --color-brand: #4f46e5;

لاحظ كيف يُقرأ شكل HSL hsl(243, 75%, 59%) كجملة: تدرّج 243 (زاوية بنفسجية مائلة للأزرق على عجلة الألوان)، وتشبّع 75% (حيويّ نسبيًّا)، وإضاءة 59% (درجة وسطى أمضح قليلًا من رماديّ وسطي). لو طلب منك مصمّم «اجعله أميل للغمق قليلًا لحالة hover»، فستُنزل تلك الـ 59 إلى 49 لتحصل على hsl(243, 75%, 49%) — وهو بالضبط عيّنة dark التي يُنتجها مولّد اللوحة أسفل المعاينة، جنبًا إلى جنب مع light عند 69% والطرفان عند 39% و79%.

وإن ابتدأت بدلًا من ذلك من متغيّر CSS تملكه، فالصق قيمته في حقل النصّ. يُحلَّل rgba(79, 70, 229, 0.5) كالنيلي نفسه عند إضاءة 50%، فيصبح مخرَج HEX #4f46e580 (ثماني الرقم، ألفا 0x80 ≈ 0.5) جاهزًا للإسقاط في ورقة أنماط تفضّل HEX.

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

أعطاني مصمّسي #4f46e5 لكنّ أدوات المطوّرين تُظهر rgb(79, 70, 229). هل هما اللون نفسه؟#

نعم، تمامًا. HEX وRGB تمثيلان لقيم sRGB نفسها. ينقسم #4f46e5 إلى زوجَي بايت 4f و46 وe5، وهي الـ hex لـ 79 و70 و229. استخدم أيّهما يفضّل سياقك — يُعاملهما CSS كمتطابقَين.

متى ألجأ إلى HSL بدلًا من HEX؟#

كلّما أردت تغيير لون بشكل قابل للتنبؤ بالحسّ. التغميق والتفتيح وإنقاص التشبّع أولبناء لوحة خمس درجات من لون علامة واحدة هو رقمٌ واحد في HSL وموازنة ثلاثية محبطة في RGB. HEX أمثل للتخزين واللصق؛ وHSL أمثل للتحرير.

لماذا تبدو اللوحة غير متّسقة أحيانًا عند الألوان شديدة الغمق أوالإضاءة؟#

يُزيح المولّد الإضاءة بخطوات ثابتة من 10 نقاط ويحصر بين 0% و100%. قرب تلك الحدود تضغط الخطوات إذ لا يبقى متّسع للحركة — لون عند إضاءة 95% لا أمامه من «أمضح» إلا 5 نقاط قبل أن يبلغ الأبيض الخالص. تلك خاصّة لفضاء HSL نفسه، لا علّة.

هل تدعم هذه الأداة ألوان P3 أونطاقًا واسعًا؟#

لا. تعمل في فضاء sRGB الذي يصفه HEX/RGB/HSL الخاصّ بـ CSS، وهو يغطّي غالبية عمل الويب. أمّا Display-P3 وصياغة color() فخط أنابيب مختلف ولا تُحلَّل هنا.