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

أدوات عديدة لانتقاء الألوان تفيدك في عملية التصميم


أحمد إسماعيل

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

أدوات لوحات ومخططات الألوان

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

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

إليك بعض أدوات الألوان التي ستساعدك في تكوين مجموعة ممتازة من الألوان المضمون عملها.

ColourLovers

001886-Color-Trends-Palettes-__-COLOURlovers.jpg

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

Adobe Color CC

3_Adobe-Color-CC.jpg

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

Pictaulous

3.jpg

هل تبحث عن إحساس أو أسلوب أو سياق معين من لوحة الألوان الخاصة بك؟ إليك Pictaulous الذي هو أداة ذكية تمكنك من انتقاء الألوان من الصور التي ترفعها له.

Paletton

2_Paletton-The-Color-Scheme-Designer.jpg

ألق نظرة عن قرب على مولد لوحات الألوان الرائع هذا والذي يمكّنك من صُنع تراكيب مختلفة من الألوان.

Color Hunt

4_Color-Hunt.jpg

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

Sip

6_Sip-Color-Palette-Generator.jpg

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

Palettr Color Paletter Generator

9_Palettr-Color-Palette-Generator.jpg

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

Color Combs

10_Color-Combos.jpg

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

Colrd Color Palette Generator

12_Colrd-Color-Palette-Generator.jpg

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

أدوات انتقاء الألوان

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

Color Picker من WebpageFX

19_Color-Picker-by-WebpageFX.jpg

هذا مصدر ممتاز يمكنك استخدامه لصُنع لوحات ألوان. اضغط على العنوان وانظر أي تراكيب الألوان بإمكانك صُنعُها.

Colour Code

7_Colour-Code.jpg

وهو مولدُ ممتاز أخر وهو يعتمد على مؤشر الفأرة. بإمكانك استخدامه لصُنع لوحات ألوان متعددة ومن ثم تصديرها بعدّة صيَغ للملفات مثل: SCSS، أو LESS، أو PNG.

Color Supply

20_Color-Supply-A-Hex-Color-Palette-Generator.jpg

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

Color.hailpixel.com

4.jpg

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

CSS Color Names

001888-147-Colors-_-CSS-Color-Names.jpg

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

أدوات نظرية الألوان

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

Sphere

7.jpg

أداة نظرية اللون المتخيّل والمسماة بالكرة (Sphere) تُعطيك واجهة بسيطة لتختار فروقات وصبغات على عجلة الألوان. انتقي أسلوبك المفضل من اللوحة لتحدد اختيارك اللوني ولتُناسق القيم.

Color Scheme Designer

001889-Paletton-The-Color-Scheme-Designer.jpg

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

أدوات CSS لإنشاء الألوان

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

CSS Drive

18_CSS-Drive-Image-to-Colors-Palette-Generator.jpg

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

مولد تدرجات CSS المطلق

9.jpg

يُعرَف عن تدرجات CSS3 بأنها صعبة الكتابة في الشيفرة. فلا تحتاج فقط لمعرفة القيم المختلفة للألوان، بل تحتاج أيضًا لإضافة بادئات رقمية مختلفة لتضمن عملها في أكثر من متصفح. يُسهِّل مولد تدرج CSS المطلق عملك من خلال إعطائك واجهة شبيهة بالفوتوشوب لكي تضبط تدرجك اللوني ومن ثم إعطاؤك الشيفرة لنسخها أو لصقها.

Hex 2 RGBA Color Calculator

10.jpg

ليس من الصعب تحويل قيمة الرمز الست عشري إلى RGBa ولكنه يعد مملًا عندما تعطى كل قيمة على حدى، مما يعني أن عليك النقر المتتالي 3 مرات لنسخ الأعداد. تقوم حاسبة Devoth’s Hex 2 RGBA بتسهيل العملية بقيمة CSS الكاملة حيث يتم نسخها بنقرة واحدة فقط.

اقتراحات القراء

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

0to255

001890-0to255-–-A-color-tool-for-finding-lighter-and-darker-colors-based-on-any-color.jpg

هنالك معيار محدد عند حالة المرور فوق الروابط الخاصة بك، وهو أن تختار درجة مُعتمة من نفس اللون. موقع 0to255.com يجعل هذه العملية أكثر سهولة، فقط اختر اللون وسوف ترى مجموعة متكاملة من الخيارات، مما يجعله مثاليًا للمرور فوق الرابط، التدرج اللوني والحدود.

Color Hexa

001891-Color-Hex-ColorHexa.com_.jpg

وهو شبيه بموسوعة خاصة بالألوان! أدخل اللون الذي ترغب به بأي قيمة تشاء وسوف يقوم بعرض وصف خاص به بالإضافة لبعض المعلومات المفيدة. ومن الفوائد الأخرى لمصممي المطبوعات هي التحويل المباشر من الرمز الست عشري أو RGB لأقرب درجة من CMYK.

Material Palette

15_Material-Palette-Material-Design-Color-Palette-Generator.jpg

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

ترجمة -بتصرف- للمقال Color Picker Tools: HTML, CSS, RGB, Color Palettes and More لصاحبه Iggy


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

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

لا توجد أية تعليقات بعد



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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.


×
×
  • أضف...