ما هو مولّد رموز ألوان CSS؟

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

تستطيع كتابة قيمة سداسية، أو سحب منتقي الألوان، أو تحريك أشرطة RGB، أو لصق سلسلة rgb() أو hsl() موجودة. الأداة تحسب باقي الصيغ مباشرة بما فيها OKLCH للوحات الألوان المتجانسة إدراكياً، وتبحث أيضاً عن أقرب لون CSS مُسمَّى ضمن ١٤٧ لوناً من قائمة W3C. قيم alpha لا تظهر إلا حين تخفض الشفافية تحت ١٠٠٪، فتبقى أسطر rgba() وhsla() نظيفة للألوان المعتمة. وتعرض لوحة التباين نسبة WCAG على خلفية بيضاء وأخرى سوداء لتعرف بنظرة واحدة ما إذا كان اللون واضحاً كنص.

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

1. اختر لوناً باستخدام المنتقي البصري أو أدخل قيمة بأي تنسيق مدعوم (HEX أو RGB أو HSL).
2. اطّلع على اللون معروضاً في جميع تنسيقات CSS في آنٍ واحد، مع إمكانية النسخ بنقرة واحدة لكل تنسيق.
3. اضبط الشفافية باستخدام شريط تمرير ألفا للحصول على قيم RGBA وHSLA، ثم انسخ كود CSS الذي تحتاجه.

متى تستخدم

• تحويل لون HEX من المصمّمة إلى الصيغة التي يطلبها إطار CSS لديك.
• بناء لوحة ألوان والاحتياج لقيم HSL لاستخراج درجات أفتح وأغمق متسقة.
• إضافة شفافية للون علامة تجارية لاستخدامه في الطبقات والظلال وحالات التمرير.

النتيجة

مطوّر واجهات أمامية يختار برتقالي علامته التجارية #F97316 ويحصل فوراً على rgb(249, 115, 22) وhsl(25, 95%, 53%) وجميع التنسيقات الأخرى لاستخدامها باتساق في جميع أنحاء ورقة الأنماط.

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

لماذا يظهر حقل اللون المسمَّى فارغاً أحياناً؟

تحتوي CSS على ١٤٧ لوناً مسمَّى فقط، وقيمتك السداسية يجب أن تطابق إحداها تماماً. معظم ألوان العلامات التجارية تقع بين قيمتين مسماتين، وهذا طبيعي. الحقل مفيد للتحقق من ألوان شائعة مثل tomato أو steelblue.

متى يفضّل استخدام HSL بدلاً من HEX أو RGB؟

HSL أسهل في التعديل اليدوي: زيادة الإضاءة بـ ١٠ تمنحك درجة أفتح، وتحريك الصبغة بـ ٣٠ يدور بك حول عجلة الألوان. المصمّمون يفضّلون HSL عند بناء سلالم ألوان. أما RGB وHEX فأقصر قليلاً داخل ملف الأنماط النهائي.

هل يغيّر شريط الشفافية اللون أم الشفافية فقط؟

يغيّر قناة alpha فقط، وقيم الأحمر والأخضر والأزرق تبقى ثابتة. لهذا يبدو rgba(255, 0, 0, 0.5) فوق خلفية بيضاء وردياً، فالأحمر نفسه ممزوج بنسبة ٥٠٪ مع ما خلفه.

هل تعمل هذه الصيغ في كل المتصفحات؟

تتمتّع صيغ HEX وRGB وRGBA وHSL وHSLA والألوان المسمَّاة بدعم شامل منذ ١٥ سنة وحتى IE11. كما تُنتج الأداة صيغة OKLCH التي تعمل في كل المحرّكات الحديثة — Chrome وFirefox وSafari وEdge منذ ٢٠٢٣ — لذا أبقِ على بديل بصيغة hex أو rgb() إن كنت تستهدف محرّكات قديمة جداً.

كيف أستخرج HEX للون أراه على موقع؟

اضغط «التقاط من الشاشة» لفتح القطّارة، ثم انقر أي بكسل في أي مكان على شاشتك — صفحة أو صورة أو تصميم — فيُحمَّل ذلك اللون فورًا. (تعمل القطّارة على Chrome وEdge وOpera؛ أما على Safari أو Firefox فاستخدم القطّارة المدمجة في نظام التشغيل لالتقاط القيمة السداسية والصقها في حقل HEX.) في الحالتين تحصل على جميع الصيغ المكافئة والمتغيرات مع الشفافية دفعة واحدة.

أدوات ذات صلة