قطره‌چکان و انتخاب‌گر رنگ از روی تصویر

هر پیکسلی را از تصویر انتخاب کنید و کدهای HEX، RGB و HSL آن را با استفاده از ذره‌بین دقیق مشاهده کنید.

یک تصویر را رها کنید، سپس نشانگر را روی آن ببرید تا رنگ نمونه‌برداری شود.

تصویر مستقیماً از دستگاه شما خوانده می‌شود و هرگز از مرورگرتان خارج نمی‌شود. هیچ فایلی در BroBroGo بارگذاری نخواهد شد.

سوالات متداول

چگونه می‌توانم یک رنگ را از روی تصویر انتخاب کنم؟

نشانگر را روی تصویر حرکت دهید تا پنل رنگ زیر آن را نشان دهد. یک ذره‌بین نیز برای زوم کردن وجود دارد تا بتوانید دقیقاً روی پیکسل مورد نظر قرار بگیرید. برای ذخیره رنگ کلیک کنید. همچنین می‌توانید روی تصویر فوکوس کرده و با کلیدهای جهت‌نما نشانگر را حرکت دهید و سپس Enter را فشار دهید.

چه فرمت‌های رنگی را دریافت می‌کنم؟

هر پیکسلی که نمونه‌برداری می‌کنید به طور هم‌زمان در قالب‌های HEX، RGB و HSL نشان داده می‌شود. روی هر مقداری کلیک کنید تا کپی شود و آماده استفاده در CSS یا ابزارهای طراحی باشد.

چرا رنگ انتخاب‌شده همیشه با آنچه انتظار داشتم مطابقت ندارد؟

شما دقیقاً همان مقدار پیکسلی را دریافت می‌کنید که در تصویر ذخیره شده است. اگر تصویر JPEG یا اسکرین‌شات باشد، فشرده‌سازی و هموارسازی لبه‌ها (anti-aliasing) ممکن است پیکسل‌های مجاور را کمی تغییر داده باشد. همچنین پیکسل‌های نیمه‌شفاف به طور مستقل و بدون در نظر گرفتن پس‌زمینه پشت آن‌ها خوانده می‌شوند.

ابزار قطره‌چکان و انتخاب‌گر رنگ از روی تصویر چیست؟

ابزار قطره‌چکان و انتخاب‌گر رنگ از روی تصویر به شما این امکان را می‌دهد که یک فایل تصویری را از دستگاه خود انتخاب کرده و سپس با اشاره بر روی هر پیکسل دلخواه، مقادیر دقیق رنگی آن را مشاهده کنید. این ابزار مجهز به یک نمای بزرگ‌نمایی‌شده (ذره‌بین) است تا به شما در انتخاب دقیق پیکسل‌ها کمک کند. پس از انتخاب رنگ، مقادیر آن در قالب‌های HEX، RGB و HSL نمایش داده می‌شوند و شما می‌توانید چندین رنگ انتخاب‌شده را در بخش تاریخچه ذخیره کنید. در نهایت، امکان کپی کردن هر یک از این مقادیر رنگی برای استفاده در پروژه‌های دیگر وجود دارد.

به محض بارگذاری تصویر، مقادیر رنگی و مختصات پیکسل مرکزی تصویر به طور خودکار نمایش داده می‌شود.


نحوه کار با ابزار و نمونه‌برداری رنگ

برای شروع کار با ابزار، کافی است یک فایل تصویری را وارد کنید. پس از بارگذاری، پیام "تصویر آماده است — برای نمونه‌برداری روی آن حرکت کنید و برای ذخیره رنگ کلیک کنید." نمایش داده می‌شود.

