آزمایش استخراج رنگ از عکس ها

گردآوری و تالیف : حسام موسوی
تاریخ انتشار : 02 اردیبهشت 1397
دسته بندی ها : ابزار طراحی , الهام بخش

امروز ما میخوایم یک آزمایش سرگرم کننده استخراج رنگ از تصاویر رو با شما به اشتراک بزاریم ، این یک ایده جالبه اینکه ما یه سری پالت های رنگی و یه عکس داریم که وقتی کاربر روی استخراخ رنگ کلیک میکنه رنگ های که درون عکس دارای توالی رنگ بیشترین استخراج میشن و درون پالت ها قرار میگیرن و بعد عکس مورد نظرمون سیاه و سفید میشه که یه کار جالبیه به نظرم . ما از پلاگین Vibrant.js برای استخراج رنگ های با توالی زیاد استفاده میکنیم همینطور از CSS Filters برای ایجاد افکت سیاه و سفید که زمانی که رنگ ها استخراج شدن تصویر سیاه و سفید بشه و همچنین از یک پرده ساده و اسلاید برای تغییر عکس ها استفاده می کنیم . 

توجه : این آزمایش با برخی از خواص های css انجام شده که ممکنه در مرورگرهای قدیمی کار نکنه مثل (CSS Animations, CSS Filters).

برای پالت های رنگی ما یه پس زمینه پیش فرض و یک انیمیشن زیبا برای زمانی که اون پالت ها پر میشن قرار دادیم و زمانی که رنگ ها از عکس استخراج شد درون پالت ها قرار میگیره و زمانی که پالتی پر شد انیمیشن پر شدن هم اجرا میشه . امیدوارم از این طرح لذت ببرین . نظراتتون رو حتما در موردش بگین .

دانلود فایل | دمو

 

مقالات پیشنهادی

خارج کردن رنگ ها از تصاویر با Colorify.js

Colorify یک اسکریپته که با javascirpt نوشته شده ، کارش اینکه رنگ ها رو از تصاویر استخراج میکنه و اونها رو دستکاری میکنه . از رنگ های ساده تا رنگ های غ...

رنگهای فوق العاده در [ Less - Sass - Scss - Stylus - Css ]

Brand-Colors - امروز میخوام در این پست یک ابزار جدیدیی رو معرفی کنم که شامل بیشتر از 400 رنگ مختلفه که میتونید از اون در scss, less, sass, stylus و c...

تئوری رنگ‌ها - چگونه رنگ‌ها را با همدیگر ترکیب کنیم

ما انسان‌ها توانایی دیدن رنگ‌های مختلف را داریم و این موضوع بدلیل وجود تواناییِ خاصی در قسمت شبکیه چشم است، این توانایی به ما این قابلیت را می‌دهد که...

یک راهنمای ساده ی رنگ برای توسعه دهنده وب

من هرگز طرفدار تئوری رنگ نبودم. چون فکر می کنم همیشه در مورد آن کمی ناامید میشدم . دوست داشتم یک جا بنشینم چرخه رنگ ها را در دستم بگیرم و رنگ های مکمل...