Определить цвет на картинке по коду

Загрузите изображение или вставьте скриншот и нажмите на пиксель: вы получите его код HEX, RGB, HSL и CMYK, готовый к копированию. Изображение остаётся на вашем устройстве.

  • Бесплатно
  • HEX, RGB, HSL, CMYK
  • Лупа с точностью до пикселя
  • Палитра из 6 цветов

Перетащите файлы сюда

JPG, PNG, WebP… или вставьте скриншот (Ctrl+V) — изображение остаётся на вашем устройстве

Выбрать
  • HEX#2563EB
  • RGBrgb(37, 99, 235)
  • HSLhsl(221, 83%, 53%)
  • CMYK %84, 58, 0, 8

100 % приватно — Всё обрабатывается прямо в вашем браузере: файлы, голос и изображение никогда не отправляются на серверы Chatzam.

Как узнать код цвета на картинке?

  1. Загрузите изображение

    Перетащите фото, логотип или макет либо сразу вставьте скриншот.

  2. Нажмите на цвет

    Лупа увеличивает область под курсором, чтобы точно попасть в нужный пиксель.

  3. Скопируйте код

    Скопируйте в один клик нужный формат: HEX для веба, RGB, HSL или CMYK.

Все цвета картинки — в виде кодов

Лупа с точностью до пикселя

Даже на мелкой детали, тонкой линии логотипа или рамке вы точно видите пиксель, который берёте.

Основная палитра

6 главных цветов изображения извлекаются автоматически — чтобы взять фирменные цвета логотипа или настроение фотографии.

Пипетка по всему экрану

В Chrome и Edge можно взять цвет в любом месте экрана, даже за пределами страницы, с помощью пипетки браузера.

Палитра и история

Выберите любой цвет вручную, посмотрите его значения в других форматах и найдите уже выбранные цвета в истории, которая хранится в этом браузере.

HEX, RGB, HSL: что означают коды цветов

На экране каждый цвет — это смесь красного, зелёного и синего, каждый от 0 до 255, то есть 256 × 256 × 256 = 16 777 216 возможных цветов. Код RGB записывает их в десятичном виде: rgb(255, 87, 51) — яркий оранжевый. Код HEX записывает те же три значения в шестнадцатеричном виде, по два символа на каждое: #FF5733, потому что FF = 255, 57 = 87 и 33 = 51. HSL описывает тот же цвет иначе: тон на цветовом круге от 0 до 360°, насыщенность и светлота в процентах — здесь hsl(11, 100 %, 60 %). HSL удобен, чтобы получить более светлый или тёмный оттенок, меняя только светлоту.

CMYK для печати

Принтер смешивает не свет, а краски: голубую (Cyan), пурпурную (Magenta), жёлтую (Yellow) и чёрную (Key), в процентах. При математическом пересчёте оранжевый #FF5733 даёт примерно C 0 %, M 66 %, Y 80 %, K 0 %, а чистый красный #FF0000 — C 0 %, M 100 %, Y 100 %, K 0 %. Это теоретический пересчёт: реальный результат зависит от бумаги, принтера и цветового профиля типографии. Некоторые очень яркие на экране цвета, особенно насыщенные синие и зелёные, невозможно воспроизвести красками, и в печати они выходят тусклее. Для важного тиража попросите цветопробу или возьмите эталонные значения CMYK из брендбука.

Почему цвет меняется от пикселя к пикселю

На фотографии область, которая кажется однотонной, на самом деле состоит из немного разных пикселей: свет, тени, шум матрицы. Сжатие JPEG добавляет мелкие отклонения, а края текста и логотипов смешивают цвет с фоном, чтобы сгладить контур. Чтобы получить правильный код, используйте лупу и нажимайте в центр плотно залитой области, подальше от краёв. Чтобы взять цвет логотипа, по возможности используйте PNG, а не JPEG. А чтобы оценить фотографию в целом, палитра из 6 основных цветов часто нагляднее отдельного пикселя.

Частые вопросы

Как узнать код цвета на картинке?

Загрузите изображение или вставьте скриншот и нажмите на нужный цвет. Код появится в форматах HEX, RGB, HSL и CMYK и копируется в один клик.

Как перевести код HEX в RGB?

Разбейте код на три пары и переведите каждую из шестнадцатеричной системы в десятичную. #1E90FF даёт 1E = 30, 90 = 144 и FF = 255, то есть rgb(30, 144, 255). Инструмент показывает пересчёт автоматически, а также в HSL и CMYK.

Чем RGB отличается от CMYK?

RGB описывает цвета экрана, который смешивает красный, зелёный и синий свет. CMYK описывает цвета печати, которые получаются из голубой, пурпурной, жёлтой и чёрной красок: для веба используйте HEX или RGB, для печати — CMYK.

Как взять цвет с сайта или из приложения?

В Chrome или Edge используйте пипетку по всему экрану и нажмите прямо на цвет, даже за пределами страницы. В других браузерах сделайте скриншот и вставьте его в инструмент.

Моё изображение отправляется на сервер?

Нет. Изображение анализируется в вашем браузере и не покидает устройство. История цветов хранится только в этом браузере.

Другие бесплатные инструменты

Все бесплатные инструменты →