مولِّد لوحة الألوان (5 مخططات من لون أساسي واحد)

مخططات نظرية الألوان الخمسة

التكميلي: لونان في طرفَيْ عجلة الألوان المتقابلَيْن (بفارق 180°). تباين عالٍ وحيوية. يُستخدم للعناصر البارزة وأزرار الاستدعاء للعمل وإنشاء نقاط تركيز.

المتناظر: ثلاثة ألوان متجاورة على العجلة (بفارق 30°). منسجم ومريح للنظر، تباين منخفض. شائع في الطبيعة؛ رائع للخلفيات وأسطح واجهة المستخدم.

الثلاثي: ثلاثة ألوان متساوية المسافة (بفارق 120°). حيوي ومتوازن. يُستخدم في التصاميم المرحة أو النشيطة.

الرباعي (مستطيل): أربعة ألوان تشكل مستطيلًا (بفارق 90°). لوحة غنية لكن أصعب في التوازن — استخدم واحدًا كلون مهيمن والباقي كعناصر بارزة.

أحادي اللون: ظلال وتلوينات وأصناف من درجة لون واحدة. متطور وموحَّد. شائع في التصاميم المبسَّطة والعلامات التجارية المؤسسية.

اختيار لون البداية

ألوان العلامة التجارية: معظم المشاريع تبدأ من شعار أو لون علامة تجارية موجود. اختبره كأساس عبر المخططات الخمسة لإيجاد أنسبها لتصميمك.

الإلهام: اختر لونًا من الصور الفوتوغرافية أو الفن أو الطبيعة. الألوان الزاهية (تشبع عالٍ، إضاءة متوسطة) تعمل بشكل أفضل كأساس؛ الألوان الشاحبة جدًا أو الداكنة جدًا تُنتج لوحات باهتة.

إمكانية الوصول: تأكد أن لوحتك النهائية لها تباين كافٍ للنص. استخدم فاحص التباين للتحقق من أن أزواج المقدمة/الخلفية تستوفي WCAG AA (4.5:1 للنص العادي).

استخدام اللوحة

متغيرات CSS: عرِّف ألوان اللوحة كمتغيرات :root (--color-primary وغيرها) حتى تتمكن من تبديل السمات بتغيير موقع واحد.

أدوات التصميم: الصق قيم hex في مكتبات الألوان في Figma أو Sketch أو Adobe XD. معظم الأدوات تقبل hex مباشرةً؛ بعضها يقبل HSL أو ألوان CSS المسمَّاة كذلك.

قيِّد الاستخدام: حتى مع 5 ألوان، تستخدم التصاميم الحقيقية عادةً 2-3 ألوان بارزة والباقي باعتدال. قاعدة 60-30-10 (60% مهيمن، 30% ثانوي، 10% بارز) توازن مبدئي مفيد.