اذهب إلى المحتوى

أفضل 12 أداة انتقاء للألوان لمصممي الويب


أحمد النجار3

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

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

1. ColorHexa

01-colorhexa-webapp-free.jpg

كنت أتصفح الويب في الآونة الأخيرة وعثرت على ColorHexa. إنها إلى حد بعيد إحدى أروع أدوات الألوان التي رأيتها على الإطلاق.

من الناحية الفنية ليست هذه الأداة مُولّد ألوان أو أداة تصميم مخطط، بل هي مكتبة معلومات عن جميع الألوان مع تدرجات لونية مقترحة، وظلال ذات صلة، وعشرات من رموز الألوان (مثل:hex ، RGB،CMYK ،CIE-LAB ،HSL والمزيد).

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

2. Colors.css

02-colors-css-library.jpg

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

غالبًا ما يأتي كل متصفح بألوان افتراضية مزعجة جدًا. Color.css ستقوم بإصلاح ذلك. إنها مكتبة CSS مجانية تعمل على إعادة تشكيل لوحة الألوان الافتراضية. هذا يعني أنه يمكنك استخدام أسماء الألوان مثل "الأزرق" و"الأحمر" بقيم مختلفة تمامًا.

كما أن لدى موقع الأداة صفحة مليئة بالأفكار لمطابقة أنظمة الألوان التي من شأنها تحسين قابلية القراءة على موقعك.

3. ColorPick Eyedropper

03-colorpick-eyedropper-plugin.jpg

ترى كم وجدت من المواقع ذات الألوان الجميلة؟ أجد مواقع مذهلة طوال الوقت ومن الصعب تصدير هذه الألوان من ورقة الأنماط.

يمكنك استخدام أدوات مطور كروم ولكن هذا يتطلب التنقيب في التعليمات البرمجية (الكود) لاختيار الألوان السداسية (الهيكسا). بدلاً من ذلك ، يمكنك استخدام إضافة ColorPick Eyedropper المصمم حصريًا لـ Google Chrome.

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

رائعة حقًّا أليس كذلك؟ إنها إضافة مجانية، لذلك لن تخسر شيئًا إن جربتها.

4. Coolors

04-coolors-webapp.jpg

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

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

إنه تطبيق رائع، ولكنه يأتي مع منحنى تعليمي صغير. فلن يأخذ منك أكثر من 15-20 دقيقة حتى تعرف كيف يعمل كل شيء.

5. Palettte App

05-color-palettte-app.jpg

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

6. Material UI Colors

06-material-ui-colors-webapp.jpg

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

باستخدام تطبيق الويب Material UI Colors، يمكنك العثور على مخططات ألوان مثالية تتوافق مع إرشادات Google’s material.

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

يمكنك أيضًا التبديل بين hex و RGB وفقًا لأي تنسيق تريده. إنه تطبيق رائع لمحبي تصميم البطاقات ((material design.

7. Color Supply

07-color-supply-webapp.jpg

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

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

8. Color Safe

08-check-color-ratio-rating-wcag.jpg

تعمل WCAG (قواعد إتاحة محتوى الويب) بجدّ نحو شبكة سهلة الوصول. ويعد اللون أحد أسهل الطرق لإنشاء إمكانية الوصول دون فقد اختبار الوقت.

Color Safe هو تطبيق ويب مجاني يمكنه اختبار خيارات الألوان الخاصة بك. يمكنك الاختيار من مجموعة صغيرة من الخطوط والأحجام، ثم اختيار الألوان التي تريدها للمقدمة والخلفية.

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

9. Color Hunt

09-color-hunt-webapp.jpg

للاطلاع على معرض مخططات الألوان، ألق نظرة على Color Hunt. تم إطلاق هذا المشروع المجاني قبل عامين ولا يزال مصدر إلهام للتصميم. يقدم الأشخاص مخططات الألوان الخاصة بهم إلى الموقع، ثم يصوت آخرون على مخططات الألوان هذه.

يمكنك الترتيب حسب الأحدث أو الأكثر شعبية وحتى التصويت على المفضلات لديك. رائع حقًّا أليس كذلك؟

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

10. أوبن كلر Open Color

10-open-color-webapp-scheme.jpg

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

لمزيد من المعلومات ولتنزيل نسخة من الأنماط زر صفحة التطبيق على موقع GetHub.

11. HTML Color Codes

11-html-color-codes-webapp.jpg

HTML Color Codes هو تطبيق ويب معلوماتي خاص بالألوان. يتيح لك هذا التطبيق سحب جميع أشكال كود HTML / CSS لخيارات الألوان الخاصة بك مباشرة. يمكنك البحث عن أي لون تريده، أو الاطلاع على التوصيات. بالإضافة إلى أن هذا التطبيق يحتوي أيضًا على أداة لإنشاء لوحات ألوان يمكنك تنزيلها كملفات Adobe Swatch.

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

12. أدوبي كلر سي سي Adobe Color CC

12-adobe-color-cc-webapp.jpg

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

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

ترجمة -وبتصرف- للمقال ‎Top 12 Web-Based Color Tools for Web Designers لصاحبه Jake Rocheleau


تفاعل الأعضاء

أفضل التعليقات



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...