یک تصویر دارید و به یک عدد از آن نیاز دارید: کد هگز یک رنگ مشخص. شاید یک لوگویی است که مشخصات برندش مدتهاست رفته، یک اسکرینشات از سایتی که میخواهید آبیاش را هماهنگ کنید، یا عکسی با سایهای که میخواهید دوباره استفاده کنید. تایپ کردن چیزی که فکر میکنید رنگ است جواب نمیدهد — چشم شما نمیتواند #3A7BD5 را از یک صفحه بخواند و رنگی که درست به نظر میرسد معمولاً چند رقم مشکل دارد. اینجا میبینید چطور مقدار واقعی را مستقیم از پیکسلها بخوانید.
چرا حدسزدن هرگز درست جواب نمیدهد
یک «آبی» واحد روی صفحه واقعاً یک گستره از آبیهای تقریباً یکسان است و روشنایی و کالیبراسیون مانیتورتان بیشتر جابهجایشان میکند. با چشم انتخاب کنید و نزدیک اما اشتباه میافتید — آنقدر نزدیک که ناهماهنگی آزاردهنده اما آشکار نیست، پس ده دقیقه در تعجب میمانید که چرا دکمه با سرصفحه جور نیست. راهحل این است که دیگر حدس نزنید و عددی را که پیکسل واقعاً ذخیره میکند بخوانید.
کد را در سه گام بگیرید
راه قابلاعتماد نمونهبرداری مستقیم از پیکسل با یک انتخابگر رنگ است.
- تصویر را بارگذاری کنید. لوگو، اسکرینشات یا عکسی که از آن میکشید را بیندازید.
- نشانگر را به پیکسل دقیق ببرید. یک ذرهبین نشانگرتان را دنبال میکند و ناحیه زیرش را بزرگ میکند، پس روی یک لبه تیز میتوانید ببینید کدام پیکسل رنگ یکدست برند است و کدام یک ترکیب صافشده از دو رنگ است.
- کلیک کنید تا ذخیره شود، بعد کپی کنید. هر کلیک رنگ را بهصورت یک نمونه که HEX، RGB و HSL آن را نشان میدهد نگه میدارد، هرکدام با دکمه کپی خودش. روی HEX کلیک کنید و روی کلیپبورد شماست.
روی پیکسل درست فرود بیایید
ذرهبین مهمتر از آن است که به نظر میرسد. جایی که یک رنگ رنگ دیگری را میبیند — یک حرف در برابر یک پسزمینه، لبه یک آیکون — پیکسلهای بینشان صافشدهاند: یک ترکیب هموارشده از دو رنگ، نه هیچکدام. آنجا نمونه بگیرید و یک مقدار کدر میگیرید که با هیچچیز جور نیست. یک ناحیه یکدست چند پیکسل داخل شکل را هدف بگیرید، جایی که رنگ یکدست است، و نمای زومشده میگذارد پیش از کلیک تأیید کنید که رویش هستید.
روی یک لوگوی تمیز یا یک رابط کاربری یکدست این آسان است — رنگ در سراسر یک ناحیه عریض یکنواخت است. روی یک عکس بیشتر دقت میبرد، چون دانه و فشردهسازی یعنی پیکسلهای همسایه واقعاً فرق دارند. از یک ناحیه آرام و یکنواختنوردهیشده انتخاب کنید و یکی دو نمونه بگیرید تا بررسی کنید همعقیدهاند.
HEX، RGB یا HSL — هرکدام که جا میشود بگیرید
هر نمونه هر سه را یکجا به شما میدهد، پس هرکدام را که مقصدتان میخواهد کپی میکنید:
- HEX (
#3A7BD5) — پیشفرض وب. CSS، Figma، Canva، اسناد برند. این را کپی کنید مگر دلیلی برای نکردنش داشته باشید. - RGB (
rgb(58, 123, 213)) — مقادیر کانال، بهدردبخور وقتی یک ابزار آنها را میخواهد یا از طریقrgbaبه شفافیت نیاز دارید. - HSL (
hsl(215, 65%, 53%)) — رنگمایه، اشباع، روشنایی. بهترین وقتی میخواهید رنگ را تنظیم کنید: برای یک حالت نشانگر روشنش کنید، برای یک نسخه کمرنگش کنید، یا از آن یک مقیاس بسازید.
چون هر نمونه هر سه را حمل میکند، هرگز فقط برای عوض کردن فرمت دوباره نمونه نمیگیرید.
گرفتن چند رنگ یکجا
یک لوگو بهندرت یک رنگ است. رنگ اصلی، لهجه و رنگ متن را در یک مرحله کلیک کنید — هرکدام در فهرست روی هم مینشیند تا بتوانید مقایسهشان کنید و یکی پس از دیگری کپیشان کنید، بهجای بارگذاری تصویر سه بار جداگانه.
اگر یک خلاصه رنگ از یک تصویر کامل میخواهید نه پیکسلهای مشخص — پالت کلی که یک عکس از آن ساخته شده — آن یک کار متفاوت است و ابزار پالت جداگانه img.diy رنگهای غالب را برایتان خودکار استخراج میکند. وقتی نقطه دقیق را میدانید از این انتخابگر استفاده کنید؛ وقتی میخواهید تصویر برایتان مشخصهبندی شود از ابزار پالت استفاده کنید.
روی دستگاه شما میماند
تصویر بهصورت محلی در مرورگر شما از روی یک بوم خوانده میشود — چیزی آپلود نمیشود، ثبتنامی نیست و بعد از اولین بارگذاری آفلاین کار میکند. پس یک ماکاپ منتشرنشده یا یک دارایی خصوصی یک مشتری هرگز فقط بهخاطر اینکه به یک کد هگز از آن نیاز داشتید دستگاه شما را ترک نمیکند.
تصویر را بارگذاری کنید، نشانگر را به پیکسل ببرید، کلیک کنید و کد را کپی کنید.