pixel → HEX · RGB · HSL
Определение цвета на картинке
Нажмите на пиксель картинки, чтобы узнать его цвет: пиксель #0060fd читается как rgb(0, 96, 253) и hsl(217, 100%, 50%). Добавьте изображение, чтобы определять цвета на своём.
- rgb(0, 96, 253) = #0060fd
- rgb(255, 128, 0) = #ff8000
- #0060fd 75% + #ffffff 25%
Выбирайте щелчком, касанием или клавишами со стрелками. Ваше изображение рисуется только в этой вкладке и никогда не загружается.
Scanned by 
NortonTM Safe Web
Коротко
- Цена
- Без оплаты
- Аккаунт
- Не нужен
- Загрузка
- Нет — изображение рисуется во вкладке вашего браузера, и ничего никуда не отправляется
- Форматы
- PNG, JPEG, WebP, GIF, AVIF, BMP и SVG, насколько их декодирует ваш браузер
- Размер изображения
- Рисуется с длинной стороной до 1600 пикселей; файлы до 200 MB и 120 million пикселей
- Палитра
- Шесть основных цветов методом медианного сечения по выборке примерно из 20,000 пикселей
Определённые цвета и работа палитры
Эти строки получены тем же кодом, что и инструмент. Таблица палитры использует изображение 4 × 4 пикселя с двенадцатью синими и четырьмя белыми пикселями.
| Цвет пикселя | HEX | RGB | HSL |
|---|---|---|---|
| #0060fd | #0060fd | rgb(0, 96, 253) | hsl(217, 100%, 50%) |
| #ff8000 | #ff8000 | rgb(255, 128, 0) | hsl(30, 100%, 50%) |
| #00a86b | #00a86b | rgb(0, 168, 107) | hsl(158, 100%, 33%) |
| #767676 | #767676 | rgb(118, 118, 118) | hsl(0, 0%, 46%) |
| #fdd835 | #fdd835 | rgb(253, 216, 53) | hsl(49, 98%, 60%) |
| Цвет палитры | Доля пикселей |
|---|---|
| #0060fd | 75% |
| #ffffff | 25% |
Как определить цвет на изображении
Добавьте изображение
Перетащите файл PNG, JPEG, WebP, GIF, AVIF, BMP или SVG в поле, выберите его кнопкой «Выбрать» или вставьте изображение из буфера обмена. Пока вы не добавите своё, показан пример изображения.
Щёлкните, коснитесь или используйте стрелки
Щёлкните или коснитесь точки либо проведите по картинке. Когда картинка в фокусе, клавиши со стрелками двигают перекрестие на один пиксель, а Shift со стрелкой — на десять пикселей. Плитки показывают цвет в HEX, RGB и HSL.
Скопируйте цвет или элемент палитры
Нажмите «Копировать» на плитке или нажмите на образец палитры, чтобы скопировать его код HEX. Палитра перечисляет шесть основных цветов всей картинки и долю картинки, которую занимает каждый.
Как считываются цвета
Браузер декодирует ваш файл, а страница рисует его на элементе canvas в этой вкладке. Картинка, у которой длинная сторона больше 1600 пикселей, уменьшается до этого размера, поэтому цвет, считанный с очень большой картинки, берётся из уменьшенной копии, где соседние пиксели усреднены. Затем страница запрашивает у canvas значения красного, зелёного, синего и альфа для единственного пикселя под перекрестием и печатает их в HEX, RGB и HSL. Пиксель с прозрачностью печатается вместе со значением альфа. Canvas хранит цвета, умноженные на альфу, поэтому канал частично прозрачного пикселя может отличаться на единицу: 200 читается как 199 при 50% непрозрачности.
Палитра строится методом медианного сечения. Страница берёт каждый n-й пиксель, не более примерно 20,000, и пропускает пиксели, прозрачные более чем наполовину. Она помещает эти цвета в один ящик и повторно делит ящик с наибольшим разбросом по одному каналу по медиане этого канала, пока не получится шесть ящиков или не останется ящиков с двумя разными цветами. Каждый ящик показан как среднее его пикселей, с долей выбранных пикселей, которую он содержит, от большего к меньшему. Для одной и той же картинки результат каждый раз одинаков. Изображение менее чем с шестью различными цветами даёт более короткую палитру, а анимированные изображения читаются как одна неподвижная картинка.
Вопросы об определении цвета на картинке
Как получить код HEX цвета на изображении?
Добавьте изображение и щёлкните нужное место. Плитка HEX покажет код этого пикселя, например #0060fd, а «Копировать» поместит его в буфер обмена. Чтобы получить основные цвета, не выбирая место, нажмите вместо этого на образец в палитре.
Какие форматы изображений поддерживаются?
PNG, JPEG, WebP, GIF, AVIF, BMP и SVG, если ваш браузер умеет их декодировать. Поддержка AVIF зависит от версии браузера. Другие файлы, например PDF или TIFF, отклоняются с сообщением. Файлы больше 200 MB или больше 120 million пикселей тоже отклоняются.
Как выбираются шесть цветов палитры?
Методом медианного сечения по выборке примерно из 20,000 пикселей: цвета делятся на ящики по медиане самого широкого канала, пока их не станет шесть, и каждый ящик становится средним своих пикселей. Процент под каждым образцом — это доля выбранных пикселей в этом ящике. Пиксели, прозрачные в основном, пропускаются.
Почему два соседних пикселя дают немного разные цвета?
Фотографии и сжатые изображения вроде JPEG немного меняются от пикселя к пикселю, поэтому две одинаково выглядящие точки могут отличаться на несколько единиц в канале. Щёлкните в нескольких точках или используйте палитру, которая усредняет много пикселей, если вам нужен типичный цвет.
Загружается ли моё изображение куда-нибудь?
Нет. Файл декодируется и рисуется вашим браузером в этой вкладке, цвета считываются с этого рисунка, и ничего не отправляется на сервер. При закрытии или перезагрузке страницы изображение удаляется.
Что делает кнопка выбора с экрана?
В браузерах, которые поддерживают EyeDropper, кнопка позволяет щёлкнуть любую точку на экране, в том числе в других окнах, и показывает её цвет. В браузерах без этой возможности кнопки нет; выбор на картинке работает везде.