مولد درجات اللون
توليد درجات فاتحة وداكنة لأي لون.
مولد درجات اللون
جاهزمولّد ظلال وتدرجات اللون أونلاين — أداة لوحة الألوان المجانية
مولّد الظلال والتدرجات الفاتحة من Toolsiro ينشئ مجموعة كاملة من الظلال (التنويعات الأغمق) والتدرجات الفاتحة (التنويعات الأفتح) من أي لون أساسي — فوراً في متصفحك. أدخل لون HEX أو اختره بمنتقي الألوان، اختر عدد الخطوات ووضع التوليد، واحصل على شريط لوحة مرئي وشبكة من كل تنويع جاهزة للنسخ. يتضمن تصدير Tailwind CSS للمطورين.
إنشاء مقياس لوني صحيح من الخطوات التأسيسية في بناء أي نظام تصميم. لون علامة تجارية واحد يحتاج 8–12 تنويعاً لتغطية جميع احتياجات واجهة المستخدم: خلفيات داكنة وحالات تحويم وحدود وتدرجات فاتحة خفية للحالات المعطلة وتوكيدات جريئة لأزرار الدعوة للعمل.
الظلال مقابل التدرجات الفاتحة — ما الفرق؟
في نظرية الألوان، الظل هو لون ممزوج بالأسود — يجعله أغمق مع الحفاظ على التدرج. التدرج الفاتح هو لون ممزوج بالأبيض — يجعله أفتح مع الحفاظ على التدرج. النبرة ممزوجة بالرمادي. هذه مفاهيم مختلفة، وإن كانت كلمة "ظل" تُستخدم بشكل فضفاض لتعني أي تنويع.
تُولِّد الأداة الظلال بالاستيفاء بين اللون الأساسي والأسود الخالص (#000000)، والتدرجات الفاتحة باتجاه الأبيض الخالص (#FFFFFF). يُولِّد وضع "كلاهما" ظلالاً على الجانب الأيسر من شريط اللوحة واللون الأساسي في المركز والتدرجات الفاتحة على اليمين.
اختيار عدد الخطوات المناسب
عدد الخطوات يتحكم في عدد تنويعات الظل/التدرج المُولَّدة على كل جانب. بـ10 خطوات تحصل على 10 ظلال واللون الأساسي و10 تدرجات فاتحة — 21 لوناً إجمالياً. تدعم الأداة 3–20 خطوة لكل جانب.
لأنظمة التصميم، 9 خطوات تُقارب هيكل مقياس ألوان Tailwind CSS (50، 100، 200، 300، 400، 500، 600، 700، 800، 900). هذا يجعل ميزة تصدير Tailwind مفيدة مباشرةً للمطورين.
شريط اللوحة
يُظهر شريط اللوحة جميع الألوان المُولَّدة جنباً إلى جنب كشريط أفقي من البقع اللونية. كل بقعة تتوسع عند التحويم، مُظهِرةً قيمة HEX ونسبة التغميق أو التفتيح المُطبَّقة. انقر على أي بقعة لنسخ لون HEX الخاص بها.
الشريط أسرع طريقة لتقييم النطاق الكلي للوحتك — يمكنك فوراً رؤية ما إذا كانت التحولات مفاجئة للغاية، وما إذا كانت النهاية الداكنة جداً تحافظ على أي طابع لوني.
تصدير Tailwind CSS
يُولِّد التصدير لـTailwind مقطع تهيئة لون جاهزاً للصقه في ملف tailwind.config.js. أول 10 ألوان من لوحتك تُعيَّن لقيم المقياس القياسية لـTailwind (50، 100، 200، 300، 400، 500، 600، 700، 800، 900)، مما يجعل الألوان المُصدَّرة قابلة للاستخدام فوراً كـtext-primary-500 وbg-primary-100 وborder-primary-700 وهكذا في مشروع Tailwind الخاص بك.
هذا يُزيل إحدى أكثر الخطوات مللاً في إعداد مخطط لون Tailwind مخصص: إنشاء وإدخال جميع قيم المقياس يدوياً. اختر لون علامتك التجارية، ولِّد المقياس، صدِّر لتهيئة Tailwind، واحصل على نظام لون كامل وجاهز للإنتاج في أقل من دقيقة.
بناء مقياس ألوان نظام التصميم
نظام التصميم الاحترافي يُعرِّف عادةً لوناً أساسياً ولوناً ثانوياً ورماديات محايدة وألواناً دلالية (أخضر للنجاح، كهرماني للتحذير، أحمر للخطأ، أزرق للمعلومات). كل منها يحتاج مقياساً كاملاً من الظلال والتدرجات الفاتحة.
الاتفاقية المستخدمة في أنظمة التصميم الشائعة: قيمة 500 عادةً هي اللون الأساسي/للعلامة التجارية. 100–400 تدرجات فاتحة تدريجياً (تُستخدم للخلفيات والحالات المعطلة والتعبئات الخفية). 600–900 ظلال تدريجياً (تُستخدم لحالات التحويم والحالات المضغوطة وتوكيدات الوضع الداكن والنص الداكن).
تطبيقات التصميم العملية
حالات الأزرار: استخدم اللون الأساسي للحالة الافتراضية، وظلاً (10–15% أغمق) لحالة التحويم، وظلاً أعمق (20–25% أغمق) لحالة الضغط، وتدرجاً فاتحاً خفيفاً (60–70% أفتح) للحالة المعطلة.
تلوين الخلفية: التدرجات الفاتحة جداً (80–90% أفتح) مثالية لخلفيات الأقسام وخلفيات حقول الإدخال وخلفيات البطاقات. تخلق تسلسلاً هرمياً بصرياً دون استخدام لون ثقيل.
ألوان الحدود: التدرجات الفاتحة المتوسطة (30–50% أفتح) تعمل بشكل جيد للحدود على العناصر الملونة — فاتحة بما يكفي للتمييز، وداكنة بما يكفي لتبقى مرئية على الخلفيات البيضاء.
الوضع الداكن: للواجهات بالوضع الداكن، استخدم ظلال اللون الأساسي للنص والحدود والتوكيدات على الخلفيات الداكنة.
أسئلة شائعة
ما الفرق بين الظل والتدرج الفاتح؟ الظل يمزج اللون بالأسود (أغمق). التدرج الفاتح يمزجه بالأبيض (أفتح). تُولِّد هذه الأداة الاثنين منهجياً من أي لون أساسي.
هل يمكنني استخدام تصدير Tailwind مباشرةً؟ نعم — انسخ التهيئة المُصدَّرة والصقها في قسم colors أو extend.colors في ملف tailwind.config.js. سيكون المقياس متاحاً فوراً كفئات أدوات في جميع أنحاء مشروعك.
لماذا تبدو بعض الظلال بنية أو باهتة؟ عند تغميق تدرجات معينة (خاصةً الأصفر والبرتقالي) بمزجها بالأسود في فضاء RGB، يمكن أن ينجرف التدرج نحو البني. هذا قيد معروف للاستيفاء الخطي في RGB. للتغميق المتسق إدراكياً، فضاء اللون Lab أو OKLab سيُنتج نتائج أفضل.
كم عدد الخطوات التي يجب استخدامها؟ 9–10 خطوات لكل جانب معيار لأنظمة التصميم. 5 خطوات تكفي للمشاريع البسيطة. 3 خطوات تُعطي مقياساً أدنى: ظل داكن واحد واللون الأساسي وتدرج فاتح واحد.