Піпетка кольору з фото

Потрібно дізнатися, який колір на логотипі, фото чи скриншоті? Завантажте зображення, наведіть курсор на потрібне місце й клацніть. Код кольору одразу опиниться в буфері обміну у форматі, який ви оберете: HEX, RGB, HSL, HSV або LCH. Нічого встановлювати не потрібно, а зображення не покидає ваш комп’ютер.

Як дізнатися колір із зображення

1. Завантажте зображення. Перетягніть його у вікно або натисніть «Огляд файлів». Піпетка підтримує JPG, PNG, WebP і GIF.
2. Оберіть формат. Над зображенням виберіть запис, у якому копіювати колір. Для вебу зазвичай підходить HEX, а для графічних програм RGB. Обраний варіант інструмент запам’ятає.
3. Наведіть на колір. Біля курсора з’явиться лупа зі збільшеними сусідніми пікселями, а під нею видно код кольору.
4. Клацніть. Код опиниться в буфері обміну, а колір збережеться на вкладці «Вибрані кольори». Просто вставте його там, де потрібно.

Хочете спробувати інше зображення? Перетягніть його прямо на поточне або видаліть іконкою кошика.

Що вміє онлайн піпетка

Лупа, яка показує кожен піксель

Звичайна піпетка показує лише колір під курсором, тож влучити в тонкий край літери стає справжньою лотереєю. Наша лупа збільшує область навколо курсора до 11 × 11 пікселів і обводить рамкою центральний. Ви бачите точно, куди клацнете, ще до кліку.

Масштаб аж до окремого пікселя

Кнопками плюс і мінус або колесом миші з утриманою клавішею Ctrl можна наблизити зображення до 64 разів. З увімкненою сіткою видно межі пікселів, тож на іконках, пікс-арті чи дрібному тексті ви клацнете точно там, де потрібно.

Колір з оригіналу, а не з мініатюри

Багато онлайн-інструментів спершу зменшують зображення й читають колір із прев’ю, де сусідні пікселі зливаються. Наша піпетка працює із зображенням у повній роздільності (до 4096 px на довшій стороні), тож ви отримуєте справжній колір пікселя.

Копіювання одним кліком

Жодного виділення тексту чи переписування цифр. Кожен клік по зображенню копіює код в обраному форматі. Якщо той самий колір потрібен в іншому запису, деталі кольору показують усі п’ять форматів, кожен зі своєю кнопкою копіювання.

Палітра домінантних кольорів

Одразу після завантаження інструмент знаходить до восьми кольорів, які переважають у зображенні, і показує їх на вкладці «Домінантні кольори». Майже однакові відтінки він об’єднує, тож у палітрі не буде п’яти варіантів сірого. Прозорі ділянки PNG пропускаються. Палітра стане основою кольорової схеми для сайту, презентації чи публікацій у соцмережах. Чи тримають кольори достатній контраст без відтінку, швидко перевірите переведенням зображення у сірі відтінки.

Вибрані кольори завжди на видноті

Кожен колір, на який ви клацнете, зберігається на вкладці «Вибрані кольори» (останні 24). Так можна порівняти кілька місць на зображенні й будь-коли до них повернутися. На великому екрані панель кольорів розташована прямо біля зображення.

Для чого потрібно дізнатися код кольору із зображення

• Сайти й застосунки: клієнт надіслав логотип лише як JPG, а вам потрібен точний фірмовий колір для CSS. Якщо ще й потрібна версія з прозорим фоном, скористайтеся видаленням фону із зображення.
• Графіка й соцмережі: хочете, щоб текст на публікації пасував до фото. Візьміть колір прямо з нього.
• Презентації та документи: кольори фірмового логотипу налаштовуєте в PowerPoint, Google Slides чи Canva через HEX або RGB.
• Перевірка макета: на скриншоті перевірите, чи справді кнопка в застосунку має той колір, що передбачає дизайн. Розмір експортованих зображень заодно перевірите в аналізаторі розмірів зображень.
• Інтер’єр і мода: маєте фото тканини чи стіни й шукаєте схожий відтінок. Код стане відправною точкою під час вибору у каталозі кольорів.

Формати кольору, які повертає піпетка

• HEX (#1373b6): запис для HTML, CSS і більшості графічних інструментів.
• RGB (rgb(19, 115, 182)): частка червоного, зеленого й синього, кожна від 0 до 255. Як працює адитивне змішування кольорів, описує Вікіпедія.
• HSL (hsl(205, 81%, 39%)): відтінок, насиченість і світлість. З нього легко зробити світліший чи темніший варіант.
• HSV: відтінок, насиченість і яскравість, як ви їх знаєте з вибору кольору в Photoshop чи GIMP. Різницю між HSL і HSV детально пояснює Вікіпедія.
• LCH: модель, що відповідає тому, як колір сприймає людське око. Копіюється в запису, який розуміє сучасний CSS (див. документацію MDN, англійською).

Піпетка визначає колір із зображення. Якщо хочете доопрацювати його, перевести в інші формати чи підібрати до нього суміжні відтінки, перейдіть до колірного кола.

Часті запитання

Чи завантажується моє зображення на сервер?

Ні. Зображення завантажується й обробляється прямо у вашому браузері, нікуди не надсилається, і після закриття сторінки від нього нічого не залишається. Тож піпетку спокійно можна використовувати і для внутрішніх матеріалів чи неопублікованих макетів.

Як дізнатися HEX-код кольору з фото?

Завантажте фото, залиште над зображенням обраний формат HEX і клацніть на місці з потрібним кольором. Код, наприклад #75dab2, одразу опиниться в буфері обміну.

Чому колір із фото відрізняється від реального?

Фотоапарат впливає на кольори через освітлення, баланс білого й стиснення. Піпетка повертає точно той колір, що збережений у файлі. Для фото клацніть на кількох місцях і порівняйте їх на вкладці «Вибрані кольори». Якщо за кодом змішуєте фарбу для стіни, сприймайте його як орієнтир.

Чи працює піпетка на мобільному?

Так. На сенсорному екрані торкніться місця на зображенні, і код скопіюється так само, як на комп'ютері. Лупа біля курсора на мобільному не показується, тож для дрібних деталей спершу наблизьте зображення.

Яка різниця між HEX і RGB?

Обидва записи описують той самий колір. RGB виражає його трьома числами від 0 до 255, HEX записує ті самі числа в шістнадцятковій системі за знаком #. Наприклад, rgb(255, 87, 51) це те саме, що й #ff5733.

Як отримати з зображення цілу кольорову палітру?

Відкрийте вкладку «Домінантні кольори». Там знайдете до восьми головних кольорів зображення, і клацання на будь-якому з них скопіює його код.