كيفية اختيار المزيج المناسب من الألوان في تصميمات المواقع والشعارات

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

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

ولكن قبل البدء في التفاصيل الخاصة باستخدام الألوان مع بعضها، علينا الرجوع قليلًا إلى أصول الألوان ومعرفتها.

الألوان الأساسية "Primary Colors"

الألوان الأساسية أو التي تسمى أيضًا بالألوان الأصلية "Original Colors" أو كما ينظر إليها على أنها الألوان الأم وهم: الأحمر والأزرق والأصفر.

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

فمثلًا البرتقالي أحد الألوان الفرعية ولكننا نستخدمه مع اللون الأزرق في موقعنا، كما أنه الألوان الأساسي لمواقع كثيرة منها موقع HubSpot.

الألوان الفرعية "Secondary Colors"

الألوان الفرعية في التي يتم تشكيلها بدمج أي اثنين من الألوان الأساسية، وينتج عن هذا الدمج ثلاثة اللون وهم: البرتقالي والأرجواني والأخضر.

أحمر + أصفر = برتقالي

أزرق + أحمر = بنفسجي

أصفر + أزرق = أخضر

لكن يجب الأخذ في الاعتبار أن تشكيل هذه الألوان يأتي فقط من استخدام الألوان الأساسية النقية.

وقبل التعمق أكثر في باقي الألوان، يجب معرفة أن اللون المكمل للألوان الفرعية هو اللون الأساسي الذي لم يتم استخدامه لإنتاج هذا اللون.

فمثلًا قد وضحنا سابقًا أن اللون البرتقالي ينتج عن خلط اللون الأحمر مع الأصفر واللون المكمل للون البرتقالي هو الأزرق فهو اللون الثالث في الألوان الأساسية الذي لم يستخدم في صناعة اللون البرتقالي.

لذا تساعد دراسة ومعرفة الألوان الأساسية والفرعية والثانوية على معرفة كيفية اختيار المزيج المناسب من الألوان.

الألوان الثانوية "Tertiary Colors"

تنتج الألوان الثانوية من مزج الألوان الأساسية مع الألوان الفرعية، وينتج عنها 6 ألوان وهم:

أحمر + بنفسجي = أحمر أرجواني (أرجواني)

أحمر + برتقالي = أحمر برتقالي (قرمزي)

أزرق + بنفسجي = أزرق-بنفسجي (بنفسجي)

أزرق + أخضر = أزرق-أخضر (أزرق مخضر)

أصفر + برتقالي = أصفر برتقالي (كهرماني)

أصفر + أخضر = أصفر مخضر أو الأخضر المصفر.

معرفة كل هذه الألوان وأصولها جيد ومفيد لكنك بالتأكيد تسأل نفسك الآن، عند اختيار لون محدد للموقع أو عند عمل أي تصميم كيف يمكنني تحديد الألوان والدرجات المناسبة لهذا اللون؟

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

تدرجات الألوان

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

اللون الأصلي أو النقي "Hue"

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

وغالبًا ما تستخدم درجة اللون النقية في الشعارات الخاص بالعلامات التجارية أو على الأقل احتواء الشعار على أحد الألوان النقية وكثيرًا ما يستخدم نفس اللون مع لون التصميم الأساسي للموقع.

لألوان المظللة "Shade"

الألوان المظللة أو ظل اللون أو الـ "Shade" والتي تعني إضافة اللون الأسود إلى درجة اللون النقية أو الأساسية مع اختلاف درجات اللون الأسود بها.

وغالبًا ما تستخدم الدرجات الغامقة جدًا من اللون مع الخلفيات ذات الكتابة البيضاء.

الألوان الخفيفة أو الفاتحة "Tint"

الألوان الخفيفة أو الفاتحة وهي عكس الألوان المظللة، حيث يتم إضافة اللون الأبيض فيها إلى اللون الأساسي.

وغالبًا ما تستخدم الألوان الفاتحة في عمل خلفيات التصميمات المختلفة مع استخدام لون كتابة غامق سواء كان الخط بالون الأسود أو أحد الألوان المكملة أو المناسبة والتي سنتحدث عنها في ثوانٍ.

نغمات أو تشبع الألوان "Tone or Saturation"

نغمات أو تشبع الألوان تعني إضافة اللون الرمادي إلى اللون الأصلي أو إضافة مزيج بين الأسود والأبيض، وكثيرًا ما يتم استخدامها للإشارة إلى الألوان المظللة والفاتحة أيضًا.

فليس معنى أن يكون شعار الشركة بلون معين أن تكون خلفية الموقع بنفس اللون، فيمكن استخدام التدريجيات المختلفة من اللون أو الألوان الأخرى المناسبة له وهذا ينقلنا إلى الفقرة التالية، وهي اختيار المزيج المناسب من الألوان.

“IT IS A LONG FACT THAT A READER WILL BE DISTRACTED BY THE READABLE CONTENT OF A PAGE WHEN LOOKING AT ITS LAYOUT.”

Md Sumon Mia

اختيار المزيج المناسب من الألوان

قبل التحدث عن المزيج المناسب من الألوان عند اختيار ألوان للموقع أو أي تصميم آخر، يفضل دائمًا الأخذ في الاعتبار أن يكون التصميم بسيط، فكلما كانت الألوان بسيطة ومتناسقة كلما كانت أفضل وأريح للعين.

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

