ما هو منشئ مخططات الألوان؟

يُولّد منشئ أطقم الألوان لوحات ألوان كاملة من لون أساسي واحد باستخدام قواعد نظرية الألوان. اختر بين الأطقم الأحادية اللون أو التكاملية أو التكاملية المنقسمة أو المنقسمة المزدوجة أو الثلاثية أو الرباعية أو المتماثلة وضبط كل عيّنة. انسخ رابط مشاركة، أو صدّر كمتغيرات CSS أو إعدادات Tailwind، أو انسخ رموز hex.

اختر أي لون أساسي بصيغة hex، ويُجري المولّد الدورات المعتادة على عجلة الألوان: 180 درجة للتكامل، و150 و210 درجة لجناحَي التكامل المنقسم، و120 درجة للثلاثي، و90 درجة للرباعي، وخطوات صغيرة على الجانبين للألوان المتشابهة. الظلال والإضاءات تحتفظ بالدرجة نفسها وتُعدّل السطوع في فضاء HSL بخطوات ثابتة، فتحصل على خمس درجات مرتّبة لكل لون. كل عيّنة قابلة للنسخ بصيغة HEX أو rgb() أو hsl() أو oklch()، ولوحة التباين تقيس كل لون مقابل الأبيض والأسود وفق WCAG AA و AAA، ومعاينة الرؤية تعيد رسم كامل اللوحة عبر مرشّحات عمى الأحمر أو الأخضر أو الأزرق بضغطة واحدة. انسخ رابط المشاركة لحفظ اللوحة أو إرسالها إلى زميل دون حاجة إلى حساب.

كيفية الاستخدام

1. اختر لوناً أساسياً باستخدام منتقي الألوان أو أدخل رمز hex.
2. اختر نوع الطقم (أحادي اللون، تكاملي، تكاملي منقسم، منقسم مزدوج، ثلاثي، متماثل، رباعي) لتوليد اللوحة.
3. انسخ رموز hex الفردية، أو صدّر اللوحة الكاملة كمتغيرات CSS، أو نزّلها كصورة عيّنة.

متى تستخدم

• تحويل لون hex واحد للعلامة التجارية إلى لوحة كاملة لموقع جديد أو تطبيق.
• التحقق من وجود لون متكامل نظيف للوغو قبل طباعة منتجات دعائية.
• توليد متغيرات CSS دون الحاجة لفتح Figma أو أي أداة تصميم.

النتيجة

اختار مطوّر ويب اللون الأزرق الأساسي لعلامته التجارية (#3B82F6)، وولّد طقماً ثلاثياً ينتج درجات تكاملية من البرتقالي والأخضر، ثم صدّر اللوحة كخصائص CSS مخصصة لنظام تصميمه.

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

ما الفرق بين النظام الثلاثي والرباعي؟

الثلاثي يستخدم ثلاثة ألوان متباعدة 120 درجة على العجلة، فيعطي ثلاثياً متوازناً. الرباعي يستخدم أربعة ألوان تشكّل مستطيلاً (زوجين متكاملين)، يقدم تنوعاً أكبر لكن توازنه البصري أصعب.

متى أستخدم الظلال ومتى الإضاءات؟

الظلال (إصدارات أغمق) ممتازة للنصوص والحدود وحالات hover على واجهات فاتحة. الإضاءات (إصدارات أفتح) للخلفيات وحالات التعطيل والإبرازات الناعمة. أغلب أنظمة التصميم تحتاج التدرّجين.

هل المولّد يأخذ تباين الوصول بعين الاعتبار؟

نعم — لوحة التباين أسفل اللوحة تعرض نسبة WCAG لكل لون مقابل الأبيض والأسود مع شارات نجاح أو رسوب لـ AA و AAA. عتبة 4.5:1 للنص العادي تُلبّي معظم احتياجات الواجهات؛ ثم بدّل معاينة الرؤية إلى عمى الأحمر أو الأخضر أو الأزرق لترى كيف تبدو اللوحة لمن لديهم خلل في رؤية الألوان.

لماذا تبدو الألوان المتشابهة أهدأ من المتكاملة؟

الألوان المتشابهة متجاورة على العجلة وتتشارك العائلة اللونية، فيقل التوتر البصري. المتكاملة على طرفي العجلة، فيرتفع التباين ويبدو الإحساس أكثر طاقة لكنه متعب للعين في المساحات الكبيرة.

هل يمكن التصدير إلى إعدادات Tailwind أم فقط متغيرات CSS؟

كلاهما مدعوم. متغيرات CSS تُلصق مباشرة تحت :root في ملف الأنماط. صيغة Tailwind تضع قيم hex داخل كائن theme.extend.colors قابل للصق في tailwind.config.js.

أدوات ذات صلة