Піпетка кольору із зображення Точне влучання в піксель — HEX／RGB／HSL в один клік

Що таке піпетка кольору із зображення?

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

🔒 Вся обробка відбувається на 100% локально у вашому браузері. Зображення ніколи не надсилається на сервер, що повністю захищає ваші файли та приватність.

Кому знадобиться цей інструмент?

• Дизайнерам та ілюстраторам: швидко отримати точні кольори бренду з референсу клієнта, брендбуку або скриншота конкурента.
• Маркетологам та авторам презентацій: взяти основний колір із логотипу компанії, щоб слайди точно відповідали бренду.
• Фронтенд-розробникам: отримати HEX-код, потрібний для CSS, прямо зі скриншота макета інтерфейсу, без відкриття дизайнерських програм.
• Фотографам та художникам: проаналізувати розподіл тонів на фото як довідку для кольорокорекції.

Що таке HEX, RGB та HSL?

Це три основні формати представлення кольору: HEX (наприклад, #4E8AB5) — шістнадцятковий код, який найчастіше використовують у веб-дизайні; RGB описує колір через значення червоного, зеленого та синього (0–255); HSL описує тон, насиченість та яскравість, що часто інтуїтивніше. Дізнайтеся більше на Wikipedia: Web colors.

Як користуватися

1. Перетягніть зображення в область завантаження або натисніть Вибрати зображення.
2. Наведіть курсор на будь-яку точку зображення — лупа в реальному часі покаже точний колір під курсором.
3. Клацніть, щоб автоматично скопіювати HEX-код і додати його до палітри нижче; кожен зразок можна скопіювати окремо як HEX, RGB чи HSL, або видалити.

Часті запитання (FAQ)

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

Ні. Цей інструмент зчитує кольори пікселів локально за допомогою вбудованого в браузер Canvas API. Файл зображення ніколи не залишає ваш пристрій, а всі дані автоматично видаляються при оновленні сторінки.

З2: Чому не відображається кнопка Взяти колір з екрана?

Ця функція використовує нативний EyeDropper API браузера, який наразі підтримується лише в браузерах на основі Chromium, як Chrome та Edge (версія 95+). Firefox і Safari ще не підтримують його. Основна функція піпетки кольору працює без обмежень і без цієї кнопки.

З3: Чи впливає стиснення зображення на точність кольору?

Незначно. Формати зі стисненням із втратами, як JPG, можуть трохи змінювати значення пікселів порівняно з оригінальним файлом дизайну. Для максимальної точності використовуйте формат без втрат, наприклад PNG.