Цвет с картинки: пипетка и палитра из фото

Нужно узнать, какой цвет у логотипа на скриншоте, у неба на фотографии или у кнопки на чужом сайте? Откройте картинку ниже — наведите на нужное место, и пипетка с увеличительной лупой покажет точный код цвета в HEX, RGB и HSL, а заодно подскажет, как этот цвет называется по-русски.

Сразу после открытия инструмент сам соберёт палитру картинки — от 5 до 10 главных цветов с долями. Её можно скопировать кодами, CSS-переменными или скачать картинкой. Фото не загружается на сервер: всё считается прямо в браузере.

Как пользоваться

1. Откройте картинку. Перетащите файл в поле, нажмите на него для выбора или вставьте скриншот из буфера: Ctrl + V (на Mac — ⌘ + V). Нет картинки под рукой — нажмите «Попробовать на примере».
2. Наведите курсор. Появится круглая лупа: в ней видны отдельные пиксели, а рамка в центре показывает, какой именно цвет будет взят.
3. Щёлкните, чтобы взять цвет. На телефоне коснитесь картинки и ведите пальцем — лупа будет над пальцем, цвет возьмётся, когда вы его отпустите.
4. Скопируйте код. Нажмите на строку HEX, RGB или HSL — код окажется в буфере. Нажатие на большую плашку тоже копирует HEX.
5. Заберите палитру. Внизу выберите, сколько цветов нужно — 5, 6, 8 или 10, — и скопируйте их или скачайте PNG с подписями.

Ещё несколько удобств:

• 💧 Цвет с экрана. В Chrome, Edge и Opera на компьютере появится кнопка «Взять цвет с экрана» — она берёт цвет в любом месте экрана, даже за пределами браузера.
• 🕘 История. Последние 12 взятых цветов сохраняются в браузере — к ним можно вернуться одним нажатием.
• ⌨️ Клавиатура. Перейдите на картинку клавишей Tab, двигайте прицел стрелками (с Shift — по 10 пикселей) и берите цвет клавишей Enter.
• 🔗 Дальше по цепочке. Взятый цвет можно открыть в конвертере цветов — там оттенки и гармонии, — найти его в справочнике названий или сразу проверить контраст с текстом.

Другие способы узнать цвет на экране

Пипетка есть почти везде — иногда она уже встроена в систему.

Онлайн-пипетка удобна, когда цвет нужен с конкретного файла: она читает пиксели самой картинки, а не то, что отрисовал монитор. Поэтому на неё не влияют ночной режим экрана, True Tone и цветовой профиль дисплея.

Как строится палитра картинки

Инструмент уменьшает картинку до 200 пикселей по длинной стороне — для поиска главных цветов этого достаточно, а считается мгновенно. Затем похожие пиксели собираются в группы методом k-средних (k-means):

1. Выбираются стартовые цвета: самый частый и те, что сильнее всего от него отличаются.
2. Каждый пиксель относится к ближайшему стартовому цвету.
3. Центр каждой группы пересчитывается как средний цвет её пикселей — и так по кругу, пока группы не перестанут меняться.

Близость цветов считается в пространстве OKLab, где расстояние соответствует тому, насколько разными цвета кажутся глазу, а не просто разнице чисел RGB. Доля в процентах — это сколько места на картинке примерно занимает каждая группа. Прозрачные пиксели не учитываются.

HEX, RGB и HSL коротко

• HEX — #1D6FA3: три пары шестнадцатеричных цифр (красный, зелёный, синий). Самый частый формат в CSS, Figma и конструкторах сайтов.
• RGB — rgb(29, 111, 163): те же три канала числами от 0 до 255.
• HSL — hsl(203, 70%, 38%): тон на цветовом круге, насыщенность и светлота. Удобен, когда нужно сделать цвет чуть светлее или темнее, не меняя оттенок.

Все три записи описывают один и тот же цвет. Перевести код в CMYK, OKLCH, Android, SwiftUI или Flutter можно в конвертере цветов.

Как подобрать палитру для сайта или презентации

• 🎯 Один главный цвет. Возьмите из палитры самый узнаваемый, а не самый частый цвет: на фото частым почти всегда оказывается фон — небо, стена, асфальт.
• 🌫️ Нейтральные для фона и текста. Тёмный и светлый из палитры — готовая пара «фон + текст». Только проверьте, что они читаются: контраст обычного текста — не меньше 4,5 : 1. Это быстро делается в проверке контраста.
• 🧮 Правило 60-30-10. Примерно 60 % площади — основной нейтральный цвет, 30 % — дополнительный, 10 % — акцент для кнопок и ссылок.
• 🎨 Добавьте оттенки. Для кнопок, наведения и рамок нужны варианты светлее и темнее. Их удобно получить в конвертере цветов — он строит шкалу от 50 до 950.
• 🧩 Проверьте сочетание. Если цвета из фото спорят друг с другом, загляните в подборку сочетаний цветов или соберите плавный переход в генераторе CSS-градиентов.
• 🖼️ Сохраните палитру картинкой. Кнопка «Скачать PNG» сохранит полоски с кодами и названиями — такую картинку удобно вставить в презентацию или отправить дизайнеру.

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

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

Откройте картинку в пипетке выше, наведите курсор на нужное место и щёлкните. Инструмент покажет код в HEX, RGB и HSL и скопирует нужный формат одним нажатием.

Загружается ли моя картинка на сервер?

Нет. Картинка открывается и обрабатывается только в вашем браузере. После загрузки страницы инструмент работает даже без интернета.

Почему цвет с фото отличается от того, что я вижу на экране?

Монитор, ночной режим и цветовой профиль меняют то, как цвет выглядит, но не меняют сам файл. Пипетка берёт значение пикселя из файла. Кроме того, на фото у соседних пикселей разные значения — используйте усреднение 3×3 или 5×5.

Можно ли взять цвет с экрана, а не с картинки?

Да, в Chrome, Edge и Opera на компьютере: кнопка «Взять цвет с экрана» работает в любом месте экрана. В Safari и Firefox такой возможности у сайтов пока нет — сделайте скриншот и вставьте его сочетанием Ctrl + V.

Работает ли пипетка на телефоне?

Да. Коснитесь картинки и ведите пальцем: лупа показывается над пальцем, чтобы его не загораживать. Цвет фиксируется, когда вы отпускаете палец.

Откуда берётся название цвета?

Из нашего справочника названий цветов: инструмент ищет в нём самый близкий по восприятию оттенок. Значок «≈» означает, что цвет похож, но не совпадает точно.

Какие форматы картинок поддерживаются?

JPG, PNG, WebP, GIF, AVIF, BMP и SVG — всё, что умеет открыть браузер. Фото с iPhone в HEIC тоже открываются: для них подгружается отдельный декодер. Если нужно просто перевести такие фото в JPG, есть конвертер HEIC в JPG.

Сколько цветов выбрать для палитры?

Для фирменного стиля или презентации обычно хватает 5–6: пара нейтральных, основной цвет и один-два акцента. 8–10 цветов пригодятся, чтобы подробно разобрать сложную фотографию.