برنامج تلوين الطلاء. مولدات لوح الألوان لمساعدة مصمم الويب. جعل لوحة الألوان في متناول اليد

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

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

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

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

من الممكن تقييم كيف سيرى الأشخاص المصابون بعمى الألوان وضعاف البصر الآخر نظام الألوان الخاص بك. يمكنك اختيار ألوان آمنة للويب.

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

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

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

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

يقوم الموقعان التاليان بإنشاء لوحة من صورة من اختيارك. انه سحر :)

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

هذا الموقع يحتاج تحميلصورة من جهاز الكمبيوتر الخاص بك.

منتقي ألوان مفيد جدا. على أساس مبدأ "لايك - لا يعجبني".

كما يوحي الاسم ، يمكنك هنا اختيار الألوان للتصميم المسطح العصري الآن. الموقع ممتع لأنه باختيار لوحة الألوان يمكنك تحميلها لبرامج Corel و Photoshop.

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

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

هذه هي الأدوات الموجودة لدي في إشاراتي المرجعية.

اكتب في التعليقات ما هي مواقع مطابقة الألوان لتصميم الويب الذي تستخدمه؟

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

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

ColoRotate

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

Adobe Color CC

يتيح لك منشئ نظام الألوان واللوحة Adobe Color CC:

• تجربة تركيبات الألوان على عجلة الألوان التفاعلية (تتوفر 7 أنواع من أنظمة الألوان) ؛
• إنشاء سمات الألوان باستخدام أنماط محددة مسبقًا ؛
• إنشاء مخططات ألوان باستخدام ألوان من صورة أو أي صورة أخرى جاهزة ؛
• شارك عملك وتعرف على الآخرين ، واستلهم منهم.

يمكن حفظ سمات الألوان التي تم إنشاؤها في تطبيقات سطح المكتب أو الهاتف المحمول ، وكذلك في قسم "سماتي" بالموقع.

ديجريف

يوفر موقع DeGraeve مجموعة متنوعة من الأدوات ، بما في ذلك منشئ مخطط الألوان بناءً على الصور الجاهزة. يكفي العثور على صورة ذات نظام ألوان مثير للاهتمام على الإنترنت ، وتحميل عنوان URL لهذه الصورة إلى السطر المناسب على الموقع والنقر فوق زر إنشاء لوحة الألوان. بعد بضع ثوانٍ ، سيحلل البرنامج الصورة إلى 10 ألوان أساسية ، و 5 صامتة (باهتة) و 5 ساطعة (نابضة بالحياة) ، مع تعيين كل رمز خاص به. تعتبر اللوحة التي تم إنشاؤها ملائمة للاستخدام عند العمل على تصميم موقع الويب ، وسوف تمتزج الألوان بشكل مثالي مع بعضها البعض.

التباين- A

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

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

كولورزيلا

تطبيق ColorZilla لمتصفح Firefox (هناك أيضًا إصدار خاص بـ Google Chrome) لمساعدة مشرفي المواقع ومصممي الرسوم على التعامل مع الألوان. سيكون مفيدًا لكل من المستخدمين المبتدئين والمتقدمين. يقوم البرنامج بتحليل الألوان لأي نقطة وأي صفحة في المتصفح ، ويستخرج الألوان المطلوبة لاستخدامها في التطبيقات الأخرى. تحديد لوحة ألوان الصفحة ، واختيار الألوان من مجموعة محددة مسبقًا ، وحفظ الألوان الأكثر استخدامًا كجزء من لوحة المستخدم - مثل مجموعة إمكانياتها.

مصور

Pictaculous هو مولد لوحة ألوان آخر قائم على الصور. تحتاج فقط إلى تحميل الصورة المحددة إلى الموقع بحجم لا يزيد عن 500 كيلوبايت ، وسيبدأ تحليل الألوان على الفور. تحت النتيجة باستخدام نظام ألوان الصورة ، يتم عرض عشرات اللوحات الأخرى ، ولكن تم إنشاؤها يدويًا بواسطة أعضاء مجتمعات موارد Kuler و COLOURLovers. يمكن أيضًا استخدامها كنظام ألوان للموقع الذي يتم تطويره. يمكنك إرسال النتيجة إلى بريدك ومشاركتها في الشبكات الاجتماعية.

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

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

1. مبرد

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

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

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

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

على عكس معظم مولدات مخطط الألوان الأخرى "عجلة الألوان" ، يعرض Colorotate اللوحة على مخروط ثلاثي الأبعاد. مثل Kuler ، يمكن للمستخدمين حفظ وتعديل مخططات الألوان الخاصة بهم ، بالإضافة إلى عرض اللوحات التي صنعها مصممين آخرين. تم دمج الأداة مع برامج التصميم الشهيرة Adobe Fireworks و Photoshop.

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

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

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

• من أين تستلهم من ؛
• كيف تصنع لوحتك الخاصة ؛
• كيفية جعل التصميم في متناول الأشخاص الذين يعانون من ضعف في رؤية الألوان.

1. تبحث عن الإلهام

ألوان الطبيعة

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

