محول الألوان

محول الألوان أداة مجانية تحوّل اللون المُدخل بصيغة HEX أو HEX alpha أو RGB أو RGBA أو HSV أو HSL أو HSLA إلى عدة صيغ لونية مكافئة.

ما صيغ الألوان التي يمكنني تحويلها؟

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

• HEX تمثل قنوات الأحمر والأخضر والأزرق بأزواج سداسية عشرية، وتأتي عادةً بالشكل #RRGGBB.
• HEX ألفا تضيف قناة للعتامة. وفي صياغة CSS الحديثة، تظهر عادةً بالشكل #RRGGBBAA.
• RGB تستخدم قيماً لقنوات الأحمر والأخضر والأزرق، ويتراوح كل منها عادةً من 0 إلى 255.
• RGBA تضيف شفافية ألفا إلى RGB.
• HSV تصف تدرج اللون والتشبع والقيمة. وهي شائعة في أدوات انتقاء الألوان، لكنها ليست دالة ألوان قياسية في CSS.
• HSL تصف تدرج اللون والتشبع والإضاءة. وتدعم CSS صيغة HSL مباشرةً.
• HSLA هي صيغة HSL مضافاً إليها قيمة ألفا.

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

كيف أستخدم محول الألوان؟

أدخل قيمة لون كاملة في حقل Color بإحدى الصيغ المقبولة، ثم اقرأ القيم الناتجة أو انسخها من حقول الإخراج.

1. انسخ القيمة الأصلية كما هي تماماً، بما في ذلك علامة المربع في بدايتها والفواصل والأقواس وعلامات النسبة المئوية ومكوّن ألفا، إن وُجد.
2. ألصقها في حقل Color.
3. اطّلع على القيم المكافئة المعروضة ضمن HEX وHEX ألفا وRGB وRGBA وHSV وHSL وHSLA.
4. اختر من صيغ الألوان المدعومة ما يقبله النظام المستهدف. عند كتابة قاعدة CSS، تكون HEX وRGB وRGBA وHSL وHSLA خيارات شائعة. أما HSV فتُستخدم أكثر في واجهات التحرير وحسابات الألوان.

تتم عملية التحويل على الخادم. يُرسل إدخالك إلى الخادم عبر HTTPS ولا يُخزّن. ورغم أن لوناً منفرداً نادراً ما يكون حساساً، فكّر في مدى سرية لوحة ألوان لم تُنشر بعد أو مجموعة من رموز التصميم قبل إرسالها إلى أي خدمة عبر الإنترنت.

المسافات وعلامات الترقيم جزء من بنية RGB وHSL والصيغ المرتبطة بهما، بينما تميّز علامات النسبة المئوية القيم المئوية. لا يعبّر رقم منفرد أو حقل فارغ أو نص عشوائي عن لون. كذلك، لا تحمل النصوص ذات الأحرف المنبّرة أو المكتوبة بأنظمة غير لاتينية أي معنى محدد في هذه الصيغ الرقمية.

كيف أقرأ القيم الناتجة عن التحويل؟

اقرأ كل نتيجة باعتبارها صياغة أخرى للون نفسه، وانتبه خصوصاً إلى نطاقات القنوات والنسب المئوية وشفافية ألفا. ويعتمد الحقل الذي ينبغي نسخه على صيغة الألوان التي يدعمها النظام المستقبِل.

في HEX المكوّنة من ستة أرقام، يمثل الزوج الأول الأحمر، والثاني الأخضر، والثالث الأزرق. على سبيل المثال، تتضمن #336699 قيم القنوات السداسية العشرية 33 و66 و99، وهي تقابل قيم RGB العشرية 51 و102 و153.

يُعبّر عن تدرج اللون عادةً بزاوية حول عجلة الألوان، بينما يُعبّر غالباً عن التشبع والإضاءة أو القيمة بنسب مئوية. تُحسب إضاءة HSL وقيمة HSV بطريقتين مختلفتين، لذلك لا ينبغي مقارنة نسبتيهما كما لو كانتا تقيسان الخاصية نفسها.

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

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

أمثلة عملية على تحويل الألوان

يوضح مثال بسيط العلاقة بين HEX وRGB وHSL وHSV. يمكن كتابة الأحمر النقي بالصيغ المكافئة التالية.

• إدخال HEX بالقيمة #ff0000
• القيمة المكافئة بصيغة RGB هي rgb(255, 0, 0)
• القيمة المكافئة بصيغة HSL هي hsl(0, 100%, 50%)
• القيمة المكافئة بصيغة HSV هي hsv(0, 100%, 100%)

