Tailwind CSS کلر پیلیٹ جنریٹر

کسی بھی بنیادی رنگ سے 50 تا 950 تک کا مکمل Tailwind کلر شیڈ پیلیٹ تیار کریں۔

Tailwind CSS کلر پیلیٹ جنریٹر

کسی بھی بنیادی رنگ سے 50 تا 950 تک کا مکمل Tailwind کلر شیڈ پیلیٹ تیار کریں۔

كيف يعمل

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.
مركز المفاهيم والمعرفة

مولد لوحات ألوان Tailwind CSS وتدرجات الشيدز (50-950) وتصدير التكوين البرمجي

يُعد نظام تدرجات الألوان المتسق والمبني على 11 درجة لونية متباينة (من 50 الفاتح جداً إلى 950 الداكن المشبع) أحد أعظم أسباب النجاح البصري والتناسق الهندسي لإطار العمل الشهير Tailwind CSS. يتيح هذا الاستوديو اللوني المتطور للمطورين والمصممين توليد لوحة ألوان كاملة ومتقنة انطلاقاً من لون هوية علامتك التجارية الأساسي (Hex/RGB)، معتمداً على خوارزميات الاستيفاء الإدراكي للفضاء اللوني الحديث OKLCH لمنع تشوه الألوان في الدرجات القصوى.

يقوم المحرك بحساب التدرجات اللمعانية والصفاء اللوني بدقة رياضية مبرمجة؛ حيث يعين الدرجة 50 كخلفية خفيفة ناعمة للبطاقات بنسبة إضاءة 97%، ويثبت لونك الأصلي عند الدرجة 500 أو 600 كدرجة تفاعلية رئيسية للأزرار، ويختم اللوحة بالدرجة 950 بنسبة إضاءة 12% لتوفير ألوان نصوص وخلفيات ليلية عميقة وفائقة النقاء. على سبيل المثال، عند إدخال لون أزرق زمردي #0ea5e9، ينتج المحرك مصفوفة الـ 11 درجة بتوازن لوني استثنائي يخلو تماماً من المظهر الرمادي أو الباهت.

يوفر المولد إمكانية تصدير کوڈ بصيغة ملف التكوين tailwind.config.js الجاهز للکاپی الفوري داخل كائن theme.extend.colors، بالإضافة إلى متغيرات CSS المتوافقة محلياً بالكامل دون مغادرة جهازك.

البنية الأساسية والمعادلة الرياضية

استيفاء درجات الألوان: Hex ➔ Perceptual Color Space (OKLCH) ➔ Curvature Mapping [50: 97% L ➔ 500: Base L ➔ 950: 12% L] ➔ Export Code

يضمن التحويل في فضاء OKLCH الإدراكي الحفاظ على تشبع اللون وحيويته في الدرجات الداكنة والفاتحة وتفادي المظهر الطيني والرمادي المزعج.

أفضل الممارسات والإرشادات الأساسية

  • تجنب استخدام فضاء الألوان sRGB البسيط في التدرجات: الاستيفاء الرياضي في فضاء RGB العادي ينتج درجات باهتة وميتة؛ اعتمد دائماً على الفضاءات الإدراكية كـ OKLCH للحفاظ على الحيوية.
  • استخدام الدرجات 50 و 100 للخلفيات الناعمة وتنبيهات الإشعارات: توفر الدرجات الفاتحة تبايناً هادئاً كخلفيات لصناديق المعلومات والبطاقات بدلاً من استخدام الألوان المشبعة القاسية.
  • تخصيص الدرجة 950 حصرياً لخلفيات الوضع الليلي (Dark Mode): تم إضافة درجة 950 في إصدارات Tailwind الحديثة لتوفير خلفيات ليلية غنية تشبه لون الحبر الداكن بدلاً من الأسود الصامت.
  • فحص تباين النصوص مع الأزرار قبل اعتماد اللوحة: تأكد من أن كتابة نص أبيض فوق الدرجة 600 تحقق نسبة تباين لا تقل عن 4.5:1 وفق معايير إتاحة الويب الدولية.

الأسئلة الشائعة والأجوبة (FAQ)

كيف أدمج لوحة الألوان المكتملة داخل مشروعي في Tailwind CSS؟
اکاپی کوڈ الناتج من الأداة والصقه داخل قسم theme.extend.colors في ملف tailwind.config.js، وستتاح لك فوراً كلاسات مثل bg-brand-500 و text-brand-900 في مشروعك.
لماذا يولد نظام Tailwind عدد 11 درجة لونية بدلاً من الاكتفاء بـ 5 أو 6 درجات؟
لتوفير مرونة كاملة للمطورين لبناء حالات التفاعل (Hover و Active و Focus)، وتصميم عناصر الوضع الليلي والنهاري دون الحاجة لكتابة كود CSS مخصص إضافي.
كيف تمنع الأداة ظهور الألوان الداكنة بمظهر متسخ أو رمادي باهت؟
عبر استخدام خوارزميات الفضاء اللوني الإدراكي OKLCH التي تعدل الإضاءة والتشبع بصورة متوازنة تماثل إدراك العين البشرية، مما يحافظ على نقاء اللون الأزرق أو الأخضر حتى في الدرجة 950.
کیا میں تغيير اسم اللوحة من 'brand' إلى أي اسم مخصص آخر؟
جی ہاں، يمكنك تعديل اسم الكائن اللوني في حقل الإدخال ليتم تحديث كود ملف التكوين تلقائياً بالاسم الذي اخترته (مثل primary أو accent أو company).