Проста піпетка

Безкоштовна піпетка для Chrome

Візьміть колір з будь-якої сторінки. Отримайте #E8553D

Проста піпетка — безкоштовний інструмент для вибору кольору в Chrome. Натисніть кнопку або Alt+P, наведіть лупу на будь-який піксель і клацніть: код HEX, RGB або HSL уже в буфері обміну. 50 останніх кольорів чекають у вікні розширення.

Установити в Chrome — безкоштовно

453 користувачів у Chrome Web Store

Працює також в Edge, Brave, Opera та інших браузерах на Chromium.

Квадратна лупа над постером на сторінці виділяє один піксель із його HEX, RGB та HSL, поруч вікно розширення «Проста піпетка» з кольором #E8553D та історією кольорів

Коротко

Що робить
Піпетка для вибору кольору: наведіть лупу на будь-який піксель на сторінці, клацніть — і його код HEX, RGB або HSL скопійовано.
Кому стане в пригоді
Веброзробникам і дизайнерам, які добирають кольори з живих сайтів, макетів і скриншотів у браузері, та всім, кому потрібен код кольору.
Ціна
Безкоштовно. Без акаунта й платної версії.
Дані
Історія та формат за замовчуванням зберігаються в локальному сховищі розширення на вашому пристрої. Жодної аналітики й мережевих запитів.
Де працює
Chrome та інші браузери на Chromium, що встановлюють розширення з Chrome Web Store, на комп’ютері. Не працює на службових сторінках браузера — новій вкладці, в налаштуваннях, у Chrome Web Store.
Обмеження
Бере колір із видимої частини вкладки — зі знімка, зробленого під час запуску. Немає CMYK, Pantone і перевірки контрасту, не можна взяти колір поза браузером.
Версія
2.7.0, оновлено 23 жовтня 2026 р.

Три кроки, один клік

  1. 1

    Запустіть піпетку

    Натисніть значок на панелі й кнопку «Обрати колір» або натисніть Alt+P на будь-якій сторінці.

  2. 2

    Приціліться лупою

    Квадратна лупа збільшує область навколо курсора й виділяє точний піксель. Під нею одразу видно HEX, RGB та HSL.

  3. 3

    Клацніть і вставте

    Код копіюється у форматі за замовчуванням, коротке повідомлення це підтверджує. Вставляйте в CSS, Figma або повідомлення.

Кому стане в пригоді

CSS

Фронтенд

Беріть точні значення з живого сайту для CSS, SCSS чи конфігу Tailwind, не відкриваючи DevTools.

HEX

Дизайн і бренд

Збирайте палітру з інтерфейсу, макета чи референсу та перевіряйте, що на сторінці правильний фірмовий колір.

HSL

Налаштування кольору

Беріть HSL, щоб вручну підкрутити яскравість і насиченість, або RGB для коду, якому потрібні числа.

Що вміє

  • піксель у рамці

    Лупа збільшує 11 × 11 пікселів навколо курсора, а рамка виділяє той, який ви візьмете. Влучите в рамку завтовшки в піксель чи в один щабель градієнта.

  • формати

    HEX виду #2A6FDB, RGB виду rgb(42, 111, 219), HSL виду hsl(217, 71%, 51%). Формат за замовчуванням обирається один раз у вікні розширення.

  • кольорів в історії

    Кожен новий колір стає на початок сітки з 50 останніх, без повторів. Клацніть зразок, щоб побачити й скопіювати всі три коди.

  • Клавіша Alt+P

    Запускайте піпетку, не відкриваючи вікно розширення. Клавіша у вікні веде до налаштувань гарячих клавіш Chrome, якщо хочете іншу.

  • мережевих запитів

    Усе працює у вашому браузері. Без акаунта, аналітики й телеметрії.

  • Світла й темна тема

    Вікно й лупа слідують темі системи — у нейтральних сірих тонах, що не спотворюють сприйняття кольору.

Як дізнатися код кольору будь-чого на сторінці

Вбудована піпетка Chrome схована в DevTools: відкрийте панель «Стилі», знайдіть властивість із кольором, клацніть її зразок, а потім піпетку. Працює, але далеко, а вибране значення замінює цю властивість у CSS сторінки, а не потрапляє в буфер обміну.

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

Прокрутіть сторінку до потрібного місця заздалегідь: лупа бере колір зі знімка. Службові сторінки браузера — нова вкладка, налаштування, Chrome Web Store — закриті для будь-яких розширень.

Приватність за задумом

  • Жодних мережевих запитів

    Розширення не звертається до серверів. Жодної аналітики й телеметрії.

  • Усе на вашому пристрої

    Історія та формат за замовчуванням лежать у локальному сховищі розширення.

  • Чотири дозволи

    Активна вкладка — лише під час запуску піпетки, щоб зробити знімок; скрипти — щоб показати лупу; сховище — для історії та формату; запис у буфер обміну — щоб скопіювати код.

Піпетка DevTools і Проста піпетка

Піпетка DevTools і Проста піпеткаПіпетка DevToolsПроста піпетка
Як запуститиВідкрити DevTools, знайти колір у «Стилях», клацнути зразок, потім піпеткуКнопка на панелі або Alt+P
Куди потрапляє результатУ відкриту властивість CSS, копіювати потрібно самомуУ буфер обміну, одразу після кліку
Формати кольоруHEX, RGB, HSL та іншіHEX, RGB та HSL
Раніше обрані кольориНе зберігаються50 останніх, можна скопіювати знову
ЦінаВбудована в ChromeБезкоштовно

Запитання

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

Установіть «Проста піпетка», натисніть Alt+P на сторінці, наведіть лупу на колір і клацніть. Код HEX — або RGB чи HSL, якщо зручніше, — скопіюється в буфер обміну.

Як узяти колір із картинки на сторінці?

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

Чи можна копіювати HSL або RGB замість HEX?

Так. Оберіть формат за замовчуванням у вікні розширення: HEX, RGB або HSL. Для будь-якого кольору з історії вікно показує всі три, у кожного своя кнопка копіювання.

Де знайти кольори, які я обирав раніше?

Відкрийте вікно розширення: 50 останніх кольорів лежать там зразками, найновіші першими. Клацніть зразок, щоб побачити й скопіювати його коди, або очистьте історію.

Як змінити клавішу Alt+P?

Клацніть клавішу у вікні розширення. Відкриється сторінка гарячих клавіш Chrome, де можна задати іншу.

Чому на деяких сторінках не працює?

Chrome закриває свої службові сторінки — нову вкладку, налаштування, Chrome Web Store — для всіх розширень. А ще піпетка бачить лише видиму частину вкладки, тож спершу прокрутіть до потрібного кольору.

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

Ні. Піпетка працює лише в поточній вкладці. Вона також не перетворює кольори на CMYK чи Pantone й не перевіряє контраст.

Це безкоштовно? Розширення збирає дані?

Безкоштовно й без мережевих запитів. Історія та формат за замовчуванням залишаються на вашому пристрої.

Інші безкоштовні розширення PYROCTAL

Навели. Клацнули. Вставили.

Установити в Chrome — безкоштовно