كذلك يجب مراعاة تباين الألوان أي ظهور ووضوح الألوان المستخدمة، فكلما زاد الفرق بين الألوان المستخدمة كلما ازداد التباين بين الألوان، فمثلًا التباين بين الأزرق الغامق والفاتح أقل من التباين بين الأزرق والبرتقالي.

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

كما يجب مراعاة الشكل التكاملي للتصميم أو الموقع، فيجب أن يتماشى لون التصميم مع الألوان المستخدمة بالموقع، ولهذا سنقوم بدراسة الـ 7 توزيعات أو استخدامات للألوان.

علمًا بأن التوزيعات التالية يتم استخدامها مع الدرجات المختلفة من الألوان المشبعة والمظللة والفاتحة.

استخدام النظام الأحادي اللون أو الـ Monochromatic في التصميمات يعني استخدام نفس اللون مع استخدام الدرجات المشبعة والخفيفة والمظللة لنفس اللون.

وبالرغم من افتقار استخدام الألوان الأحادية إلى تباين الألوان إلا أن استخدمها يعطي للتصميم مظهر نظيف ومصقول، لذا فإنه غالبًا ما يستخدم نظام الألوان الأحادية في الرسومات البيانية أو في الحالات التي لا تحتاج إلى تباين عالي.

النظام التكاملي "Complementary"

النظام التكاملي أو المكمل للألوان مثل ما هو موضح في الصورة السابقة يعتمد على اختيار لونين معاكسين لبعضهم في عجلة الألوان ويكون أحد الألوان حار والآخر بارد، مثل الموف والأصفر أو الأخضر والأحمر.

ويتم استخدام هذا النظام في تصميم الشعارات والمواقع بجانب استخدام درجات الألوان الأحادية مع أحد الألوان المكملة لها مثل شعار Prime Code، فتم استخدام اللون الأزرق بصورة أحادية مع اللون البرتقالي المكمل له في عجلة الألوان.

استخدام النظام التكاملي من اسمه أي يكون أحد الألوان هو المهيمن أو الأساسي والآخر مكمل له، بدلًا من أن يتم استخدام اللونين بصورة متساوية.

النظام المماثل "Analogous"

الاستخدام المماثل للألوان يتم عن طريق اختيار درجات الألوان التي تقع بجانب بعضها في عجلة الألوان، ويتم من خلالها اختيار بين 3 حتى 5 ألوان.

مثل استخدام الألوان من الأحمر إلى الأصفر أو الألوان الحارة مع تصميمات الربيع، كذلك استخدام النغمات أو الدرجات المظللة مع تصميمات الشتاء وغيرها.

في هذه الحالة تكون الألوان المتماثلة أقل تباين وتستخدم أكثر في جزء بسيط من تصاميم الخلفيات المختلفة في الموقع، وغالبًا ما لا يتم استخدامها في التصميم بأكمله.

النظام المربع "Square"

النظام المربع أو الماسي، يتم من خلاله استخدام أربعة ألوان متساوية في البعد عن بعضها في عجلة الألوان لإنشاء شكل مربع، كما يمكن اتباع نفس النظام واستخدام 5 ألوان بدلًا من 4.

فإن اختيار الألوان المتباعدة بشكل بتساوي يوفر نسبة من التباين في التصميم الخاص بك لكنه لا يمثل أعلى تباين، لذا فإنه يفضل اختيار لون واحد مهيمن أو مسيطر مع باقي الألوان بدلًا من محاولة التوازن بين الأربعة أو الخمس ألوان.

كما يفضل تجربة التصميم باستخدام خلفية بيضاء ثم سوداء لمعرفة أي منهم يتناسب أكثر مع التصميم.

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

النظام المستطيل "Rectangle"

يسمى أيضًا بي "Tetradic Color Scheme" ويعتمد هذا النظام على اختيار أربعة ألوان أيضًا، لكن يمكنك من خلاله اختيار درجات أكثر تباين من النظام المربع أو الماسي.

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

النظام الثلاثي "Triadic"

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

يتميز مخطط الألوان الثلاثي بتباين عالي بين لونين من الألوان الثلاثة، لذا يستخدم هذا المخطط أكثر في مقارنة المخططات الشريطية أو الدائرية.

وعند استخدامه في التصاميم دائمًا ما يفضل اختيار لون أساسي بجانب درجات مخففة أو نغمات مختلفة من اللونين الآخرين، بدلًا من محاولة التوازن بين الثلاثة ألوان.

النظام المنفصل التكاملي "Split Complementary"

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

لكن التصاميم التي تعتمد على هذا النظام يكون من الصعب عليها الموازنة بين الألوان الثلاثة، فغالبًا ما يعتمد التصميمات التي تتبع هذا النظام على لونين أساسين ومحاولة العثور على التركيبة الصحيحة من اللون الثالث.

الخلاصة

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

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

وبالطبع كلما زادت الدرجات المستخدمة كلما كان من الأصعب التوازن بينهم على عكس كون لون منهم أساسي والألوان الأخرى مكملة أو مساعدة له.

مصادر الصور: Art Space, HubSpot.