مولد لوحات الألوان المتدرجة
أنشئ سلّما لونيا ناعما من لون أساسي أو بين عدة ألوان. انسخ أي عينة، واحصل على CSS للتدرج، وصدّر إلى CSS أو Tailwind أو SCSS أو JSON.
جارٍ تحميل مولد لوحات الألوان المتدرجة…
ملفاتك لا تغادر جهازك أبدًا
طريقة استخدام مولد لوحات الألوان المتدرجة
- 1
افتح مولد لوحات الألوان المتدرجة في هذه الصفحة. تُحمَّل مباشرة في متصفحك.
- 2
أضف ملفك أو نصك أو القيم، واضبط الإعدادات.
- 3
انسخ النتيجة أو نزّلها. لا يُرفع أي شيء ولا يُخزَّن.
عن هذه الأداة
تحتاج أنظمة التصميم إلى أكثر من درجة لكل لون: درجات فاتحة للخلفيات، ومتوسطة للأزرار، وداكنة للنصوص وحالات التمرير. ينشئ مولد لوحات الألوان المتدرجة هذا سلّما لونيا ناعما من لون أساسي، أو سلسلة خطوات ممزوجة بين ألوان تختارها، ويصدّره مباشرة إلى الكود.
طريقة إنشاء سلّم لوني
- اختر لونا أساسيا.
- اختر الوضع: scale لدرجات لون واحد من الفاتح إلى الداكن، أو steps لمزج عدة ألوان تضيفها.
- أضف ألوانا أو احذفها واضبط عدد الخطوات.
- سمِّ اللوحة، وانقر أي عينة لنسخ كود HEX، وانسخ CSS للتدرج.
- صدّر اللوحة كمتغيرات CSS أو لون Tailwind أو متغيرات SCSS أو JSON.
استخدام السلّم في نظام تصميم
يسمي عرف شائع، يستخدمه Tailwind، الدرجات من 50 (الأفتح) إلى 900 أو 950 (الأغمق):
- 50 إلى 100: خلفيات الصفحات والبطاقات.
- 200 إلى 300: الحدود والتعبئات الخفيفة.
- 500 إلى 600: الأزرار الرئيسية والروابط.
- 700 إلى 900: حالات التمرير والنص على الخلفيات الفاتحة.
نصائح
- افحص التباين لأي درجة تستخدمها خلف النص باستخدام مدقق التباين.
- اجعل الخطوات متساوية لتبدو حالات التمرير والتفعيل متسقة.
- امزج صبغات متقاربة لتدرجات طبيعية؛ الصبغات المتباعدة قد تمر بالرمادي.
- سمِّ الألوان حسب دورها في الكود (primary وaccent) حتى يغيّر تجديد الهوية مكانا واحدا فقط.
لتركيبات متناسقة من ألوان مختلفة استخدم مولد لوحات الألوان. ولتصميم خلفية متدرجة واحدة جرّب مولد تدرجات CSS.
الأسئلة الشائعة
ما السلّم اللوني؟
سلسلة من درجات لون واحد من الفاتح إلى الداكن، تُستخدم بشكل متسق في الخلفيات والحدود والأزرار والنصوص.
هل يمكنني تصدير سلّم لوني لـ Tailwind؟
نعم. اختر تصدير Tailwind لتحصل على إدخال لون تلصقه في إعدادات Tailwind.
ما الفرق بين وضعي scale وsteps؟
Scale ينشئ درجات أفتح وأغمق من لون أساسي واحد، وSteps يمزج عدة ألوان تختارها بعدد الخطوات الذي تحدده.
كيف أنسخ لونا واحدا؟
انقر أي عينة لنسخ كود HEX الخاص بها.
ما الصيغ التي يمكنني التصدير إليها؟
متغيرات CSS وإعدادات Tailwind ومتغيرات SCSS وJSON، إضافة إلى CSS للتدرج.
هل هو مجاني؟
نعم، دون تسجيل.