CSS
توسعه رابط وب
بدون باز کردن DevTools، مقادیر دقیق را از یک سایت زنده برای CSS، SCSS یا تنظیمات Tailwind بردار.
انتخابگر رنگ رایگان برای Chrome
با انتخابگر رنگ از هر صفحه رنگ بردار. #E8553D بگیر
انتخابگر رنگ ساده یک قطرهچکان رایگان برای Chrome است. دکمه آن یا Alt+P را بزن، با ذرهبین روی هر پیکسل نشانه بگیر و کلیک کن: کد HEX، RGB یا HSL همان لحظه در کلیپ‌بورد توست. 50 رنگ آخر در پنجره بازشو منتظر تو هستند.
۴۵۳ کاربر در Chrome Web Store
در Edge، Brave، Opera و دیگر مرورگرهای مبتنی بر Chromium هم کار میکند.
در یک نگاه
- چه میکند
- انتخابگر رنگ با قطرهچکان: با ذرهبین روی هر پیکسل صفحه وب نشانه بگیر و کلیک کن تا کد HEX، RGB یا HSL آن کپی شود.
- برای چه کسی است
- برای توسعه‌دهندگان وب و طراحانی که رنگ سایت‌های زنده، طرح‌های اولیه و تصاویر صفحه بازشده در مرورگر را تطبیق می‌دهند، و هر کسی که کد رنگ لازم دارد.
- قیمت
- رایگان. بدون حساب یا نسخه پولی.
- داده‌ها
- تاریخچه و قالب پیشفرض تو در فضای ذخیره‌سازی محلی افزونه روی دستگاهت میمانند. بدون تحلیل آماری یا درخواست شبکه.
- محیط‌های سازگار
- روی رایانه، در Chrome و دیگر مرورگرهای Chromium که از Chrome Web Store افزونه نصب می‌کنند. در صفحههای خود مرورگر مثل برگه جدید، تنظیمات یا Chrome Web Store کار نمیکند.
- محدودیت‌ها
- رنگ را از بخش نمایان برگه و از تصویری که هنگام شروع گرفته میشود برمیدارد. از CMYK، Pantone، بررسی کنتراست یا برداشتن رنگ بیرون مرورگر پشتیبانی نمیکند.
- نسخه
- 2.7.0، به‌روزرسانی ۱ آبان ۱۴۰۵
سه گام، یک کلیک
- 1
انتخابگر را شروع کن
روی نماد نوار ابزار کلیک کن و دکمه انتخاب رنگ را بزن، یا در هر صفحه Alt+P را فشار بده.
- 2
با ذرهبین نشانه بگیر
ذرهبین مربعی دور نشانگر را بزرگ میکند و پیکسل دقیق را قاب می‌گیرد. نمونه رنگ زیر آن کدهای HEX، RGB و HSL را زنده نشان میدهد.
- 3
کلیک کن و بچسبان
کد در قالب پیشفرض تو کپی میشود و پیامی کوتاه آن را تأیید میکند. آن را در CSS، Figma یا یک پیام بچسبان.
چه کسانی از آن استفاده می‌کنند
HEX
بررسی طرح و هویت برند
از رابط، طرح اولیه یا مرجع یک پالت رنگ بردار و بررسی کن که صفحه از رنگ درست برند استفاده میکند.
HSL
تنظیم رنگ‌ها
برای تنظیم دستی روشنایی و اشباع HSL بردار، یا برای کدی که به عدد نیاز دارد RGB بگیر.
چه میکند
پیکسل در قاب
ذرهبین 11 × 11 پیکسل دور نشانگر را بزرگ میکند و نشانه‌گیر پیکسل انتخابی را قاب می‌گیرد. حاشیه‌ای به عرض یک پیکسل یا یک گام از طیف رنگ را بگیر.
قالب
HEX مثل #2A6FDB، RGB مثل rgb(42, 111, 219)، HSL مثل hsl(217, 71%, 51%). قالب پیشفرض را یک بار در پنجره بازشو انتخاب کن.
رنگ در تاریخچه
هر انتخاب بدون تکرار به ابتدای شبکه 50 رنگ آخر اضافه میشود. روی نمونه رنگ کلیک کن تا هر سه کد را ببینی و کپی کنی.
میانبر Alt+P
بدون باز کردن پنجره بازشو برداشتن رنگ را شروع کن. اگر کلید دیگری می‌خواهی، نماد کلید در پنجره بازشو تنظیمات میانبر Chrome را باز میکند.
درخواست شبکه
همه‌چیز در مرورگر تو اجرا میشود. بدون حساب، تحلیل آماری یا ارسال داده‌های استفاده.
روشن و تیره
پنجره بازشو و ذرهبین از پوسته سیستم تو پیروی می‌کنند. خاکستری‌های خنثی آن‌ها بر قضاوت تو درباره رنگ‌ها اثر نمی‌گذارند.
چطور کد رنگ هر چیزی را در یک صفحه وب بگیری
قطرهچکان خود Chrome در DevTools است: پنل سبک‌ها را باز کن، یک ویژگی رنگ پیدا کن، روی نمونه آن و سپس قطرهچکان کلیک کن. کار میکند، اما رسیدن به آن چند گام دارد. مقدار انتخابی هم به جای رفتن به کلیپ‌بورد، آن ویژگی را در CSS صفحه عوض میکند.
انتخابگر رنگ ساده قطرهچکان را با یک کلیک یا میانبر در دسترس می‌گذارد. هنگام شروع، از بخش نمایان برگه تصویر می‌گیرد و یک ذرهبین مربعی روی آن باز میکند. پس پیکسل دقیق را می‌بینی، نه میانگین رنگ‌ها را. یک کلیک کد را کپی میکند و پنجره بازشو آن را همراه 50 رنگ آخر در هر سه قالب نگه می‌دارد.
پیش از شروع به بخش لازم صفحه برو: ذرهبین از همان تصویر رنگ میخواند. صفحههای خود مرورگر مثل برگه جدید، تنظیمات و Chrome Web Store به روی همه افزونهها بسته‌اند.
طراحی با حفظ حریم خصوصی
بدون درخواست شبکه
افزونه هرگز به سروری وصل نمی‌شود. بدون تحلیل آماری یا ارسال داده‌های استفاده.
روی دستگاهت می‌ماند
تاریخچه و قالب پیشفرض تو در فضای ذخیره‌سازی محلی افزونه میمانند.
چهار مجوز
برگه فعال، فقط هنگام شروع انتخاب رنگ، برای گرفتن تصویر؛ اجرای اسکریپت برای نمایش ذرهبین؛ ذخیره‌سازی برای تاریخچه و قالب؛ نوشتن در کلیپ‌بورد برای کپی کد.
مقایسه قطرهچکان DevTools و انتخابگر رنگ ساده
| مقایسه قطرهچکان DevTools و انتخابگر رنگ ساده | قطرهچکان DevTools | انتخابگر رنگ ساده |
|---|---|---|
| روش شروع | DevTools را باز کن، در سبک‌ها رنگی پیدا کن، روی نمونه آن و سپس قطرهچکان کلیک کن | دکمه نوار ابزار یا Alt+P |
| مقصد نتیجه | ویژگی CSS که باز کرده‌ای؛ خودت آن را کپی می‌کنی | کلیپ‌بورد تو، با یک کلیک |
| قالب‌های رنگ | HEX، RGB، HSL و قالب‌های دیگر | HEX، RGB و HSL |
| رنگ‌های انتخاب‌شده قبلی | نگه داشته نمی‌شوند | 50 رنگ آخر تو، آماده کپی دوباره |
| قیمت | تعبیه‌شده در Chrome | رایگان |
پرسش‌ها
چطور کد رنگ را از یک وبسایت بگیرم؟
انتخابگر رنگ ساده را نصب کن، در صفحه Alt+P را بزن، ذرهبین را روی رنگ نشانه بگیر و کلیک کن. کد HEX یا اگر ترجیح بدهی RGB یا HSL در کلیپبوردت کپی میشود.
چطور با انتخابگر رنگ از یک تصویر در صفحه وب رنگ بردارم؟
به همان روش: انتخابگر را شروع کن و روی پیکسل دلخواه در تصویر کلیک کن. ذرهبین بزرگ میکند تا بتوانی دقیقاً یک پیکسل را برداری.
میتوانم به جای HEX کد HSL یا RGB کپی کنم؟
بله. قالب پیشفرض را در پنجره بازشو انتخاب کن: HEX، RGB یا HSL. پنجره هر سه قالب را برای هر رنگ در تاریخچه نشان میدهد و هر کدام دکمه کپی جداگانه دارد.
رنگ‌هایی را که قبلاً برداشتم کجا پیدا کنم؟
پنجره بازشو را باز کن: 50 رنگ آخر به شکل نمونه رنگ آنجا هستند، از جدید به قدیم. روی یکی کلیک کن تا کدهایش را ببینی و کپی کنی، یا تاریخچه را پاک کن.
چطور میانبر Alt+P را عوض کنم؟
روی نماد کلید میانبر در پنجره بازشو کلیک کن. صفحه میانبرهای صفحه‌کلید Chrome باز میشود و می‌توانی کلید دیگری تعیین کنی.
چرا قطرهچکان در بعضی صفحهها کار نمیکند؟
Chrome صفحههای خودش مثل برگه جدید، تنظیمات و Chrome Web Store را به روی همه افزونهها میبندد. انتخابگر فقط بخش نمایان برگه را میخواند، پس اول به محل رنگ برو.
میتواند از بیرون مرورگر رنگ بردارد؟
نه. فقط از برگه فعلی مرورگر رنگ برمیدارد. به CMYK یا Pantone تبدیل نمیکند و کنتراست را هم نمیسنجد.
رایگان است؟ داده جمع میکند؟
رایگان است و هیچ درخواست شبکهای نمیفرستد. تاریخچه و قالب پیشفرض تو روی دستگاهت میمانند.
افزونه‌های رایگان دیگر از PYROCTAL
تصویر کامل صفحهبا یک کلیک یا کلید میانبر از تمام صفحه وب اسکرینشات اسکرولی بگیرید و آن را به صورت یک فایل PNG ذخیره کنید.
فونتلنزبا راستکلیک فونت هر متنی را بیابید. کد CSS، Tailwind یا SCSS را کپی کنید، ویرایشها را زنده تست کنید و کنتراست را بسنجید.
YouTube Auto Qualityکیفیت ویدیوی دلخواه را در یوتیوب بهصورت خودکار تنظیم کنید. پهنای باند ذخیره یا از HD/4K لذت ببرید.
ذخیره تصویر به صورت JPEGهر عکسی (WebP, PNG, AVIF و...) را با کلیکراست به فرمت JPG ذخیره کنید؛ فرمتی که تمام فرمهای آپلود میپذیرند.