Как использовать пипетку для поиска цветов любого пикселя
Быстрый ответ
Чтобы выбрать цвет: откройте Color Picker, загрузите изображение (или используйте screen eyedropper), кликните на пиксель и значения HEX, RGB и HSL появятся. Вся обработка локально.
Введение
Color picker (также eyedropper) позволяет найти точный цвет пикселя. Это необходимо для match брендовых цветов, sample цветов из изображений или построения палитры из фото. Browser-based color picker читает цвета из загруженных изображений через Canvas API, а EyeDropper API может выбирать цвета с любой точки экрана.
Шаг за шагом
-
Откройте инструмент «Палитра цветов».
Перейдите на страницу инструмента «Палитра цветов». Инструмент поддерживает выбор цвета из загруженных изображений, а в поддерживаемых браузерах — из любого места экрана с помощью EyeDropper API.
-
Выберите источник
Чтобы выбрать изображение: загрузите или перетащите изображение. Чтобы выбрать с экрана (только Chrome/Edge): нажмите кнопку «Выбрать с экрана», затем щелкните в любом месте экрана.
-
Нажмите на пиксель, чтобы попробовать
Для выбора изображения наведите курсор на изображение и щелкните пиксель, цвет которого вы хотите. Инструмент считывает цвет пикселя с холста с помощью getImageData(). Лупа может помочь вам выбрать точный пиксель.
-
Прочитайте значения цвета
Инструмент отображает выбранный цвет в форматах HEX, RGB и HSL вместе с образцом. Значения обновляются мгновенно при перемещении курсора.
-
Скопируйте цвет
Нажмите «Копировать» рядом с любым форматом, чтобы скопировать значение цвета в буфер обмена. Используйте его в своем CSS, инструменте проектирования или приложении.
Примеры
Выберите цвет бренда из логотипа
Вход: logo.png, нажмите на пиксель цвета бренда
Выход: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
Образец цвета с фотографии
Вход: photo.jpg, нажмите на пиксель неба
Выход: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
Выбор с экрана (Chrome/Edge)
Вход: Нажмите «Выбрать на экране», затем щелкните любой пиксель на дисплее.
Выход: HEX значение этого пикселя, например #ff5733
Распространенные проблемы
- Сглаживание смешивает цвета по краям — пиксели на границе между двумя цветами представляют собой смесь. Для точности возьмите образец из центра области сплошного цвета.
- EyeDropper API не поддерживается — для выбора экрана требуется Chrome 95+ или Edge 95+. Firefox и Safari его не поддерживают; вместо этого используйте метод загрузки изображения.
- Сжатие JPEG изменяет цвета — Сжатие с потерями JPEG слегка меняет цвета пикселей. Чтобы получить точные фирменные цвета, используйте PNG или исходный векторный источник.
- Различия в цветовых профилях — изображения со встроенными цветовыми профилями (ICC) могут отображаться иначе, чем предполагают их необработанные значения пикселей.
Советы
- Используйте лупу, чтобы выбрать точный пиксель — при большом увеличении вы можете выбрать один точный пиксель, а не плавный край.
- Возьмите несколько пикселей из сплошной области и усредните их, если сжатие привело к появлению шума — это дает более репрезентативный цвет.
- Используйте пипетку API (Chrome/Edge), чтобы выбирать цвета из любого приложения, а не только из изображений в браузере.
- Используйте нашу палитру цветов для мгновенной индивидуальной выборки цветов — ваши изображения никогда не покидают браузер.