مولد لوحة الألوان

اختر القاعدة المناسبة

بنية عملية للوحة

لوحة التناغم الناتجة نقطة بداية، وليست نظام تصميم كاملًا. في واجهات الإنتاج، سمّ الألوان حسب الدور لا حسب المظهر: primary وsecondary وaccent وsurface وborder وtext وsuccess وwarning وerror. أضف درجات الرمادي المحايدة بشكل منفصل، لأن الألوان المحايدة تحتاج غالبًا إلى تحكم أدق من مولد يعتمد على hue.

استخدم ألوان HEX الناتجة مباشرة في النموذج الأولي، ثم احتفظ فقط بالألوان التي تنجح على الشاشات الحقيقية، والخلفيات الفاتحة والداكنة، وحالات hover وdisabled.

التصدير كمتغيرات CSS

تستخدم خطوة التصدير خصائص مخصصة بسيطة:

:root {
  --palette-1: #6366F1;
  --palette-2: #818CF8;
  --palette-3: #4F46E5;
}

أعد تسمية هذه المتغيرات بأسماء نظامك عند لصقها في CSS، أو Tailwind theme tokens، أو ملف design tokens.

HEX وRGB وHSL

يعتمد الإدخال والمخرج المرئي على HEX لأنه أسرع تنسيق للنسخ بين CSS وأدوات التصميم وتعليقات المهام. داخليًا، يحول المولد اللون الأساسي إلى HSL، ثم يغيّر hue أو lightness، وبعد ذلك يعيد النتائج بصيغة HEX. إذا احتجت إلى RGB أو HSL، فحوّل قيم HEX الناتجة باستخدام محول أكواد الألوان.

التباين وإمكانية الوصول

قواعد التناغم لا تضمن إمكانية الوصول. قبل استخدام أي زوج ألوان للنص أو عناصر التحكم أو الرسوم، افحصه بأداة تحقق من التباين:

• النص العادي فوق الخلفية: 4.5:1 على الأقل لمستوى WCAG AA.
• النص الكبير: 3:1 على الأقل.
• أجزاء UI غير النصية المهمة مثل حدود الأزرار، والأيقونات، وحلقات التركيز، وحواف الرسوم: 3:1 على الأقل مقابل الألوان المجاورة.

لا تعتمد على hue وحده. قد يبدو لونان مختلفين في العينة، لكنهما يفشلان مع النص الصغير، أو الأيقونات الرفيعة، أو تسميات الحالة.

نصائح

• ابدأ بلون أساسي له معنى، مثل لون علامة تجارية أو منتج أو حملة موجودة.
• اختر لونًا مهيمنًا واحدًا واجعل البقية داعمة. الوزن المتساوي لكل الألوان يجعل معظم الواجهات مزدحمة.
• قلل التشبع على المساحات الكبيرة مثل خلفيات التطبيقات، واللوحات، وأقسام hero.
• أعد الاختبار بعد تطبيق الثيم. لوحة تعمل على خلفية بيضاء قد تفشل في الوضع الداكن أو داخل الرسوم الكثيفة.