التعامل مع الألوان هي مهمة تستغرق الكثير من الوقت بالنسبة لمصممي الويب، بدايةً، يجب عليك أن تختار لوحة ألوان لتصميمك المفعم بالألوان، ومن يجب عليك تذكر جميع أنواع قيم الشيفرة وتحويلها من الرمز الست عشري إلى RGBa. ولتسريع الأمور وجعل حياة المصمم أكثر سهولة، هنالك بضع الأدوات المفيدة متوفرة على الإنترنت. تساعدك أدوات الألوان هذه في انتقاء، اختيار وتحويل لونك بسهولة لمشروع تصميم الويب المستقبلي.
أدوات لوحات ومخططات الألوان
هل أردت يومًا أن تستخدم لونًا معينًا ولكن لم تستطع معرفة اسمه أو الرمز الست عشري الخاص به؟ باستخدام مولدات الألوان هذه، بإمكانك إيجاد اللون الذي تبحث عنه بالضبط. هناك عدة خيارات سوف تساعدك في الحصول على اللون الذي ترغب به. يمكنك مثلًا أن تختار لونًا مشابهًا للون الذي تريده ومن ثم التنقل بين الظلال المتنوعة للون. بإمكانك أيضًا أن تعدّل درجة اللون، تشبع اللون وسطوعه حتى تصل للنتيجة المرضية لك. بعد كل هذا التغيير، سوف تحصل على الرمز الست عشري وعلى اسم اللون ومن ثم استخدامها في تصاميمك. هذا بسيط، أليس كذلك؟
إن كنت تبدأ عادةً بالتصميم من الصفر بدون أي خطوط ارشادية موسومة او فكرة مسبقة للون ما فقد يكون من الصعب وضع استراتيجية لون فعالة. هنالك مواقف عديدة تكون فيها مولدات لوحة الألوان مفيدة. رغم أنها غالبًا ما تُستخدم في مشاريع تصميم الويب، فإن مولدات لوحات الألوان بإمكانها أن تكون مفيدة في العديد من المشاريع المتعلقة بالتصميم.
إليك بعض أدوات الألوان التي ستساعدك في تكوين مجموعة ممتازة من الألوان المضمون عملها.
ColourLovers
هو موطن الملايين من لوحات الألوان المقدمة من قبل المستخدمين. تصفح المجموعة وانتقِ اللوحات التي تعجبك أو قم بإيجاد ألوان أخرى بدرجة مناسبة لعملك. هذا الموقع بإمكانه أن يفيدك في المستقبل.
Adobe Color CC
هذا أيضًا مولد لوحات ألوان رائع بإمكانك استخدامه لصنع لوحات ألوان جميلة. بإمكانك أيضًا الولوج وحفظ لوحاتك للاستخدامات المستقبلية. هذه أداة قوية تمكنك فقط من التصفح وتقييم المجموعات الموجودة مسبقًا، ولكنها تضم أيضًا أدوات لصٌنع لوحات الألوان الخاصة بك من الصفر.
Pictaulous
هل تبحث عن إحساس أو أسلوب أو سياق معين من لوحة الألوان الخاصة بك؟ إليك Pictaulous الذي هو أداة ذكية تمكنك من انتقاء الألوان من الصور التي ترفعها له.
Paletton
ألق نظرة عن قرب على مولد لوحات الألوان الرائع هذا والذي يمكّنك من صُنع تراكيب مختلفة من الألوان.
Color Hunt
مولد لوحات ألوان أنيق يشتمل على لوحات ألوان متعددة لتختار منها. بإمكانك أيضًا حفظ اللوحات المفضلة لديك واستخدامها لاحقًا عندما يتطلب الأمر.
Sip
هو تطبيق رائع يعمل بشكل ممتاز على هواتف iPhone وأجهزة Mac. يمكّنك هذا التطبيق من توليد مخططات الألوان بسرعة من الصور ومن ثم حفظ، تنظيم ومشاركة اللوحات التي تصنعها.
Palettr Color Paletter Generator
لديك هنا مصدر رائع يمكنك إيجاد لوحات ألوان متعددة فيه والتي يمكنك صنعها من الصور. بإمكانك أيضًا البحث عن أي مخطط أو كلمة وستحصل على نتائج مذهلة.
Color Combs
بإمكان هذه الأداة أن تساعدك بسهولة في صنع لوحات ألوان مدهشة من الصفر. ألق نظرة عليها، واكتشف مزاياها واعرف ما الذي تعرضه.
Colrd Color Palette Generator
هو موقع رائع يمكنك استخدامه لصُنع لوحات ألوان رائعة. تشتمل هذه الأداة على مُنشئ تدرجات رائع وأداة بحث أيضًا.
أدوات انتقاء الألوان
يمتلك برنامج Photoshop نافذته الافتراضية لانتقاء اللون والتي متأكد من أن جميع المصممين على دراية بها، ولكن فكّر بعدد المرات التي احتجت للتغيير والتنقل بين التطبيقات لتنسخ أو تلصق أو تحفظ قيم الألوان. من المفترض أن هنالك طريقة أفضل! في الواقع، هناك طرق أفضل.
Color Picker من WebpageFX
هذا مصدر ممتاز يمكنك استخدامه لصُنع لوحات ألوان. اضغط على العنوان وانظر أي تراكيب الألوان بإمكانك صُنعُها.
Colour Code
وهو مولدُ ممتاز أخر وهو يعتمد على مؤشر الفأرة. بإمكانك استخدامه لصُنع لوحات ألوان متعددة ومن ثم تصديرها بعدّة صيَغ للملفات مثل: SCSS، أو LESS، أو PNG.
Color Supply
لديك هنا لوحة مذهلة لدرجات الألوان والتي يمكنك استخدامها لصُنع أمزجة مختلفة من الألوان. هذه الموقع مناسب تمامًا لأي مصمم ويب أو أي عقل مبدع آخر.
Color.hailpixel.com
أداة بسيطة ولكن مفيدة بشكل كبير، يمكنك هذا الموقع من استعراض نافذة المتصفح بحثًا عن أي ألوان مناسبة، ومن ثم نسخ الرمز الست عشري الخاص باللون بنقرة واحدة.
CSS Color Names
إذا لم تكن تحب التعامل مع الأسماء العشوائية للألوان، ربما تكون هذه القائمة المكونة من 147 اسم لون وصفي أسهل بعض الشيء في تذكرها في صفحات النمط الخاصة بك. استعرض الألوان جميعها دُفعة واحدة أو بإمكانك رؤية قيمة عشوائية مع كل نقرة فأرة.
أدوات نظرية الألوان
هل تذكر تعلم كل شيء عن عجلة وتماثلات الألوان والألوان المكملة والثلاثية في درس الفنون؟ بإمكانك استعمال نظرية الألوان بمساعدة أدوات مخططات الألوان هذه لصنع لوحات تعمل بالفعل ومفيدة.
Sphere
أداة نظرية اللون المتخيّل والمسماة بالكرة (Sphere) تُعطيك واجهة بسيطة لتختار فروقات وصبغات على عجلة الألوان. انتقي أسلوبك المفضل من اللوحة لتحدد اختيارك اللوني ولتُناسق القيم.
Color Scheme Designer
صمم مخططك اللوني الخاص باستخدام هذه الأداة. قم بتدوير وتعديل عجلة الألوان لاختيار لونك الأساسي، ثم لاحظ القيم الناتجة تلقائيًا حسب نوع اللوحة الخاصة بك.
أدوات CSS لإنشاء الألوان
وفرت أحدث تحسينات CSS3 إمكانية صُنع ألوان متعددة مباشرةً بوساطة الشيفرة، ولكن صياغة CSS أكثر صعوبة للعمل معها من عجلة الألوان المرئية. هنا بالضبط تصبح أدوات التوليد مفيدة، لتقديم الشيفرة المطلوبة لصُنع تأثيراتك التي تريدها.
CSS Drive
هذا الموقع هو أيضًا مولد لوحات ألوان رائع وبإمكانك استخدامه لتوليد لوحات متعددة حسب صورك الخاصة.
مولد تدرجات CSS المطلق
يُعرَف عن تدرجات CSS3 بأنها صعبة الكتابة في الشيفرة. فلا تحتاج فقط لمعرفة القيم المختلفة للألوان، بل تحتاج أيضًا لإضافة بادئات رقمية مختلفة لتضمن عملها في أكثر من متصفح. يُسهِّل مولد تدرج CSS المطلق عملك من خلال إعطائك واجهة شبيهة بالفوتوشوب لكي تضبط تدرجك اللوني ومن ثم إعطاؤك الشيفرة لنسخها أو لصقها.
Hex 2 RGBA Color Calculator
ليس من الصعب تحويل قيمة الرمز الست عشري إلى RGBa ولكنه يعد مملًا عندما تعطى كل قيمة على حدى، مما يعني أن عليك النقر المتتالي 3 مرات لنسخ الأعداد. تقوم حاسبة Devoth’s Hex 2 RGBA بتسهيل العملية بقيمة CSS الكاملة حيث يتم نسخها بنقرة واحدة فقط.
اقتراحات القراء
حصلت على عدّة اقتراحات وتوصيات لأدوات جيدة للألوان من القرّاء منذ نشر المقالة لم أكن على دراية بها، لذا اطلعت عليها وأضفت أفضلها إلى هذه القائمة لتطلع عليها أنت أيضًا علّك تستفيد منها في مشروع القادم.
0to255
هنالك معيار محدد عند حالة المرور فوق الروابط الخاصة بك، وهو أن تختار درجة مُعتمة من نفس اللون. موقع 0to255.com يجعل هذه العملية أكثر سهولة، فقط اختر اللون وسوف ترى مجموعة متكاملة من الخيارات، مما يجعله مثاليًا للمرور فوق الرابط، التدرج اللوني والحدود.
Color Hexa
وهو شبيه بموسوعة خاصة بالألوان! أدخل اللون الذي ترغب به بأي قيمة تشاء وسوف يقوم بعرض وصف خاص به بالإضافة لبعض المعلومات المفيدة. ومن الفوائد الأخرى لمصممي المطبوعات هي التحويل المباشر من الرمز الست عشري أو RGB لأقرب درجة من CMYK.
Material Palette
من المولدات الممتازة التي تقوم بإنشاء لوحات الألوان التي بإمكانك تحميلها وحفظها لتصاميمك المستقبلية. امتلاكك لأداة اختيار اللون المناسبة بالإضافة لمولد لوحات الألوان بإمكانه أن يُنجح مشروعك أو يُفشله.
ترجمة -بتصرف- للمقال Color Picker Tools: HTML, CSS, RGB, Color Palettes and More لصاحبه Iggy
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.