لوحات ألوان الويب

ما هي لوحات ألوان الويب؟

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

ماذا يعني رمز سداسي عشري في الألوان؟

الكود السداسي هو طريقة لتمثيل لون بتنسيق RGB من خلال الجمع بين ثلاث قيم. تعد رموز الألوان هذه جزءًا لا يتجزأ من HTML لتصميم الويب وتظل طريقة مهمة لتمثيل تنسيقات الألوان رقميًا.

تبدأ رموز الألوان السداسية بعلامة الجنيه أو علامة التجزئة (#) متبوعة بستة أحرف أو أرقام. يتطابق الحرفان / الرقمان الأولان مع اللون الأحمر ، والحرفان التاليان يتطابقان مع اللون الأخضر والأخران يتطابقان مع اللون الأزرق. يتم تحديد قيم اللون بقيم بين 00 و FF.

يتم استخدام الأرقام عندما تكون القيمة 1-9. يتم استخدام الأحرف عندما تكون القيمة أكبر من 9. على سبيل المثال:

• أ = 10
• ب = 11
• ج = 12
• د = 13
• ه = 14
• إ = 15

رموز الألوان السداسية ومكافئات RGB

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

• أحمر = # FF0000 = RGB (255 ، 0 ، 0)
• أخضر = # 008000 = RGB (1 ، 128 ، 0) v
• أزرق = # 0000FF = RGB (0 ، 0 ، 255)
• أبيض = #FFFFFF = RGB (255255255)
• العاج = # FFFFF0 = RGB (255 ، 255 ، 240)
• أسود = # 000000 = RGB (0 ، 0 ، 0)
• الرمادي = # 808080 = RGB (128 ، 128 ، 128)
• الفضة = # C0C0C0 = RGB (192 ، 192 ، 192)
• الأصفر = # FFFF00 = RGB (255 ، 255 ، 0)
• أرجواني = # 800080 = RGB (128 ، 0 ، 128)
• البرتقالي = # FFA500 = RGB (255 ، 165 ، 0)
• بورجوندي = # 800000 = RGB (128 ، 0 ، 0)
• الفوشيه = # FF00FF = RGB (255 ، 0 ، 255)
• الجير = # 00FF00 = RGB (0 ، 255 ، 0)
• أكوا = # 00FFFF = RGB (0 ، 255 ، 255)
• البط البري = # 008080 = RGB (0 ، 128 ، 128)
• زيتوني = # 808000 = RGB (128 ، 128 ، 0)
• الأزرق الداكن = # 000080 = RGB (0 ، 0 ، 128)

لماذا تعتبر ألوان الموقع مهمة؟

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

على سبيل المثال ، لاحظت Beamax ، الشركة المصنعة لشاشات العرض ، زيادة هائلة بنسبة 53.1٪ في النقرات على الروابط الحمراء مقارنة بالروابط الزرقاء.

للألوان تأثير كبير ليس فقط على النقرات ولكن أيضًا على التعرف على العلامة التجارية. وجدت دراسة عن التأثير الذهني للألوان أن الألوان تزيد من التعرف على العلامة التجارية بمعدل 80٪. على سبيل المثال ، عندما تفكر في Coca-Cola ، من المحتمل أن تتخيل علب حمراء نابضة بالحياة.

كيف تختار نظام الألوان لمواقع الويب؟

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

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

الآن "كيف تختار نظام الألوان لمواقع الويب وتطبيقات الويب؟" دعنا نلقي نظرة عليها خطوة بخطوة:

1. اختر الألوان الأساسية الخاصة بك.

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

أدناه قمنا بإدراج بعض الأمثلة لك:

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

2. اختر ألوانك الإضافية.

اختر لونًا أو لونين إضافيين يكمل لونك الأساسي. يجب أن تكون هذه هي الألوان المثالية التي تجعل لونك الرئيسي "مذهلاً".

3. حدد لون الخلفية.

اختر لون الخلفية الذي سيكون أقل "عدوانية" من لونك الأساسي.

4. حدد لون الخط.

اختر لونًا للنص على موقع الويب الخاص بك. لاحظ أن الخط الأسود الخالص نادر الحدوث ولا يوصى به.

أفضل لوحات ألوان الويب للمصممين

إذا لم تتمكن من العثور على اللون الذي تبحث عنه في مجموعة لوحات ألوان الويب Softmedal ، يمكنك إلقاء نظرة على مواقع الألوان البديلة أدناه:

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

1. Paletton

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

2. لون آمن

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

باستخدام تطبيق الويب Color Safe ، فإنك تضمن أن موقعك يتوافق مع إرشادات WCAG وأنه يمكن للجميع الوصول إليه بشكل كامل.

3. Adobe Color CC

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

4. أجواء

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

5. 0to255

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

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

أفضل لوحات ألوان الويب

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

1. أودوبود

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

2. عين توري

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

3. أدوات بقاء الجبن

اللون الأحمر هو لون شائع للغاية للوحة ألوان موقع الويب. يمكن أن تنقل مزيجًا غنيًا من المشاعر ، مما يجعلها متعددة الاستخدامات. كما ترى على موقع Cheese Survival Kit ، فهو فعال بشكل خاص عند استخدامه بجرعات صغيرة. يتم تنعيم اللون الأحمر بألوان أكثر حيادية ، بينما يساعد اللون الأزرق في عبارات الحث على اتخاذ إجراء وغيرها من المجالات التي تريد الشركة جذب انتباه الزائر إليها.

4. Ahrefs

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

الأسئلة الأكثر شيوعًا حول الألوان

1. ما هو أفضل لون لموقع على شبكة الإنترنت؟

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

2. كم عدد الألوان التي يجب أن يحتوي عليها الموقع؟

ضع في اعتبارك أن 51٪ من العلامات التجارية لديها شعارات أحادية اللون ، و 39٪ تستخدم لونين ، و 19٪ فقط من الشركات تفضل الشعارات بالألوان الكاملة. من هنا ، يمكنك أن ترى أن مواقع الويب ذات الألوان 1 و 2 و 3 منطقية أكثر من محاولة إنشاء موقع ويب بألوان قوس قزح. ومع ذلك ، تؤمن العلامات التجارية مثل Microsoft و Google بميزة العمل بمزيد من الألوان حيث تستخدم 4 ألوان صلبة على الأقل في تصميماتها.

3. أين يمكنني استخدام الألوان؟

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