شما به دو روش می‌توانید روی تصویر حرکت کرده و رنگ‌ها را نمونه‌برداری کنید:

  1. حرکت دادن نشانگر: با حرکت دادن نشانگر ماوس روی تصویر، رنگ‌ها به صورت پیکسل به پیکسل نمونه‌برداری می‌شوند. با کلیک کردن روی تصویر، رنگ نمونه‌برداری‌شده فعلی ذخیره می‌شود و پیام "رنگ {hex} در لیست شما ذخیره شد." به نمایش در می‌آید.
  2. استفاده از صفحه‌کلید: شما می‌توانید یک نشانگر نشانه‌گیری (crosshair) را با استفاده از کلیدهای جهت‌نما روی تصویر حرکت دهید تا رنگ‌ها را نمونه‌برداری کنید. در این حالت، فشردن کلید Shift به همراه کلیدهای جهت‌نما، نشانگر را به اندازه ۱۰ پیکسل جابجا می‌کند. برای ذخیره رنگ نمونه‌برداری‌شده در این روش، کافی است کلید Enter یا Space را فشار دهید.

مشخصات ورودی‌ها و خروجی‌های ابزار

این ابزار اطلاعات مشخصی را به عنوان ورودی دریافت کرده و خروجی‌های دقیقی را به شما ارائه می‌دهد:

فایل ورودی (Image file)

شما می‌توانید یک تک‌فایل تصویری را با فرمت‌های زیر بارگذاری کنید:

  • PNG، JPG، WebP، GIF، AVIF، HEIC.
  • انواع MIME پشتیبانی‌شده شامل image/jpeg، image/png، image/webp، image/gif، image/avif، image/heic و image/heif است.

اطلاعات خروجی (Outputs)

پس از بارگذاری تصویر، اطلاعات زیر در اختیار شما قرار می‌گیرد:

  • اندازه: ابعاد تصویر بارگذاری‌شده را نشان می‌دهد.
  • پیکسل: مختصات پیکسلی که در حال حاضر نمونه‌برداری می‌شود را نمایش می‌دهد.
  • HEX: کد رنگی شانزده‌شانزدهی (Hexadecimal) پیکسل نمونه‌برداری‌شده.
  • RGB: مقادیر رنگی قرمز، سبز و آبی (Red, Green, Blue) پیکسل.
  • HSL: مقادیر رنگی فام، اشباع و روشنایی (Hue, Saturation, Lightness) پیکسل.

قوانین عملکردی و مدیریت خطاها

ابزار قطره‌چکان دارای قوانین و رفتارهای مشخصی در مواجهه با شرایط مختلف است:

  • ذخیره در تاریخچه: تاریخچه رنگ‌های ذخیره‌شده می‌تواند تا ۱۲ آیتم را در خود نگه دارد. اگر رنگ‌هایی با مقادیر RGB یکسان اما مقادیر آلفای متفاوت (میزان شفافیت متفاوت) داشته باشید، این رنگ‌ها به عنوان ورودی‌های جداگانه در تاریخچه ذخیره می‌شوند. در بخش تاریخچه، پیام "رنگ‌های ذخیره‌شده شما در اینجا نشان داده می‌شوند — برای بارگذاری مجدد، روی یک نمونه رنگ کلیک کنید." راهنمای شما خواهد بود.
  • کپی در حافظه موقت: با کلیک بر روی هر یک از مقادیر رنگی نمایش داده شده (HEX، RGB، HSL)، آن مقدار در حافظه موقت (Clipboard) کپی می‌شود. در صورتی که مرورگر شما دسترسی به حافظه موقت را مسدود کرده باشد، پیام خطا با متن "کپی نشد — مرورگر شما دسترسی به حافظه موقت را مسدود کرده است." نمایش داده می‌شود.
  • پیکسل‌های نیمه‌شفاف: این ابزار مقدار دقیق پیکسل ذخیره‌شده در خود تصویر را می‌خواند. اگر یک پیکسل نیمه‌شفاف باشد، مقدار آلفای آن به صورت "آلفا {n}% — این پیکسل تا حدودی شفاف است." نمایش داده می‌شود. یک پیکسل نیمه‌شفاف به طور مستقل و بدون در نظر گرفتن پس‌زمینه‌ای که ممکن است پشت آن قرار بگیرد، خوانده می‌شود.
  • تاثیر فشرده‌سازی: ابزار مقدار دقیق پیکسل موجود در فایل را نشان می‌دهد؛ بنابراین اگر تصویر از نوع JPEG یا یک اسکرین‌شات باشد، ممکن است فرآیند فشرده‌سازی (Compression) و هموارسازی لبه‌ها (Anti-aliasing) مقادیر پیکسل‌ها را تغییر داده باشد.
  • محدودیت ابعاد تصویر: تصاویری که طول بزرگ‌ترین ضلع آن‌ها از ۴۰۹۶ پیکسل بیشتر باشد، به طور خودکار کوچک می‌شوند.
  • خطاهای بارگذاری فایل:
    • اگر فایلی با فرمت غیرپشتیبانی‌شده را در ابزار رها کنید، پیام "این نوع فایل پشتیبانی نمی‌شود. یک تصویر PNG، JPG، WebP، GIF، AVIF یا HEIC را امتحان کنید." نمایش داده می‌شود.
    • اگر تصویر به هر دلیلی باز نشود، پیام "امکان باز کردن این تصویر وجود نداشت. ممکن است فایل آسیب دیده باشد یا فرمت آن پشتیبانی نشود." نشان داده خواهد شد.
  • دکمه شروع مجدد: با کلیک بر روی دکمه "شروع مجدد"، تصویر بارگذاری‌شده پاک شده، تاریخچه رنگ‌ها خالی می‌شود و ابزار به حالت اولیه خود باز می‌گردد.

