انتخابگر رنگ یک ابزار قطرهچکان دقیق در سطح پیکسل برای انتخاب رنگ از هر عنصر روی یک صفحه وب ارائه میدهد — متن، پسزمینهها، تصاویر، گرادیانها یا هر پیکسل قابل مشاهده. مقدار رنگ دقیق را به صورت همزمان در فرمتهای HEX، RGB و HSL دریافت کنید، با یک پیشنمایش پیکسل بزرگشده برای هدفگذاری دقیق. رنگهای انتخابشده قبلی در یک نوار تاریخچه برای دسترسی مجدد سریع ذخیره میشوند.
استخراج مقادیر رنگی دقیق از یک صفحه وب یک کار رایج است — تطبیق یک رنگ برند، ارجاع به یک طراحی یا بررسی سایهای استفادهشده روی سایت رقیب. DevTools مرورگر رنگها را در پنل Styles نشان میدهد، اما فقط برای عناصر با ویژگیهای CSS رنگ صریح — نه برای تصاویر، گرادیانها یا رنگهای به ارث رسیده. قطرهچکان انتخابگر رنگ در سطح پیکسل کار میکند — رنگ واقعی رندرشده هر پیکسلی که زیر مکاننما است را میخواند، صرفنظر از اینکه آن رنگ چگونه آمده است. روی یک آسمان آبی در یک تصویر hero، یک نقطه میانی گرادیان، یا یک overlay نیمهشفاف کلیک کنید و مقدار رنگ ترکیبی دقیق را دریافت کنید. دایره پیشنمایش بزرگشده یک نمای زومشده از پیکسلهای اطراف نشان میدهد تا بتوانید پیکسل دقیق موردنظرتان را هدف قرار دهید. همه سه خروجی فرمت (HEX، RGB، HSL) به صورت همزمان نشان داده میشوند — روی هر فرمت کلیک کنید تا کپی کنید. چندین انتخاب آخر شما در یک نوار تاریخچه رنگ ذخیره میشوند تا بتوانید به راحتی به یک رنگ انتخابی قبلی برگردید.
یک پیشنمایش دایرهای بزرگشده پیکسلهای زومشده اطراف مکاننما را با هدفگذاری crosshair برای انتخاب دقیق پیکسل نشان میدهد. رنگها را از متن، پسزمینهها، تصاویر، گرادیانها، SVGها یا هر پیکسل قابل مشاهده روی صفحه انتخاب کنید.
هر رنگ انتخابشده به صورت همزمان در هر سه فرمت نشان داده میشود: HEX (#7c3aed)، RGB (rgb(124, 58, 237)) و HSL (hsl(262, 83%, 58%)). نیازی به جابجایی یا تبدیل نیست — همه فرمتها فوراً در دسترس هستند.
روی هر ردیف فرمت (HEX، RGB یا HSL) کلیک کنید تا آن مقدار خاص را فوراً در clipboard کپی کنید. یک انیمیشن کوتاه «Copied!» عمل را تأیید میکند. مستقیماً در CSS، ابزار طراحی یا مشخصات رنگ paste کنید.
رنگهای اخیراً انتخابشده در یک نوار تاریخچه بصری که نمونههای رنگی را نشان میدهد ذخیره میشوند. روی هر نمونه کلیک کنید تا آن رنگ را مجدداً انتخاب کرده و مقادیر آن را دوباره ببینید. تاریخچه در طول جلسه باقی میماند — رنگها را از چندین صفحه انتخاب کنید.
رنگ انتخابی به صورت یک نمونه بزرگ بالای مقادیر فرمت نمایش داده میشود و دیدن و تأیید رنگ را آسان میکند. نمونه به اندازه کافی بزرگ است که سایههای ظریف که ممکن است در اندازههای کوچکتر یکسان به نظر برسند را نشان دهد.
رنگها را از هر پیکسل قابل مشاهده انتخاب میکند: رنگهای CSS، گرادیانهای CSS، تصاویر (PNG، JPG، SVG)، عناصر canvas، فریمهای ویدئو، overlayهای نیمهشفاف (انتخاب رنگ ترکیبی) و حتی iframeها. اگر میتوانید آن را ببینید، میتوانید آن را انتخاب کنید.
رنگ برند دقیق را از وبسایت یک شرکت انتخاب کنید تا مطمئن شوید طراحی یا محتوای شما از سایه صحیح استفاده میکند. مقدار دقیق HEX را دریافت کنید به جای اینکه تخمین بزنید یا در راهنماهای برند جستجو کنید.
رنگها را مستقیماً از تصاویر hero، عکسهای محصول یا تصویرسازیها انتخاب کنید. یک رنگ غالب را از یک عکس استخراج کنید تا به عنوان یک پسزمینه مکمل در طراحی خود استفاده کنید.
مشخصات طراحی میگوید دکمه باید #7c3aed باشد. رنگ را از دکمه پیادهسازیشده انتخاب کنید تا تأیید کنید با آن مطابقت دارد. تفاوتهای ظریف رنگ که با چشم غیرمسلح نامرئی هستند را شناسایی میکند.
از سایتهای الهامبخشی طراحی بازدید کنید و رنگهایی که توجه شما را جلب میکنند انتخاب کنید. نوار تاریخچه یک پالت از رنگهایی که در طول جلسه انتخاب کردهاید جمعآوری میکند — از آن به عنوان نقطه شروع برای طرح رنگی خودتان استفاده کنید.
رنگها را در نقاط مختلف در امتداد یک گرادیان CSS انتخاب کنید تا رنگ دقیق در هر موقعیت را ببینید. برای تکرار گرادیانها یا درک اینکه چگونه stopهای گرادیان ترکیب میشوند مفید است.
داک شناور DevSuite Pro را باز کرده و روی آیکون انتخابگر رنگ کلیک کنید. مکاننما به یک قطرهچکان با یک دایره پیشنمایش بزرگشده تغییر میکند.
مکاننما را روی صفحه حرکت دهید. پیشنمایش بزرگشده یک نمای زومشده از پیکسلهای اطراف مکاننما را با یک crosshair نشاندهنده پیکسل هدف دقیق نشان میدهد.
هر جایی روی صفحه کلیک کنید تا رنگ آن پیکسل را انتخاب کنید. نمونه رنگ، مقادیر HEX، RGB و HSL همه فوراً بهروزرسانی میشوند.
روی ردیف HEX، RGB یا HSL کلیک کنید تا آن مقدار را در clipboard کپی کنید. یک تأییدیه «Copied!» به طور کوتاه ظاهر میشود.
برای انتخاب رنگهای بیشتر کلیک کنید. هر انتخاب به نوار تاریخچه اضافه میشود. روی هر نمونه تاریخچه کلیک کنید تا آن رنگ را فراخوانی کنید.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
