نظرة عامة
مولِّد ألوان CSS أداة بصرية لتوليد كود ألوان CSS. تفاعل مع مُنتقي الألوان وشريط تمرير ألفا لتحصل فوراً على HEX و HEX ثماني الخانات (مع ألفا) و RGB و RGBA وكود خاصية CSS مخصصة، بحيث يستطيع مطورو الواجهة الأمامية والمصممون تجميع الألوان المتوافقة مع CSS ونسخها بسرعة.
كيفية استخدام هذه الأداة
الخطوة 1 — اختر لوناً بواسطة مُنتقي الألوان الأصلي (انقر العيِّنة) أو اكتب قيمة HEX في المربع. الخطوة 2 — اسحب شريط ألفا لتغيير الشفافية (0 شفاف تماماً، و1 مُعتِم تماماً)؛ تُرسَم العيِّنة أدناه على خلفية مُشطَّرة لترى تأثير الشفافية. الخطوة 3 — انقر إحدى العيِّنات المُعدَّة مسبقاً لتعبئة لون سمة شائع. الخطوة 4 — في لوحة "كود CSS" يوجد لكل صيغة زر "نسخ"؛ النتيجة جاهزة للصق في ملف CSS أو نمط مكوِّن.
حالات الاستخدام الشائعة
ينتج مطورو الواجهة الأمامية الذين يصححون أنماط المكوِّنات الألوان ذات قناة ألفا بسرعة (مثل
rgba(0, 229, 255, 0.5))؛ توحِّد فرق أنظمة التصميم لوحة الألوان وتُصدِر كود متغيرات CSS؛ تعديل درجة اللون في التراكب أو القناع أو حالة التمرير؛ تحويل الألوان من مواصفات التصميم إلى كود CSS كامل؛ التكرار على خيارات الألوان أثناء بناء ميزة تبديل السمة.التفاصيل التقنية
يستخدم HEX ثماني الخانات صيغة
#RRGGBBAA حيث تكون AA هي التمثيل السداسي لألفا (0.5 → 7f)، وهو مدعوم في CSS Color Module Level 4. تستخدم ألفا في RGBA رقماً عشرياً بين 0 و 1. يستخدم مقطع متغير CSS العنصر النائب --color — أعد تسميته حسب الحاجة. يدعم HEX التوسيع التلقائي لثلاث خانات إلى ست خانات. العيِّنات المُعدَّة مسبقاً مجموعة نابضة بالحياة تُستخدم عادةً في التصميم.الخصوصية والأمان
يجري كل توليد الألوان محلياً في متصفحك ولا تُجرى أي طلبات شبكة.