یک اسکرینشات اغلب تنها چیزی است که دارید. نمیتوانید CSS سایت را باز کنید، نمیتوانید اپ را بازرسی کنید، فایلِ طراحی را ندارید — اما میتوانید رنگها را روی صفحه ببینید، و یک اسکرینشات آنها را در تصویری منجمد میکند که میتوانید نمونهبرداریاش کنید. در ادامه میبینید چطور کدهای دقیقِ رنگ را از یکی بیرون بکشید.
چرا یک اسکرینشات منبعِ صادق است
وقتی از یک صفحه یا اپِ رندرشده اسکرینشات میگیرید، رنگها را همانطور که واقعاً ظاهر میشوند ثبت میکنید — پس از اینکه هر گرادیان، روپوش و شفافیت اعمال شده. این اغلب صادقتر از مقدارِ منبع است. کارتی که بهصورتِ #000000 با شفافیتِ ۹۰٪ روی یک پسزمینهٔ خاکستری تعریف شده روی صفحه سیاه نیست؛ یک خاکستریِ تیرهٔ مشخص است. بازرسیِ کد دستورِ پخت را میدهد؛ نمونهبرداری از اسکرینشات رنگی را میدهد که کاربر واقعاً میبیند. وقتی آن ظاهر را منطبق میکنید، اسکرینشات همان است که میخواهید بخوانید.
در سه گام یک رنگ بردارید
- اسکرینشات را بگیرید و بارگذاری کنید. صفحه (یا ناحیهای که برایتان مهم است) را ثبت کنید و تصویر را در رنگبردار بیندازید.
- نشانگر را روی پیکسل ببرید. یک ذرهبین نشانگرتان را دنبال میکند و ناحیهٔ زیرش را بزرگ میکند، پس میتوانید دقیق فرود بیایید — حتی روی یک حاشیهٔ نازک یا یک آیکونِ کوچک.
- کلیک کنید تا ذخیره شود، سپس کپی کنید. هر کلیک رنگ را بهصورتِ یک نمونه با HEX، RGB و HSL آن نگه میدارد، هرکدام با یک دکمهٔ کپی. فرمتی را که نیاز دارید کپی کنید و در برگهٔ سبکتان یا ابزارِ طراحی بچسبانید.
چیزهای خاصِ اسکرینشات که باید مراقبشان باشید
اسکرینشاتها ویژگیهایی دارند که میتوانند یک نمونهٔ رنگ را بههم بریزند، و وقتی بشناسیدشان پرهیز از آنها آسان است:
- بهصورتِ PNG ذخیره کنید، نه JPEG. فشردهسازیِ JPEG رنگها را کمی میمالد، بهخصوص نزدیکِ لبهها و در نواحیِ تخت، پس یک مقدارِ نمونهبرداریشده میتواند از مقدارِ واقعی منحرف شود. PNG بیاُفت است و هر پیکسل را دقیق نگه میدارد — بیشترِ ابزارهای اسکرینشاتِ سیستمعامل از قبل PNG را پیشفرض میگذارند.
- مراقبِ سطحِ زوم باشید. یک اسکرینشات که با زومِ مرورگر یا سیستمعاملِ غیر از ۱۰۰٪ گرفته شده مقیاسبندی شده، و مقیاسبندی پیکسلهای همسایه را میآمیزد. برای تمیزترین نمونه، با ۱۰۰٪ ثبت کنید.
- از لبهها و متن بپرهیزید. ضدِدندانهای یعنی پیکسلهای کنارِ هر لبه آمیختهاند، نه رنگِ واقعی. از وسطِ یک ناحیهٔ توپُر نمونهبرداری کنید — ذرهبین کمکتان میکند ببینید از مرزِ مبهم دور هستید.
- مراقبِ رنگِ زیرپیکسلیِ متن باشید. روی متنِ رندرشده زوم کنید و حاشیههایی از رنگ خواهید دید که مقدارِ واقعیِ متن نیستند. رنگها را از پُرکنندهها و پسزمینهها بردارید، نه از خطهای حروف.
خواندنِ HEX، RGB و HSL
هر نمونه هر سه فرمت را یکجا نشان میدهد:
- HEX (
#3A7BD5) — پیشفرض برای CSS و ابزارهای طراحی. - RGB (
rgb(58, 123, 213)) — مقادیرِ کانال، بهکار میآید وقتی به شفافیتِrgbaنیاز دارید. - HSL (
hsl(215, 65%, 53%)) — رنگمایه، اشباع، روشنایی، بهترین وقتی میخواهید رنگ را دستکاری کنید نه اینکه دقیق کپیاش کنید.
برای سوئیچ دوباره نمونهبرداری نمیکنید — همان رنگ از قبل در هر سه آنجاست.
یک طرحِ کامل را در یک گذر بردارید
از یک اسکرینشات میتوانید یک طرحِ رنگیِ کامل را بازسازی کنید: رنگِ سرصفحه، دکمه، پیوند، پسزمینه، متنِ کمرنگ را کلیک کنید. هرکدام در فهرست روی هم انباشته میشود پس میتوانید کلِ مجموعه را در یک نشست بیرون بکشید و آنها را به ترتیب کپی کنید.
اگر بهجایش پالتِ کلیِ یک تصویر را خلاصهشده برایتان میخواهید — آن مشتی تُنِ غالب — این کارِ جداگانهای است، و ابزار پالتِ img.diy آنها را خودکار استخراج میکند. این رنگبردار برای اشاره به یک پیکسلِ مشخص در اسکرینشات است؛ ابزار پالت برای توصیفِ تصویر بهعنوانِ یک کل است.
چیزی دستگاهتان را ترک نمیکند
اسکرینشاتها اغلب چیزهایی دارند که ترجیح میدهید آپلود نکنید — یک داشبوردِ داخلی، یک پیشنویسِ خصوصی، یک رابطِ کاربریِ منتشرنشدهٔ یک مشتری. اینجا تصویر بهصورتِ محلی در مرورگرتان از روی یک بوم خوانده میشود: چیزی جایی فرستاده نمیشود، حسابی نیست، و پس از بارگذاریِ اول آفلاین کار میکند. رنگها را میگیرید بدونِ اینکه اسکرینشات هرگز دستگاهتان را ترک کند.
اسکرینشات را بگیرید، نشانگر را روی پیکسل ببرید، کلیک کنید، و کپی کنید.