Description from extension meta
هر رنگ پیکسلی را از هر صفحه وبی بگیرید و کد HEX آن را فوراً کپی کنید.
Image from store
Description from store
دقت رنگ، رشتهای است که هر رابط کاربری زیبا، دارایی برند، داشبورد دادهنما و کمپین بازاریابی را به هم میدوزد. با این حال، طراحان و مهندسان فرانتاند هنوز هم دقایق بیشماری را صرف نگاه کردن به کدهای هگز در ابزارهای توسعه یا گرفتن اسکرینشات از یک صفحه میکنند تا آن را در فتوشاپ نمونهبرداری کنند. ابزار قطره چشم - یک افزونه مرورگر سبک ساخته شده بر روی Manifest V3 - این اصطکاک را به یک حرکت زیبا و واحد تبدیل میکند: روی نماد نوار ابزار کلیک کنید، هر پیکسلی را در پنجره نمایش انتخاب کنید و مقدار دقیق #RRGGBB در کلیپبورد شما کپی میشود. یک صدای بوق ظریف، عمل را تأیید میکند و شما مستقیماً به کار خود باز میگردید، قبل از اینکه جریان کار شما مختل شود.
چرا این افزونه اهمیت دارد؟
انتخابگرهای رنگ بومی مرورگر سالهاست که وجود دارند، اما بیشتر آنها در قسمت بازرس (inspector) پنهان شدهاند، محدود به عناصر موجود در DOM هستند، یا پشت زیرمنوهای کلیک راست قرار دارند. ابزار قطره چشم (Eye Drop Tool) همان قدرت را در یک دکمه همیشه حاضر ارائه میدهد که روی هر چیزی که مانیتور شما رندر میکند - تصاویر، بوم نقاشی، فریمهای ویدیویی، SVGها، حتی افزونههای شخص ثالث - کار میکند.
نکات برجسته ویژگیها
فعالسازی با یک کلیک - بدون پنجره بازشو یا پنل تنظیمات. یک سرویس ورکر پسزمینه، اسکریپت محتوای انتخابگر را فوراً تزریق میکند و سربار حافظه را در حالت غیرفعال نزدیک به صفر نگه میدارد.
نمونهبرداری پیکسل جهانی - از آنجا که این افزونه به جای درخت DOM، بافر صفحه را ضبط میکند، روی صحنههای WebGL رندر شده پویا، بازیها و ویدیوهای استریم شده و همچنین HTML استاتیک کار میکند.
کپی فوری کلیپبورد - رشته HEX به طور خودکار در کلیپبورد نوشته میشود؛ میتوانید آن را مستقیماً در Figma، VS Code یا Slack بدون نیاز به کادر محاورهای میانی، پیست کنید.
تایید بصری - یک ریزتعامل در گوشه صفحه ("#ffcc33 کپی شد!") به شما اطمینان میدهد که اقدام موفقیتآمیز بوده و پس از ۱.۵ ثانیه ناپدید میشود.
مزایای کاربر
صرفهجویی در زمان - مسیر انحرافی به سمت ابزارهای توسعه یا برنامههای خارجی را حذف کنید. در طول یک اسپرینت طراحی، آن ثانیهها به ساعتها تبدیل میشوند.
کاهش بار شناختی - ماندن در یک زمینه ذهنی ثابت، جریان خلاقیت را حفظ میکند؛ شما در حال جابهجایی بین پنجرهها یا تغییر تمرکز نیستید.
سازگاری کامل پیکسلی - به سرعت تأیید کنید که کد تولید با راهنمای سبک برند مطابقت دارد یا اینکه مدلهای بازاریابی به نسبتهای کنتراست دسترسیپذیری پایبند هستند.
جلوگیری از خطا - تایپ کدهای هگز به صورت دستی باعث اشتباهات تایپی میشود؛ کپی کردن در کلیپبورد این خطر را از بین میبرد و منجر به کامیتهای تمیزتر و گزارشهای باگ کمتر میشود.
گروههای کاربری هدف
طراحان رابط کاربری/تجربه کاربری
به سرعت رنگها را از نمونههای اولیه زنده نمونهبرداری کنید تا در سیستمهای طراحی دوباره استفاده کنید
تنظیم دقیق سایهها در طول جلسه بررسی فیگما
توسعهدهندگان فرانتاند
اعتبارسنجی کنید که متغیرهای CSS در حالتهای مختلف به درستی رندر شوند
در مرحلهبندی، نشانگر ماوس را روی یک دکمه نگه دارید و رنگ فعال آن را انتخاب کنید
مهندسان کنترل کیفیت
نسبتهای کنتراست WCAG و انطباق با برند را تأیید کنید
در طول تست رگرسیون، نسخه تولیدی را با مشخصات مقایسه کنید
بازاریابان دیجیتال و تولیدکنندگان محتوا
گرافیکهای تککاره را با پالت رنگ وبسایت تطبیق دهید
برای یک کاشی اجتماعی در آخرین لحظه، پرچم قهرمان را آبی کنید