مولد لوحات الألوان
أنشئ لوحات ألوان من قواعد تناسق الألوان أو من صورة. اعرض الدرجات والتباين والتدرجات، وصدّر إلى CSS وSCSS وTailwind وJSON وSwift وAndroid وFigma.
جارٍ تحميل مولد لوحات الألوان…
ملفاتك لا تغادر جهازك أبدًا
طريقة استخدام مولد لوحات الألوان
- 1
افتح مولد لوحات الألوان في هذه الصفحة. تُحمَّل مباشرة في متصفحك.
- 2
أضف ملفك أو نصك أو القيم، واضبط الإعدادات.
- 3
انسخ النتيجة أو نزّلها. لا يُرفع أي شيء ولا يُخزَّن.
عن هذه الأداة
ينشئ مولد لوحات الألوان هذا مخططات ألوان متناسقة للمواقع والتطبيقات والعلامات التجارية والرسوم. ابدأ بلون أساسي وقاعدة تناسق، أو ارفع صورة واستخرج ألوانها الرئيسية. يأتي كل لون مع درجاته وقيم HEX وRGB وHSL وفحص للتباين، وتُصدَّر اللوحة كاملة مباشرة إلى الكود أو أداة التصميم.
طريقة إنشاء لوحة ألوان
- اختر لونا أساسيا، أو ارفع صورة لاستخراج لوحة منها.
- اختر قاعدة تناسق (انظر أدناه) أو ابدأ من إعداد جاهز.
- عدّل الألوان، ثم انقر أي لون أو درجة لنسخ قيمتها.
- راجع نتائج تباين WCAG قبل استخدام الألوان للنصوص.
- صدّر اللوحة بالصيغة التي تحتاجها.
قواعد تناسق الألوان
- متكامل: لونان متقابلان على عجلة الألوان، لتباين قوي.
- متجاور: ألوان متجاورة على العجلة، هادئة وطبيعية.
- ثلاثي: ثلاثة ألوان متباعدة بالتساوي، حيوية لكنها متوازنة.
- رباعي ومتكامل منقسم مزدوج: أربعة ألوان لمخططات غنية، اجعل أحدها مهيمنا.
- متكامل منقسم: لون أساسي مع جاري لونه المكمل، أنعم من المتكامل.
- أحادي اللون: درجات فاتحة وغامقة من لون واحد، أنيق ومضمون.
- مخصص: اختر كل لون بنفسك.
صيغ التصدير
انسخ اللوحة أو نزّلها كخصائص مخصصة في CSS، أو متغيرات SCSS، أو إعداد ألوان Tailwind، أو JSON، أو Swift (iOS)، أو ألوان XML لنظام Android، أو قائمة جاهزة لبرنامج Figma. وينشئ منشئ التدرجات تدرجات خطية أو شعاعية أو مخروطية من ألوانك وينسخ كود CSS.
نصائح للوحة ألوان ناجحة
- اتبع قاعدة 60/30/10: لون مهيمن لمعظم المساحة، ولون ثانوي، ولون مميز للأزرار والعناصر البارزة.
- افحص تباين النص. يتطلب مستوى WCAG AA نسبة 4.5:1 على الأقل للنص العادي، ومستوى AAA نسبة 7:1.
- أضف ألوانا محايدة. تحتاج معظم الواجهات إلى تدرج رمادي إلى جانب ألوان العلامة التجارية.
- جرّب الوضع الداكن إن كان منتجك يدعمه، فالألوان المشبعة قد تبدو متوهجة على الخلفيات الداكنة.
تحتاج تدرجا فقط؟ جرّب مولد تدرجات CSS. ولفحص زوج من الألوان بالتفصيل استخدم مدقق التباين.
الأسئلة الشائعة
هل يمكنني الحصول على لوحة ألوان من صورة؟
نعم. ارفع صورة وستستخرج الأداة ألوانها الغالبة في لوحة يمكنك تعديلها وتصديرها.
ما تناسق الألوان؟
قاعدة لاختيار ألوان تبدو جميلة معا بناء على مواقعها على عجلة الألوان، مثل المتكامل والمتجاور والثلاثي.
هل يمكنني تصدير اللوحة إلى Tailwind CSS؟
نعم. اختر تصدير Tailwind لتحصل على إعداد ألوان تلصقه في مشروعك. وتتوفر أيضا صيغ CSS وSCSS وJSON وSwift وAndroid وFigma.
كيف أعرف إن كان النص سيُقرأ بوضوح على لون ما؟
تعرض اللوحة فحص تباين WCAG. استهدف 4.5:1 على الأقل للنص العادي (AA) أو 7:1 للمستوى الأشد AAA.
كيف أنسخ كود اللون؟
انقر أي لون أو درجة فتُنسخ قيمته. تظهر قيم HEX وRGB وHSL لكل لون.
هل يمكنني صنع تدرج من لوحتي؟
نعم. ينشئ منشئ التدرجات تدرجات خطية أو شعاعية أو مخروطية من ألوانك وينسخ كود CSS.