بالنسبة إلى لون أقل تشبعاً، تكافئ #336699 القيمة rgb(51, 102, 153). وتمثيلها بصيغة HSL هو hsl(210, 50%, 40%)، بينما يكون تدرج اللون في تمثيل HSV بمقدار 210 درجات، والتشبع نحو 66.7%، والقيمة 60%. قد تقرّب الواجهة القيم العشرية أو تغيّر المسافات من دون أن يتغير المعنى العملي.

تقدم الشفافية مثالاً بسيطاً آخر. تصف كل من rgba(255, 0, 0, 0.5) وhsla(0, 100%, 50%, 0.5) اللون الأحمر بنصف عتامة. ووفق اصطلاح CSS الشائع لصيغة HEX المكوّنة من ثمانية أرقام، تكون القيمة المقابلة #ff000080، حيث تمثل 80 بايت ألفا بعد تكميمه.

متى يكون تحويل اللون مفيداً؟

يكون تحويل اللون مفيداً عندما يتطلب التطبيق المستقبِل صيغة مختلفة، أو عندما تسهّل صيغة أخرى اكتشاف الأخطاء. من الحالات المعتادة تحويل قيمة من Figma إلى خاصية CSS مخصصة، أو التحقق من قيمة RGBA عُثر عليها في Chrome DevTools، أو تجهيز حقول الألوان لحمولة واجهة برمجة تطبيقات، أو مراجعة بيانات سمة من جهة خارجية قبل نشرها.

غالباً لا تحتاج إلى التحويل إذا كانت الصيغة الحالية مدعومة بالفعل في الوجهة. فلا فائدة كبيرة من تحويل HEX المكوّنة من ستة أرقام إلى RGB لمجرد استخدامها في CSS قابلة للقراءة آلياً، كما قد يؤدي تكرار التحويل في الاتجاهين إلى تقريب قيم HSL أو HSV. وبالمثل، لا تضف قناة ألفا إذا كانت جميع الألوان معروفة بأنها معتمة بالكامل.

إذا أردت اختيار لون بصرياً بدلاً من تحويل قيمة معروفة، فاستخدم منتقي الألوان، فهو الأداة الأنسب مباشرةً. ولا يغني تحويل الألوان عن اختبار التباين أو محاكاة عمى الألوان أو إدارة ملفات تعريف الألوان. فتطابق القيم الرقمية لا يثبت أن النص الأمامي يستوفي متطلبات التباين في WCAG.

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

هل يقبل المحول أسماء الألوان في CSS؟

لا. الصيغ المقبولة الموثقة هي HEX وHEX alpha وRGB وRGBA وHSV وHSL وHSLA، لذلك لا تُدرج أسماء مثل red أو rebeccapurple أو transparent ضمن المدخلات المدعومة. حوّل اسم اللون إلى قيمة CSS رقمية قبل إدخاله.

هل يمكنني إدخال قيمة HEX من ثلاثة أرقام؟

تشمل المدخلات المقبولة صيغة HEX، لكن أطوال قيم HEX المدعومة غير موثقة. للحصول على نتيجة متوقعة، وسّع الصيغة المختصرة مثل #369 إلى #336699. وينطبق المبدأ نفسه على الصيغة المختصرة من أربعة أرقام التي تتضمن ألفا.

هل يمكنني لصق تصريح CSS كاملاً بدلاً من قيمة اللون؟

أدخل قيمة اللون بدلاً من التصريح كاملاً. على سبيل المثال، استخدم #336699 بدلاً من color: #336699; لأن اسم الخاصية والفاصلة المنقوطة ليسا جزءاً من اللون نفسه. واحذف علامتي الاقتباس المحيطتين بالقيمة عند نسخها من JSON أو من ملف إعدادات.

هل تحتفظ النتيجة بمعلومات النطاق اللوني الواسع أو ملف تعريف اللون؟

لا تُدرج أي صيغ ذات نطاق لوني واسع أو ملفات تعريف ألوان مضمنة ضمن الخيارات المدعومة. تحتوي بيانات Display P3 وLab وLCH وملفات تعريف ICC على معلومات لا يمكن لحقول HEX وRGB وHSL وHSV المتاحة التعبير عنها. استخدم تطبيقاً يدعم إدارة الألوان عندما تحتاج إلى تحويل يراعي ملفات التعريف.

لماذا تحتوي القيم المحوّلة أحياناً على أرقام عشرية؟

قد تنتج حسابات HSL وHSV نسباً مئوية كسرية حتى عندما تكون قنوات RGB الأصلية أعداداً صحيحة. وقد يؤدي تقريب هذه القيم إلى تغيير طفيف عند تحويلها لاحقاً إلى RGB. احتفظ بالدقة المتاحة عند تخزين رموز التصميم، ولا تقرّب القيم إلا إذا كانت الصيغة المستهدفة أو معايير كتابة الشفرة تتطلب ذلك.