Color Picker предоставляет пиксельно-точный инструмент eyedropper для выбора цветов с любого элемента на веб-странице — текста, фонов, изображений, градиентов или любого видимого пикселя. Получите точное значение цвета одновременно в форматах HEX, RGB и HSL с увеличенным предпросмотром пикселей для точного прицеливания. Ранее выбранные цвета сохраняются в строке истории для быстрого повторного доступа.
Извлечение точных значений цвета с веб-страницы — распространённая задача: подобрать фирменный цвет, сверить дизайн или проверить оттенок, использованный на сайте конкурента. DevTools браузера показывают цвета в панели стилей, но только для элементов с явно заданными CSS-свойствами цвета — не для изображений, градиентов или унаследованных цветов. Инструмент eyedropper в Color Picker работает на уровне пикселей — он считывает фактический отрисованный цвет того пикселя, на который указывает курсор, независимо от того, как этот цвет был задан. Нажмите на голубое небо в изображении-баннере, среднюю точку градиента или полупрозрачный оверлей — и получите точное составное значение цвета. Увеличенный предпросмотр в виде круга отображает приближённый вид окружающих пикселей, чтобы вы могли выбрать нужный пиксель с точностью. Все три формата вывода (HEX, RGB, HSL) отображаются одновременно — нажмите на любой формат, чтобы скопировать. Несколько последних выбранных цветов сохраняются в строке истории в нижней части панели, чтобы можно было легко вернуться к ранее выбранному цвету.
Увеличенный круглый предпросмотр отображает приближённые пиксели вокруг курсора с прицелом-перекрестием для точного выбора пикселя. Выбирайте цвета из текста, фонов, изображений, градиентов, SVG или любого видимого пикселя на странице.
Каждый выбранный цвет отображается сразу в трёх форматах: HEX (#7c3aed), RGB (rgb(124, 58, 237)) и HSL (hsl(262, 83%, 58%)). Никакого переключения или конвертирования — все форматы доступны немедленно.
Нажмите на любую строку формата (HEX, RGB или HSL), чтобы мгновенно скопировать это значение в буфер обмена. Краткая анимация «Скопировано!» подтверждает действие. Вставляйте прямо в CSS, инструмент дизайна или техническое задание.
Недавно выбранные цвета сохраняются в визуальной строке истории с цветовыми образцами. Нажмите на любой образец, чтобы повторно выбрать этот цвет и снова увидеть его значения. История сохраняется в течение сессии — выбирайте цвета с нескольких страниц.
Выбранный цвет отображается в виде крупного образца над значениями форматов, что позволяет легко увидеть и проверить цвет. Образец достаточно большой, чтобы различать тонкие оттенки, которые могут выглядеть одинаково при меньших размерах.
Выбирает цвета с любого видимого пикселя: CSS-цвета, CSS-градиенты, изображения (PNG, JPG, SVG), элементы canvas, кадры видео, полупрозрачные оверлеи (с выбором составного цвета) и даже iframe. Если вы это видите — вы можете это выбрать.
Выберите точный фирменный цвет с сайта компании, чтобы ваш дизайн или контент использовал правильный оттенок. Получите точное значение HEX вместо того, чтобы угадывать на глаз или искать в руководстве по бренду.
Выбирайте цвета прямо из изображений-баннеров, фотографий товаров или иллюстраций. Извлеките доминирующий цвет из фотографии, чтобы использовать его как дополнительный фон в своём дизайне.
Спецификация дизайна говорит, что кнопка должна быть #7c3aed. Выберите цвет с реализованной кнопки, чтобы убедиться, что он совпадает. Улавливает тонкие различия цветов, которые невидимы невооружённым глазом.
Просматривайте сайты с дизайнерским вдохновением и выбирайте понравившиеся цвета. Строка истории накапливает палитру из выбранных в ходе сессии цветов — используйте её как отправную точку для собственной цветовой схемы.
Выбирайте цвета в разных точках CSS-градиента, чтобы увидеть точный цвет в каждой позиции. Полезно для воспроизведения градиентов или понимания того, как смешиваются точки остановки градиента.
Откройте плавающую панель DevSuite Pro и нажмите на иконку Color Picker. Курсор изменится на eyedropper с увеличенным кругом предпросмотра.
Перемещайте курсор по странице. Увеличенный предпросмотр показывает приближённые пиксели вокруг курсора с перекрестием, указывающим на точный целевой пиксель.
Нажмите в любом месте страницы, чтобы выбрать цвет на этом пикселе. Образец цвета, а также значения HEX, RGB и HSL обновляются мгновенно.
Нажмите на строку HEX, RGB или HSL, чтобы скопировать это значение в буфер обмена. На короткое время появится подтверждение «Скопировано!».
Продолжайте нажимать для выбора новых цветов. Каждый выбор добавляется в строку истории. Нажмите на любой образец в истории, чтобы вернуться к этому цвету.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