تم العثور على أفضل مجموعات الألوان في الطبيعة. يمكنك الحصول على مخطط ألوان من أي صورة

بيهانس

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

ألوان Dribbble

Dribbble هو أحد أفضل التطبيقات التي ستكون مفيدة عند إنشاء واجهة مستخدم. إذا كنت تريد أن تفهم بصريًا كيف استخدم الآخرون لونًا معينًا ، فانتقل إلى dribbble.com/colors وأدخل القيمة التي تريدها.

عند اختيار لون للموقع ، يمكنك هنا تعيين الحد الأدنى للنسبة المئوية - التجربة ، على سبيل المثال ، حاول تعيين 30٪ أزرق.

حاول تعيين حد أدنى لنسبة لون معين في Dribbble

إلهام التصميم

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

ستجد في Designspiration أمثلة مختلفة لتركيبات الألوان

Tineye Multicolr

باستخدام خدمة مطابقة الألوان Tineye Multicolr ، يمكنك تحديد نطاق الصورة المطلوب وحتى تعيين النسبة المئوية لكل منها (النسبة). تم دمج الموقع بقاعدة بيانات تضم 20 مليون صورة من صور المشاع الإبداعي من Flickr. هذه بالتأكيد إحدى أسرع الطرق للعثور على اللوحة المثالية.

كولورزيلا

ColorZilla هو امتداد للتثبيت في متصفحي Chrome و Mozilla Firefox. يتضمن أدوات مثل القطارة وتصفح لوحة الألوان والإبداع والمزيد.

يتوفر امتداد ColorZilla في Chrome و Firefox

طيف Shutterstock

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

علاوة على ذلك ، لا تحتاج إلى اشتراك ، لأن التقييم الأولي للصورة سيكون كافياً (حتى على الرغم من حقيقة أنها تحتوي على "علامة مائية").

W3Schools

استعرضت مدونة مؤخرًا مجموعة مختارة من W3Schools. هناك الكثير من المعلومات حول الموضوع ، بدءًا من رموز الأسماء / الظلال ، ونظرية مجموعات الألواح وتنتهي بوصف التنسيقات المختلفة: HEX و RGB و CMYK و HWB وما إلى ذلك ، وستجد أيضًا مولدات ومحولات بسيطة وما شابهها من "خدمات مصغرة". الكل في الكل ، من المثير للاهتمام رؤيته.

2. إنشاء لوحة الألوان

أداة ألوان تصميم المواد

تتيح لك خدمة منتقي الألوان في موقع Material Design Color Tool إنشاء مخططات الألوان ومشاركتها ومعاينتها لاختياراتك. تتمثل إحدى وظائفه المفيدة في قياس مستوى إمكانية الوصول لأي مجموعة من الألوان.

مبردات

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

مخطط الألوان في المبردات على أساس الصورة

Adobe Color CC

أصبحت خدمة مطابقة الألوان Adobe Color CC (المعروفة سابقًا باسم Kuler) شائعة جدًا الآن. إنه متاح مجانًا على الإنترنت ، ولكن هناك أيضًا نسخة واصفة. باستخدام تطبيق الويب هذا ، ستجعل لوح الألوان الخاص بك باستخدام عجلة الألوان:

أو يمكنك الحصول على نتيجة محددة من الصورة النهائية:

اختيار لون الموقع حسب الصورة

يوجد المئات من التركيبات الجاهزة هنا ، ابحث عنها في قسم "المشاهدة":

إذا كنت تستخدم إصدار سطح المكتب ، فيمكنك تصدير نظام الألوان الذي أنشأته إلى InDesign و Photoshop و Illustrator بنقرة واحدة.

لوحة

غالبًا ما تتم مقارنته بـ Adobe Color CC السابق لأن هذه التصميمات متشابهة جدًا. الاختلاف الوحيد في Paletton هو أنك لست مقيدًا بخمسة خيارات ، ولكن يمكنك تجربة نغمات إضافية للواجهة.

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

3. تسهيل الوصول إلى لوحة الألوان

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

مدقق تباين ألوان WebAIM

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

WebAIM Color Contrast Checker هي أداة قائمة على الويب تتحقق من رموز الألوان في القيم السداسية العشرية.

مبردات

لقد ذكرنا بالفعل هذه الخدمة أعلاه. من بين أشياء أخرى ، ستساعدك Coolors أيضًا على التحقق من لوحة الألوان التي اخترعتها لعمى الألوان.

نوع عمى الألوان في مخطط

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

هذه هي الطريقة التي يرى بها الشخص المصاب بالبروتانومالي لوحة

NoCoffee Vision Simulator للكروم

بمساعدة موقع NoCoffee Vision Simulator على الويب ، يمكنك أن ترى كيف سيرى الأشخاص المصابون بعمى الألوان أو ضعف البصر صفحات ويب معينة. على سبيل المثال ، بتحديد خيار "Achromatopsia" في قسم "نقص اللون" ، سترى صفحة الويب باللون الرمادي.

هذا ما يبدو عليه مشروع سي إن إن لشخص مصاب بالديدانوبيا

استنتاج

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