В каких форматах я получаю цвет?

И HEX (например, #3ba55d), и значения RGB для каждого пикселя, по которому вы кликаете, — готовые для вставки в CSS или редактор дизайна.

Можно ли выбрать несколько цветов?

Да — каждый цвет, по которому вы кликаете, сохраняется как образец, так что можно собрать небольшую палитру из изображения.

Моё изображение загружается?

Нет — пипетка считывает пиксели с canvas в вашем браузере; изображение никогда не покидает устройство.

Пипетка цвета с изображения

Кликните в любом месте изображения, чтобы получить его цвет в HEX и RGB. Работает в браузере.

Загрузка инструмента…

Как взять цвет с изображения

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

Приватно по умолчанию

Изображение читается на canvas в вашем браузере — оно никогда не покидает устройство.

Как узнать цвет на картинке: HEX, RGB и HSL

Как работает пипетка

Загрузите фото, скриншот или логотип и кликните в любом месте. Инструмент считывает именно этот пиксель и показывает цвет в HEX (например, #1e88e5) и RGB (rgb(30, 136, 229)). Кнопка Копировать кладёт HEX-код в буфер обмена. Сразу после загрузки берётся центральный пиксель, чтобы значение было видно без лишних кликов.

Каждый выбранный цвет попадает в ряд недавних образцов (до восьми) — можно взять несколько точек: кнопку, фон, заголовок — и сравнить перед выбором. Изображение читается на canvas в вашем браузере и никуда не загружается.

HEX, RGB и HSL простыми словами

Все три записи описывают один и тот же цвет на экране, просто по-разному.

HEX — #RRGGBB, три пары шестнадцатеричных цифр для красного, зелёного и синего, от 00 до ff. Именно его ждут CSS, Figma, Canva, темы WordPress и большинство полей «фирменный цвет».
RGB — те же три канала десятичными числами от 0 до 255. #1e88e5 и rgb(30, 136, 229) — одно и то же. Удобно в коде, в Office и в программах с ползунками.
HSL — тон (0–360° по цветовому кругу), насыщенность и светлота в процентах. Пипетка HSL не выводит, но любой графический редактор и CSS переводят HEX мгновенно. HSL пригодится, когда нужен более светлый или тёмный вариант найденного цвета: тон оставляете, меняете только светлоту.

Цвет со скриншота

Чтобы повторить цвет из приложения, сайта или кадра видео, сделайте скриншот (Windows: Win + Shift + S; Mac: Cmd + Shift + 4; телефон: питание + громкость вниз, на iPhone — боковая кнопка + громкость вверх) и перетащите его сюда.

Советы для точного результата:

Кликайте по однотонным участкам. Цельтесь в середину кнопки, а не в край: края сглажены с фоном (антиалиасинг) и дают промежуточный оттенок.
На фото есть шум. Соседние пиксели фотографии немного различаются; возьмите несколько точек и выберите самую характерную.
Скриншот может исказить цвет. Ночной режим, Night Shift, HDR или калиброванный дисплей подкрашивают снимок. Отключите их, если важен точный фирменный цвет.
Пережатые JPG «плывут». JPG, сохранённый много раз, покрыт пятнами у краёв. Если есть исходный PNG или SVG логотипа — берите его.
Прозрачные области настоящего цвета не имеют; клик по ним даёт чёрный (#000000). Кликайте по видимой части логотипа.

Проверьте контраст до того, как использовать цвет

Красивый цвет может оказаться нечитаемым для текста. Рекомендации по доступности (WCAG) требуют контраста не ниже 4,5:1 между обычным текстом и фоном и 3:1 для крупного текста и иконок. Светло-серый на белом и средне-синий на тёмно-синем часто не проходят.

Определив цвета текста и фона, вставьте оба HEX в любой онлайн-проверщик контраста. Если отношение низкое, затемните текст или осветлите фон — изменение светлоты в HSL позволяет исправить это, не уходя от фирменного цвета.

Где это пригодится

Узнать фирменный цвет по логотипу, присланному картинкой.
Повторить цвет кнопки или фона сайта в своём макете.
Собрать палитру по фотографии для презентации, постов или мудборда для ремонта.
Подобрать фон для иконки Apple touch в генераторе фавиконок.

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

В каких форматах я получаю цвет?: И HEX (например, #3ba55d), и значения RGB для каждого пикселя, по которому вы кликаете, — готовые для вставки в CSS или редактор дизайна.
Можно ли выбрать несколько цветов?: Да — каждый цвет, по которому вы кликаете, сохраняется как образец, так что можно собрать небольшую палитру из изображения.
Моё изображение загружается?: Нет — пипетка считывает пиксели с canvas в вашем браузере; изображение никогда не покидает устройство.