ولّد طيفاً كاملاً من الفاتح والداكن من لون واحد — اختر خطوة التفتيح/التغميق وعدد الظلال، ثم انسخ أي قيمة فوراً.

اللون الأساسي
الخطوة
%
مقدار التفتيح/التغميق لكل ظل، لكل خطوة (1–25%).
عدد الظلال
عدد الفاتح والداكن للتوليد على كل جانب من اللون الأساسي.
تدرج
الظلال المولَّدة

اختر لوناً أساسياً ونسبة خطوة وعدداً — كل فاتح وداكن يُحسَب فوراً في متصفحك.


حول مولّد ظلال الألوان

أداة مولّد درجات الألوان توسّع لونًا واحدًا إلى نطاق كامل من الألوان الفاتحة والداكنة. أعطها لونًا أساسيًا وستنتج درجات أفتح تدريجيًا في جهة، ودرجات أغمق تدريجيًا في الجهة الأخرى — التدرج الكلاسيكي من 50 إلى 900 المستخدم في أنظمة التصميم الحديثة.

يشكّل المخرجات عنصران: نسبة الخطوة التي تحدد مقدار الفتوح أو الغمق في كل درجة (1–25% لكل خطوة)، والعدد الذي يحدد كم عدد الدرجات الفاتحة والداكنة التي تظهر على كل جانب من اللون الأساسي، حتى عشرة. يعرض شريط تدرج معاينة للتدرج الكامل بنظرة واحدة.

يحدث التوليد فورًا في متصفحك أثناء الكتابة — لا شيء يُرسل إلى خادم. انسخ أي قيمة فردية، أو القائمة الكاملة، أو التدرج بأكمله كمتغيرات CSS، جاهزة للإسقاط في ملف رموز تصميم أو مقياس ألوان بأسلوب Tailwind.

كيفية استخدام مولّد ظلال الألوان

  1. اختر لونًا أساسيًا باستخدام المنتقي أو اكتب قيمة؛ انقر "لون عشوائي" للإلهام.
  2. اضبط نسبة الخطوة للتحكم في مدى قوة فتوح أو غمق كل درجة.
  3. اختر عدد الدرجات لتحديد كم عدد الدرجات الفاتحة والداكنة التي تظهر على كل جانب.
  4. انقر على نموذج لون لنسخه، أو استخدم "نسخ الكل" و"نسخ متغيرات CSS" للتدرج الكامل.

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

نعم، مجاني تمامًا. تُحسب جميع الدرجات الفاتحة والداكنة مباشرة في متصفحك، لذا لا توجد تكلفة ولا حساب ولا حد لعدد التدرجات التي تولّدها.

الدرجة الفاتحة هي لونك الأساسي ممزوجًا نحو الأبيض (أفتح)، بينما الدرجة الداكنة هي اللون الأساسي ممزوجًا نحو الأسود (أغمق). يُنتج المولّد كلا الاتجاهين في آن واحد، بعنوان "الدرجات الفاتحة" و"الدرجات الداكنة" حول لونك الأساسي.

اضبط العدد على 4 أو 5 لكل جانب حتى تحصل على تسعة إلى أحد عشر نموذج لون إجمالًا، مع لونك الأساسي في المنتصف. عادة ما تعطي خطوة بنسبة 8–10% تقريبًا تباعدًا مشابهًا لمقاييس 50–900 المستخدمة في الأطر الشهيرة.

الخطوات الصغيرة (3–6%) تعطي تنويعات دقيقة للتحويم والحدود؛ الخطوات المتوسطة (8–12%) تناسب تدرجات أنظمة التصميم الكاملة؛ الخطوات الكبيرة (15–25%) تنشئ مجموعات عالية التباين تشبه الملصقات. راقب معاينة التدرج — يجب أن يظلم التدرج الجيد بشكل متساوٍ دون تكتلات.

نعم. "نسخ متغيرات CSS" يُخرج التدرج بأكمله كخصائص CSS مخصصة مسمّاة، و"نسخ الكل" يمنحك قائمة عادية بالقيم يمكنك لصقها في أي مكان، من خرائط SCSS إلى كائنات سمات JavaScript.

شارك هذا

عمليات البحث الشائعة
مولد درجات اللون درجات فاتحة وغامقة تفتيح وتغميق اللون درجات لون واحد مولد تدرج اللون توليد درجات اللون
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.
الإبلاغ عن مشكلة

أضف هذه الأداة المجانية إلى موقعك الخاص — انسخ والصق الكود أدناه.