Color Picker предоставя прецизен инструмент с пипета (eyedropper) за избиране на цветове от всеки елемент на уебстраница — текст, фонове, изображения, градиенти или всеки видим пиксел. Получете точната стойност на цвета едновременно в HEX, RGB и HSL формати, с увеличително стъкло за прецизно насочване. Предишно избраните цветове се записват в лента с хронология за бърз повторен достъп.
Извличането на точни стойности за цветовете от уебстраница е честа задача — съчетаване на цвят на марка, рефериране на дизайн или проверка на нюанс, използван в сайт на конкурент. Браузърните DevTools показват цветовете в панела Styles, но само за елементи with explicit CSS properties for color — not for images, gradients, or inherited colors. Пипетата на Color Picker работи на ниво пиксел — тя чете действително рендирания цвят на който и да е пиксел под вашия курсор, независимо как е получен този цвят. Кликнете върху синьо небе в заглавно изображение (hero image), средна точка на градиент или полупрозрачен слой и получете точната композитна стойност на цвета. Кръгът за предварителен преглед с увеличение показва изглед на околните пиксели, за да можете да насочите точно пиксела, който искате. И трите изходни формата (HEX, RGB, HSL) се показват едновременно — кликнете върху който и да е формат, за да го копирате. Последните ви няколко избора се записват в лента с хронология на цветовете отдолу, така че можете лесно да се върнете към предишно избран цвят.
Увеличителен кръгъл предварителен преглед показва пикселите около курсора ви с мерник за точен избор на пиксел. Избирайте цветове от текст, фонове, изображения, градиенти, SVG или всеки видим пиксел на страницата.
Всеки избран цвят се показва в трите формата едновременно: HEX (#7c3aed), RGB (rgb(124, 58, 237)) и HSL (hsl(262, 83%, 58%)). Без превключване или конвертиране — всички формати са незабавно налични.
Кликнете върху който и да е ред за формат (HEX, RGB или HSL), за да копирате тази специфична стойност в клипборда си незабавно. Кратка анимация „Copied!“ (Копирано!) потвърждава действието. Поставете директно във вашия CSS, инструмент за дизайн или спецификация на цветовете.
Наскоро избраните от вас цветове се записват във визуална лента с хронология, показваща мостри от цветове. Кликнете върху която и да е мостра, за да изберете отново този цвят и да видите стойностите му. Хронологията се запазва по време на сесията ви — избирайте цветове от множество страници.
Избраният цвят се показва като голяма мостра над стойностите на формата, което улеснява проверката му. Мострата е достатъчно голяма, за да покаже фини нюанси, които може да изглеждат идентични при по-малки размери.
Избира цветове от всеки видим пиксел: CSS цветове, CSS градиенти, изображения (PNG, JPG, SVG), елементи canvas, кадри от видео, полупрозрачни слоеве (избирайки композитния цвят) и дори ифреймове (iframes). Ако можете да го видите, можете да го изберете.
Изберете точния цвят на марка от уебсайт на компания, за да сте сигурни, че вашият дизайн или съдържание използва правилния нюанс. Вземете точната HEX стойност, вместо да гадаете на око или да търсите в указанията за марката.
Избирайте цветове директно от заглавни изображения, снимки на продукти или илюстрации. Извлечете доминиращ цвят от снимка, за да го използвате като допълващ фон във вашия дизайн.
Спецификацията на дизайна казва, че бутонът трябва да бъде #7c3aed. Изберете цвета от внедрения бутон, за да проверите дали съвпада. Улавя фини разлики в цветовете, които са невидими за невъоръжено око.
Разглеждайте сайтове за вдъхновение в дизайна и избирайте цветове, които привличат вниманието ви. Лентата с хронология изгражда палитра от цветове, които сте избрали по време на сесията — използвайте я като отправна точка за вашата собствена цветова схема.
Избирайте цветове в различни точки на CSS градиент, за да видите точния цвят на всяка позиция. Полезно за репликиране на градиенти или за разбиране на това как се смесват крайните точки на градиента.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Color Picker. Курсорът се променя на пипета с кръг за предварителен преглед с увеличение.
Движете курсора си по страницата. Увеличителният предварителен преглед показва изглед на пикселите около курсора ви с мерник, указващ точния целеви пиксел.
Кликнете навсякъде по страницата, за да изберете цвета на съответния пиксел. Мострата на цвета, HEX, RGB и HSL стойностите се актуализират мигновено.
Кликнете върху реда HEX, RGB или HSL, за да копирате тази стойност в клипборда си. Появява се кратко потвърждение „Copied!“.
Продължете да кликвате, за да избирате още цветове. Всеки избор се добавя към лентата с хронология. Кликнете върху всяка мостра в хронологията, за да извикате съответния цвят.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
