فهم برامج ألوان و ألوان الويب
هناك أربعة أنظمة الألوان الأساسية التي يمكنك استخدامها لموقع ويب. تعرض كل صفحة من هذه المقالة صورة لنظام الألوان ، وكيف يمكنك إنشاء مخطط مشابه في Photoshop.
- أحادي اللونباستخدام ألوان من نفس اللون. قد يكون لديهم صبغات أو ظلال مختلفة بناءً على الكمية البيضاء أو السوداء.
- مماثليستخدم هذا الألوان القريبة من بعضها البعض على عجلة الألوان.
- مكملغالباً ما ينظر إلى هذا على أنه "معاكس" لأن لونين في نظام ألوان متمم هما مقابل بعضهما البعض على عجلة الألوان.
- تكاملي ثلاثيهذه الألوان متساوية المسافات على عجلة الألوان.
ستستخدم جميع مخططات الألوان هذا اللون الأصفر كاللون الأساسي.
02 من 10مخطط لون الويب أحادي اللون
يستخدم نظام الألوان هذا اللون الأصفر الخافت من اللون الأساسي ، ويضيف بعض اللونين الأبيض والأسود إلى الصبغة وتظليل المخطط وفقًا لذلك.
- أعلى اليسار - اللون الأساسي # ffe500
- أعلى اليمين - أضفت تعبئة بنسبة 50٪ من اللون الأبيض للحصول على # fff280
- أسفل اليسار - إضافة تعبئة 75 ٪ من اللون الأبيض للحصول على # fff8bf
- أسفل اليمين - أضفت تعبئة 50٪ من الأسود للحصول على # 7f7200
غالباً ما تكون مخططات الألوان أحادية اللون هي الأسهل على عيون جميع مخططات الألوان. التغييرات الطفيفة في الصبغة والظل تجعل الألوان تتدفق إلى بعضها البعض بشكل أفضل. استخدم نظام الألوان هذا لجعل موقعك يبدو أكثر مرونة وجمعًا.
03 من 10المزيد من مخطط لون الويب أحادي اللون
يضاف مربع 20٪ أسود للحصول على المزيد من الألوان في المخطط. يمكن أن يؤدي إضافة أسود أو أبيض إلى الألوان الخاصة بك إلى إنشاء لون جديد إلى لوح الألوان الخاص بك دون العبث بهجة الصفحة.
04 من 10نظام ألوان ويب تناظري
يأخذ مخطط الألوان هذا اللون الأساسي الأصفر ويضيف ويطرح 30 درجة إلى الصبغة في لوحة ألوان Photoshop.
- أعلى اليسار - اللون الأساسي # ffe500
- أعلى اليمين - +30 درجة للحصول على # 99ff00
- السفلي الأيسر - -30 درجة للحصول على # ff6600
- أسفل اليمين - 100٪ أبيض #ffffff
يمكن أن تعمل الألوان التناظرية بشكل جيد جدًا ، ولكن في بعض الأحيان يمكن أن تصطدم بشدة. تأكد من اختبار هذه المخططات مع أشخاص أكثر من نفسك وعائلتك وأصدقائك. عندما يعملون ، ينشئون موقعًا أكثر ملونًا من المخطط أحادي اللون ، ولكن تقريبًا مرن.
05 من 10نظام ألوان ويب أكثر تناظريًا
يضاف مربع 20٪ أسود للحصول على المزيد من الألوان في المخطط.
06 من 10نظام لون الويب التكميلي
مخططات الألوان التكميلية ، على عكس الألوان الأخرى عادة ما يكون لها لونين فقط. اللون الأساسي وهو معاكس على عجلة الألوان. يجعل Photoshop من السهل الحصول على اللون التكميلي - ما عليك سوى تحديد مساحة اللون التي تريدها وتضرب Ctrl-I. سوف فوتوشوب عكس ذلك نيابة عنك. تأكد من القيام بذلك على طبقة مكررة ، حتى لا تفقد لونك الأساسي.
- اليسار - اللون الأساسي # ffe500
- الحق - مكمل # 001aff
غالبًا ما تكون مخططات الألوان التكميلية أكثر لفتًا للأنظار من أنظمة الألوان الأخرى ، لذلك استخدمها بعناية. وغالبا ما تستخدم على القطع التي تحتاج إلى تبرز.
07 من 10المزيد من نظام ألوان الويب التكميلي
للحصول على هذا الإصدار ، أضفت 50٪ من اللون الأبيض إلى النصف السفلي من الألوان و 30٪ أسود إلى مربع المركز. كما ترون ، فإنه يوفر لك بعض الخيارات الأخرى ولكن لا يزال نظام ألوان مكمل.
08 من 10نظام الألوان ثلاثي الويب
تتكون أنظمة الألوان الثلاثية من 3 ألوان أكثر أو أقل تقريبًا متساوية حول عجلة الألوان. ولأن عجلة الألوان هي 360 درجة ، فقد استخدمت مرة أخرى مربع الصبغة في منتقي الألوان لإضافة وطرح 120 درجة من اللون الأساسي.
- أعلى اليسار - اللون الأساسي # ffe500
- أعلى اليمين - +120 درجة للحصول على # e500ff
- أسفل اليسار - 120 درجة للحصول على # 00ffe6
- أسفل اليمين - 100٪ أبيض #ffffff
غالباً ما تُنتج مخططات الألوان الثلاثية صفحات ويب نابضة بالحياة. ولكن مثل مخططات الألوان التكميلية ، يمكن أن تؤثر على الناس بشكل مختلف. تأكد من اختبار.
يمكنك أيضًا إنشاء أنظمة ألوان رباعية أو رباعية الألوان ، حيث تكون المسافات متساوية الألوان حول عجلة الألوان.
09 من 10المزيد من نظام الألوان ثلاثي الأبعاد
كما هو الحال مع الأمثلة الأخرى ، أضفت مربعًا أسودًا بنسبة 30٪ للألوان للحصول على الظلال الإضافية.
10 من 10مخططات لون الويب المتنافرة
الجمال في نظر الناظر ، ولكن الحقيقة المؤسفة هي أن كل الألوان لا تمضي معاً. الألوان المتضاربة هي ألوان أبعد من 30 درجة على عجلة الألوان وليست مكملة أو جزء من ثالوث.
قد تكون أنظمة الألوان المتضاربة صادمة جدًا ويجب استخدامها فقط لتوليد الانتباه. تذكر أنه نظرًا لأن هذه الألوان تتصادم كثيرًا ، فقد لا يكون الاهتمام الذي تحصل عليه هو ما تبحث عنه بالضبط.
