مولد متغيرات CSS

أنشئ متغيرات CSS المخصصة من ألوانك مع سلالم درجات اختيارية.


  

عن مولد متغيرات CSS

حوّل قائمة الألوان إلى متغيرات CSS نظيفة. سمِّ كل لون، وولّد اختيارياً سلالم الدرجات 50–900 ومتغيرات قنوات RGB، ثم انسخ النتيجة.

طريقة الاستخدام

  1. أضف الألوان وامنح كلاً منها اسماً.
  2. اختر البادئة وخيارات الإخراج.
  3. راجع كتلة ‎:root الناتجة.
  4. انسخ ملف CSS أو نزّله.

أمثلة

  • --color-primary: #4f46e5;
  • سلالم من ‎--color-primary-100 إلى ‎--color-primary-900.

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

ما متغيرات قنوات RGB؟
متغيرات مثل ‎--color-primary-rgb: 79 70 229 تتيح كتابة rgb(var(--color-primary-rgb) / 50%) للشفافية.
كيف تُصنع سلالم 50–900؟
تُمزج الدرجات الأفتح نحو الأبيض والأغمق نحو الأسود في OKLab لتباعد إدراكي متساوٍ.
هل تُنظَّف الأسماء؟
نعم، تُحوَّل إلى أحرف صغيرة مفصولة بشرطات.

أدوات ذات صلة