حریم خصوصی و امنیت پردازش تصاویر

امنیت اطلاعات شما در این ابزار به طور کامل حفظ می‌شود. تصویر مستقیماً از دستگاه شما خوانده می‌شود و هرگز از مرورگرتان خارج نمی‌شود. هیچ فایلی در BroBroGo بارگذاری نخواهد شد.


چه کسانی به این ابزار نیاز دارند؟

این ابزار برای افراد و تخصص‌های زیر طراحی شده است:

  • طراحان: کسانی که نیاز دارند رنگ‌های دقیق پیکسل‌ها را از تصاویر مرجع برای طراحی رابط کاربری (UI) استخراج کنند.
  • توسعه‌دهندگان: برنامه‌نویسانی که برای نوشتن کدهای CSS خود به مقادیر دقیق رنگی نیاز دارند.
  • تولیدکنندگان محتوا: افرادی که برای کارهای برندسازی یا ویرایش تصاویر نیاز به نمونه‌برداری از رنگ‌ها دارند.
  • سایر کاربران: هر کسی که می‌خواهد کدهای رنگی HEX، RGB یا HSL را از روی یک عکس کپی کند.

سوالات متداول (FAQ)

چگونه می‌توانم یک رنگ را از روی تصویر انتخاب کنم؟
نشانگر را روی تصویر حرکت دهید تا پنل رنگ زیر آن را نشان دهد. یک ذره‌بین نیز برای زوم کردن وجود دارد تا بتوانید دقیقاً روی پیکسل مورد نظر قرار بگیرید. برای ذخیره رنگ کلیک کنید. همچنین می‌توانید روی تصویر فوکوس کرده و با کلیدهای جهت‌نما نشانگر را حرکت دهید و سپس Enter را فشار دهید.

چه فرمت‌های رنگی را دریافت می‌کنم؟
هر پیکسلی که نمونه‌برداری می‌کنید به طور هم‌زمان در قالب‌های HEX، RGB و HSL نشان داده می‌شود. روی هر مقداری کلیک کنید تا کپی شود و آماده استفاده در CSS یا ابزارهای طراحی باشد.

چرا رنگ انتخاب‌شده همیشه با آنچه انتظار داشتم مطابقت ندارد؟
شما دقیقاً همان مقدار پیکسلی را دریافت می‌کنید که در تصویر ذخیره شده است. اگر تصویر JPEG یا اسکرین‌شات باشد، فشرده‌سازی و هموارسازی لبه‌ها (anti-aliasing) ممکن است پیکسل‌های مجاور را کمی تغییر داده باشد. همچنین پیکسل‌های نیمه‌شفاف به طور مستقل و بدون در نظر گرفتن پس‌زمینه پشت آن‌ها خوانده می‌شوند.