به رنگ دقیق یک لوگو، یک اسکرینشات، یک عکس، یا یک مرجع طراحی نیاز دارید؟ تصویر را بارگذاری کنید، نشانگرتان را روی آن حرکت دهید تا رنگ زیرِ ذرهبین را پیشنمایش کنید، و کلیک کنید تا ذخیرهاش کنید. هر رنگ ذخیرهشده HEX، RGB و HSL خود را با دکمههای کپی یککلیکی نشان میدهد.
پیکسلها را مستقیم از تصویر در مرورگر شما میخواند، پس برچیدن آنی است و فایل هرگز آپلود نمیشود — بهدرد رنگهای برندی میخورد که ترجیح میدهید به یک سایت تصادفی نفرستید.
نحوه استفاده
- یک تصویر اضافه کنیدعکس یا اسکرینشاتی را که میخواهید رنگها را از آن بگیرید رها کنید.
- حرکت دهید و کلیک کنیدذرهبین دقیقاً همان پیکسل را بزرگنمایی میکند؛ کلیک کنید تا رنگ را ذخیره کنید.
- مقدار را کپی کنیدبرای هر رنگی که ذخیره کردید HEX، RGB یا HSL را بگیرید.
گاهی یک رنگ از یک تصویر میخواهید و هیچچیز دیگری کفایت نمیکند — همان آبی دقیق در یک لوگو، خاکستری پشت یک دکمه در یک اسکرینشات، یک سایه در عکسی که میخواهید دوباره استفاده کنید. چشم شما نمیتواند یک کد hex را از روی یک صفحه بخواند، و رنگی که درست بهنظر میرسد معمولاً چند رقم اشتباه است. این ابزار به شما اجازه میدهد یک تصویر بارگذاری کنید، با یک ذرهبین لوپ که پیکسلهای زیر مکاننما را بزرگ میکند روی آن حرکت کنید، و کلیک کنید تا همان یکی که میخواهید را بهعنوان یک نمونهرنگ ذخیره کنید — HEX، RGB و HSL همه با هم نشان داده میشوند، هر یک با یک دکمهٔ کپی.
پیکسلها را بهصورت محلی در مرورگر شما از روی یک canvas میخواند: چیزی آپلود نمیشود، حسابی نیست، و پس از بارگذاری اول آفلاین کار میکند. این وقتی که تصویر یک ماکاپ منتشرنشده، یک دارایی برند مشتری، یا یک اسکرینشات داخلی است اهمیت دارد. یک نمونهبردار نقطهای است — هر کلیک یک پیکسل را میخواند، که برای یک لوگوی تمیز یا UI تخت دقیقاً درست است، و روی یک عکس پرنویز کمی دقت بیشتر میگیرد. اگر ترجیح میدهید رنگهای غالب یک کل تصویر برایتان خودکار کشیده شوند، ابزار پالت جداگانه برای همان است؛ این یکی برای اشاره به یک پیکسل مشخص و گرفتن مقدارش است.
مردم از آن برای چه استفاده میکنند
رنگ دقیق یک برند را از یک لوگوی قدیمی وقتی مشخصات رفته بازیابی کنید
یک دکمه یا سرفصل را با رنگ در یک اسکرینشات از سایتی که میپسندید هماهنگ کنید
رنگهای اصلی، تأکید و متن را از یک لوگو در یک پاس بکشید
یک سایه را از یک عکس بگیرید تا بهعنوان یک پسزمینه یا تأکید استفاده کنید
رنگ واقعی روی-صفحهٔ یک عنصر نیمهشفاف را از یک اسکرینشات بخوانید
یک رنگ را بهصورت HSL کپی کنید تا برای یک حالت هاور یا نوع، روشنترش یا کمرنگترش کنید
وقتی به رنگ دقیق نیاز دارید، نه رنگی که نزدیک است
دارید یک برند را بازمیسازید و تنها مرجع یک لوگوی قدیمی است. دارید یک دکمه را با اسکرینشات سایتی که دوست دارید جور میکنید. یک سایه را در یک عکس دیدید و میخواهید در طرح خودتان استفادهاش کنید. در هر حالت مشکل یکی است: چشم شما نمیتواند یک کد hex را از یک صفحه بخواند. «آن آبیفیروزهای» واقعاً دهها آبیفیروزهای کمی متفاوت است، و مانیتورها بیشتر جابهجاشان میکنند. به عددی نیاز دارید که پیکسل واقعاً در خود دارد.
این کاری است که این ابزار میکند. یک تصویر بارگذاری کنید، رویش حرکت کنید، و یک ذرهبین لوپ نشانگرتان را دنبال میکند و پیکسلهای زیرین را نشان میدهد، بزرگشده تا بتوانید دقیقاً روی همانی که میخواهید بنشینید. کلیک کنید، و آن رنگ بهعنوان یک نمونه ذخیره میشود. هر نمونه مقدار HEX، RGB و HSL خود را با یک دکمه کپی کنار هرکدام فهرست میکند، پس مستقیم از یک پیکسل در تصویر به یک کد در کلیپبوردتان میروید.
تصویر هرگز دستگاهتان را ترک نمیکند. پیکسلها بهصورت محلی در مرورگر از روی یک canvas خوانده میشوند — چیزی آپلود نمیشود، حساب کاربریای نیست، و همینکه صفحه بارگذاری شد با شبکه خاموش به کار ادامه میدهد. این همان نکته است وقتی «تصویر» یک ماکاپ رونمایینشده، یک دارایی برند مشتری، یا یک اسکرینشات داخلی است که نباید به یک ابزار وب تصادفی تحویلش دهید.
در عمل چطور کار میکند
- لوپ برای دقت است. لوگوها و رابط کاربری لبههای تیزی دارند که رنگ روی یک پیکسل عوض میشود — anti-aliasing یعنی پیکسل بغلی یک ترکیب گلآلود است. نمای بزرگشده اجازه میدهد پیش از تعهد دقیقاً ببینید روی کدام پیکسل هستید، پس رنگ تخت برند را برمیدارید نه لبه را.
- هر کلیک یک نمونه نگه میدارد. نمونهگیری یکییکیورفته نیست. دور تصویر کلیک کنید و هر رنگ در یک فهرست انباشته میشود، پس میتوانید رنگ اصلی یک لوگو، تأکیدش، و رنگ متن را در یک گذر بیرون بکشید و کنار هم مقایسهشان کنید.
- سه فرمت، یک انتخاب. هر نمونه HEX، RGB و HSL را یکجا نشان میدهد. برای عوضکردن فرمت دوباره نمونه نمیگیرید — همان رنگ از قبل در هر سه نشسته، هرکدام با دکمه کپی خودش.
HEX، RGB، HSL — کدام را کپی کنیم
سه راه نوشتن همان یک رنگاند، و درست کدام است بستگی دارد کجا میرود.
- HEX (
#3A7BD5) پیشفرض وب است — CSS، بیشتر ابزارهای طراحی، اسناد برند. جمعوجور و همهجا قابلچسباندن. این را کپی کنید مگر دلیلی برای غیرش داشته باشید. - RGB (
rgb(58, 123, 213)) کانالهای قرمز، سبز و آبی را هجی میکند. مفید وقتی یک ابزار مقادیر کانالی میخواهد، وقتی به یک آلفا (rgba) نیاز دارید، یا وقتی درباره نحوه ترکیب یک رنگ استدلال میکنید. - HSL (
hsl(215, 65%, 53%)) رنگمایه، اشباع و روشنایی را توصیف میکند. این آنی است که سراغش بروید وقتی میخواهید یک رنگ را تنظیم کنید نه فقط دوباره استفاده — روشنایی را برای یک حالت hover هل بدهید، اشباع را برای یک نسخه ملایم بیندازید، رنگمایه را نگه دارید و یک مقیاس بسازید.
یک محدودیت صادقانه، و یک ابزار خواهر
این یک نمونهگیر نقطهای است: هر کلیک یک پیکسل واحد را میخواند. روی یک لوگوی تمیز یا رابط تخت دقیقاً همان است که میخواهید. روی یک عکس پرنویز — دانه، گرادیان، آرتیفکتهای JPEG — دو پیکسل مجاور میتوانند فرق کنند، پس از یک ناحیه تخت انتخاب کنید و از لوپ استفاده کنید تا روی یک نقطه پرت ننشینید. هیچ براش میانگینیکناحیه اینجا نیست.
و اگر اصلاً نمیخواهید با دست انتخاب کنید، img.diy یک ابزار پالت جداگانه دارد که کل یک تصویر را اسکن میکند و رنگهای غالبش را بهطور خودکار تحویلتان میدهد. این دو به پرسشهای متفاوتی پاسخ میدهند. ابزار پالت به شما میگوید این تصویر از چه رنگهایی ساخته شده؛ انتخابگر رنگ اجازه میدهد به یک پیکسل خاص اشاره کنید — همین نقطه دقیق روی لوگو، آن یک دکمه — و مقدارش را بردارید. برای خلاصهکردن یک تصویر سراغ ابزار پالت بروید، و برای وقتی که از قبل نقطهای را که میخواهید میدانید سراغ این یکی.
یک تصویر بارگذاری کن، برای یافتن پیکسل حرکت کن، برای نگهداشتنش کلیک کن، فرمتی را که لازم داری کپی کن.
چرا IMG.DIY
ذرهبین بزرگنما
بزرگنمایی میکند تا روی پیکسل دقیق کلیک کنید.
HEX / RGB / HSL
هر رنگ ذخیرهشده در سه فرمت.
کپی با یک کلیک
هر مقداری را مستقیم در کلیپبورد کپی کنید.
خصوصی
پیکسلها بهصورت محلی خوانده میشوند — بدون آپلود.