مولّد لوحات الألوان

كيفية استخدام مولّد لوحات الألوان

1. اختر اللون الأساسي من عيّنة اللون، أو اكتب أي رمز في رمز اللون الأساسي (#4F46E5 أو rgb(79 70 229) أو hsl(243 75% 59%) أو اسم لون في CSS…).
2. اختر التناسق: متكامل، أو متجاور، أو ثلاثي، أو متكامل منقسم، أو رباعي (مستطيل)، أو مربع، أو أحادي اللون.
3. اختر عجلة الألوان: HSL (كلاسيكية) أو OKLCH (إدراكية). تتحدّث اللوحة كلما غيّرت أي خيار، ويحدّثها زر إنشاء اللوحة أيضًا.
4. انسخ لونًا واحدًا بزر نسخ أسفل عيّنته، أو اختر صيغة في التصدير بصيغة (قائمة HEX أو متغيرات CSS أو متغيرات SCSS أو مصفوفة JSON أو ألوان Tailwind) واستخدم نسخ أو تنزيل للوحة كاملة.

تعرض كل عيّنة رمز HEX الخاص بها بالأسود أو بالأبيض، أيهما أوضح تباينًا، مع موقعها بالنسبة إلى اللون الأساسي (مثل ‎+120°).

قواعد التناسق اللوني

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

• متكامل (0° و180°): اللون المقابل. أقصى تباين، وهو ممتاز لزر دعوة إلى إجراء بجانب اللون الرئيسي لعلامتك التجارية.
• متجاور (‎−60° و‎−30° و0° و‎+30° و‎+60°): الألوان المجاورة على العجلة. تركيبات هادئة وطبيعية تناسب الخلفيات والرسوم التوضيحية.
• ثلاثي (0° و120° و240°): ثلاث درجات متباعدة بالتساوي. حيوية ومتوازنة، وعادةً يطغى لون واحد ويكون اللونان الآخران للتمييز.
• متكامل منقسم (0° و150° و210°): الجاران المحيطان باللون المكمّل. تباين قوي بتوتر أقل من الزوج المتكامل الصافي.
• رباعي (مستطيل) (0° و60° و180° و240°): زوجان متكاملان. لوحات غنية تحتاج إلى لون واحد مهيمن لتبقى متماسكة.
• مربع (0° و90° و180° و270°): أربع درجات متباعدة بالتساوي.
• أحادي اللون: درجة لون واحدة في خمس مراحل من الإضاءة، من الداكن إلى الفاتح. مثالي لحالات الواجهة والرسوم البيانية والتصاميم الهادئة.

عجلة HSL أم OKLCH؟

عجلة HSL (كلاسيكية) هي العجلة التقليدية التي تستخدمها أغلب أدوات التصميم والدروس. عيبها أن الزوايا المتساوية لا تبدو متساوية السطوع: فالأصفر عند 60° يبدو أفتح بكثير من الأزرق عند 240° مع أن لهما إضاءة HSL نفسها.

أما عجلة OKLCH (إدراكية) فتدوّر درجة اللون في نموذج Oklab المصمَّم لتبدو الإضاءة فيه متّسقة. وتضم اللوحات المبنية عليها ألوانًا متقاربة في ثقلها البصري، مما يساعد على تحقيق تباين يسهل الوصول إليه. وقد تقع بعض الألوان الناتجة عن التدوير خارج ما تستطيع الشاشة عرضه، فتخفّض الأداة صفاءها اللوني قليلًا لتبقى قابلة للعرض.

استخدام اللوحة المصدَّرة

تُنتج متغيرات CSS كتلة :root تحتوي على --color-1 و--color-2… يمكنك لصقها في ملف الأنماط. وتعطي متغيرات SCSS أسطرًا من نوع $color-1: …;، وتعطي مصفوفة JSON قائمة من سلاسل HEX لاستخدامها في السكربتات، أما ألوان Tailwind فتعطي كائن colors بمفاتيح 100 و200 و300… للصقه في إعدادات Tailwind.

قبل النشر، تحقّق من تباين النصوص: فالتناسق يضمن درجات ألوان متناغمة، لا نصًا مقروءًا. استخدم ألوانًا محايدة داكنة أو فاتحة للنص الأساسي، واحتفظ بألوان اللوحة المشبعة للعناصر المميزة والأزرار والرسومات.