CodeKitHubЩо це за інструмент?
Піпетка кольору перетворює візуальний вибір — цей відтінок синього, той самий піксель на логотипі — на числові коди, зрозумілі програмам. Один і той самий колір має кілька еквівалентних записів: HEX (#3b82f6) домінує в CSS і при передачі дизайну, RGB (59, 130, 246) відповідає тому, як екрани й код представляють колір, а HSL (217°, 91%, 60%) описує відтінок, насиченість і світлість у спосіб, зрозумілий людині.
Друга половина інструменту — це піпетка для зображень. Завантажте скріншот, логотип чи фото й клацніть у будь-якій точці, щоб зчитати колір під курсором — стандартний спосіб відповісти на питання «який саме це колір?». Якщо браузер підтримує EyeDropper API, використовується вбудована лупа для збільшення; в інших браузерах інструмент зчитує значення пікселя з копії зображення на canvas. У обох випадках обробка виконується локально: зображення ніколи не завантажується на сервер.
Навіщо його використовувати?
- Три формати одразу: кожен обраний колір показується як HEX, RGB і HSL одночасно, кожен із власною кнопкою копіювання в один клік — без окремого кроку конвертації.
- Вибір із зображення: завантажте будь-яку картинку й клацніть, щоб зчитати точний колір пікселя — ідеально для отримання фірмових кольорів із логотипу чи порівняння з кольором на скріншоті.
- Використовує вбудовану піпетку браузера зі збільшувальним склом, де це доступно, і переходить на точне зчитування пікселя через canvas в усіх інших випадках.
- Живий зразок кольору показує поточний колір з першого погляду, тож можна перевірити вибір перед копіюванням.
- Безкоштовно, миттєво й повністю локально: кольори обчислюються, а зображення зчитуються у вашому браузері — нічого не завантажується на сервер, не зберігається й не логується.
Як користуватися
- Оберіть колір у полі кольору або вставте/відредагуйте значення напряму.
- Щоб зчитати колір із зображення, завантажте картинку й клацніть у точці, колір якої вам потрібен.
- Перегляньте значення HEX, RGB і HSL, показані разом із живим зразком кольору.
- Натисніть кнопку копіювання біля потрібного формату — HEX для CSS, RGB чи HSL для коду.
Приклад
Введення
Клацання на синій ділянці завантаженого логотипуРезультат
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Усі три рядки описують один і той самий колір. Використовуйте HEX у таблицях стилів і дизайн-інструментах, RGB там, де код очікує значення каналів, а HSL — коли потрібно отримати світліші чи темніші варіанти, змінюючи лише останнє число.
Який формат кольору для якого завдання
Сучасний CSS приймає всі три записи скрізь, де дозволений колір, тож вибір залежить від робочого процесу, а не від сумісності. Команди зазвичай стандартизують HEX у дизайн-токенах, а потім використовують HSL для дослідження варіацій — змінюють світлість на 10–15 пунктів, щоб отримати придатний стан наведення без зміни відтінку.
| Формат | Приклад | Найкраще підходить для |
|---|---|---|
| HEX | #3b82f6 | CSS, дизайн-інструменти, обмін кольорами в чаті та специфікаціях |
| RGB | rgb(59, 130, 246) | Код, що працює з каналами, малювання на canvas, прозорість через rgba() |
| HSL | hsl(217, 91%, 60%) | Створення світліших/темніших/наведених варіантів, побудова палітр |
Від обраного кольору до готового CSS
Вибір кольору зазвичай є першим кроком у завданні зі стилізації. Якщо вам потрібен той самий колір в інших записах — CMYK для друку чи значення OKLCH для CSS з широкою колірною гамою — Конвертер кольорів продовжує там, де закінчує ця піпетка.
Обраний колір часто одразу застосовується у візуальному ефекті: Генератор тіней приймає значення HEX для реалістичних тіней, а заокруглені картки, побудовані за допомогою Генератора радіуса заокруглення, довершують вигляд.
→ Конвертер кольорів · Генератор box-shadow · Генератор border-radius
Часті запитання
У чому різниця між HEX, RGB і HSL?
Це три записи однієї й тієї самої колірної моделі. HEX упаковує канали червоного, зеленого й синього в шість шістнадцяткових цифр (#3b82f6) і є найпоширенішою формою в CSS і дизайн-інструментах. RGB перелічує ті самі три канали як десяткові числа від 0 до 255. HSL переописує колір через відтінок (0–360°), насиченість і світлість — набагато інтуїтивніше, коли потрібен «той самий колір, лише світліший». Конвертація між ними ніколи не змінює сам колір.
Як працює вибір кольору із зображення?
Завантажене зображення малюється на невидимому canvas у вашому браузері. Коли ви клацаєте, інструмент зчитує значення червоного, зеленого й синього каналів пікселя в цій точній позиції та конвертує їх у HEX, RGB і HSL. У браузерах, що підтримують EyeDropper API (Chrome і Edge на десктопі), замість цього відкривається вбудована лупа для збільшення, тож можна обирати з точністю до пікселя будь-де на екрані.
Чи завантажується моє зображення кудись?
Ні. Зображення відкривається безпосередньо вашим браузером і зчитується локально з canvas; жоден файл і жодні дані про колір ніколи не передаються й не зберігаються. Ви можете завантажити сторінку, вийти в офлайн, і піпетка кольору та піпетка для зображень продовжать працювати — це робить інструмент безпечним для ще не опублікованих дизайнів і внутрішніх скріншотів.
Чому обраний колір не точно збігається з тим, що я бачу на екрані?
Дві поширені причини. Згладжування: пікселі на межах тексту й фігур змішуються з фоном, тож клацання на піксель поруч дає проміжний колір — краще брати зразок із суцільної середини ділянки. Керування кольором: файли JPG/PNG із незвичайними колірними профілями можуть відображатися трохи по-різному на різних екранах; інструмент повідомляє значення пікселя так, як воно збережене у файлі, — саме це значення потрібне для дизайнерської роботи.
Який формат копіювати для CSS?
HEX — найбезпечніший варіант за замовчуванням: його приймають усі браузери й інструменти. Використовуйте HSL, коли плануєте створювати варіанти для наведення курсору чи темної теми, оскільки зміна лише компонента світлості зберігає відтінок і насиченість незмінними. RGB здебільшого корисний, коли код формує кольори з числових каналів або при додаванні прозорості, де rgba(59, 130, 246, 0.5) читається чіткіше, ніж восьмизначний HEX.