Color Picker — выбор любого цвета с экрана

Что такое Color Picker?

Color Picker — бесплатный браузерный инструмент, который позволяет захватить любой цвет с экрана с помощью EyeDropper API или вручную ввести значения цвета в формате HEX, RGB или HSL для мгновенного просмотра конвертации во все основные цветовые модели. Дизайнеры используют его, когда нужно подобрать цвет со скриншота, сайта или макета без открытия тяжёлого десктопного ПО. В отличие от встроенных палитр операционной системы, этот инструмент мгновенно конвертирует между HEX, RGB, HSL, HSB и CMYK в едином интерфейсе без регистрации, установки и передачи данных за пределы браузера.

Основные возможности

• Захват цвета в любом месте экрана — EyeDropper API активирует системный цветовой семплер в Chrome, Edge и других современных браузерах на Chromium. Кликните любой пиксель, и цвет мгновенно загрузится в инструмент.
• Поддержка EyeDropper API в современных браузерах — Инструмент определяет доступность API в режиме реального времени. В неподдерживаемых браузерах вместо нерабочей кнопки отображается понятное сообщение.
• Конвертация между HEX, RGB, HSL, HSB, CMYK — Панель «All Formats» отображает все представления одновременно. Изменение любого поля ввода обновляет все остальные в реальном времени.
• Копирование значений цвета в буфер обмена — У каждого формата есть отдельная кнопка копирования. На две секунды появляется галочка вместо иконки копирования, подтверждающая успешное копирование.
• История цветов (функция для сторонников) — До 50 недавно использованных цветов хранится в IndexedDB и отображается в виде кликабельных образцов. История сохраняется после перезагрузки страницы. Требуется подписка сторонника Ko-fi.
• Работает офлайн после загрузки — Вся логика конвертации выполняется в JavaScript. После загрузки страницы можно отключиться от интернета, и инструмент продолжит работу.

Как использовать Color Picker

Шаг 1: Открыть инструмент и выбрать метод ввода

Перейдите на Color Picker. Инструмент открывается с цветом по умолчанию #3B82F6 (средний синий). Задать цвет можно тремя способами:

• Нажмите кнопку Pick From Screen (иконка пипетки) для использования EyeDropper API
• Кликните маленький образец цвета в правом верхнем углу панели пикера, чтобы открыть встроенное цветовое колесо браузера
• Введите значения напрямую в поля HEX, R/G/B или H/S/L

Шаг 2: Захват цвета с экрана (метод EyeDropper)

Нажмите Pick From Screen. Пока EyeDropper активен, на кнопке отображается «Picking...». Курсор превращается в лупу с перекрестием. Кликните любой пиксель на экране, включая пиксели за пределами окна браузера на большинстве систем. Инструмент захватывает значение hex, обновляет все поля форматов и показывает уведомление об успехе. Захваченный цвет автоматически добавляется в панель истории.

Шаг 3: Ввод или корректировка значения цвета вручную

Если значение цвета известно, введите его в любое поле. Поле HEX принимает значения с префиксом # или без него. Поля RGB принимают целые числа от 0 до 255. HSL принимает H (0–360), S (0–100) и L (0–100). Изменение любого поля немедленно пересчитывает и обновляет два других формата.

Шаг 4: Просмотр всех конвертаций цветовых форматов

Прокрутите вниз до карточки All Formats под главным пикером. Эта панель отображает полный набор конвертаций: HEX, RGB, HSL, HSB и CMYK. В каждой строке есть кнопка копирования. Кликните иконку копирования рядом с любым форматом, чтобы записать значение в буфер обмена.

Шаг 5: Повторное использование цветов из истории

Ранее выбранные цвета отображаются как цветные образцы в панели Recent Colors. Кликните любой образец, чтобы снова загрузить этот цвет в пикер и поля форматов. Используйте кнопку Clear (иконка корзины), чтобы при необходимости очистить историю.

Практические примеры

Подбор фирменного цвета с сайта

Вы создаёте лендинг и вам нужно воспроизвести точный фиолетовый из логотипа клиента, открытого в вкладке браузера. Нажмите Pick From Screen, наведите курсор на логотип и кликните. Инструмент захватит значение hex, например #6B21A8, и сразу покажет rgb(107, 33, 168) и hsl(276, 61%, 40%). Скопируйте формат, который использует ваш CSS-файл.

Конвертация цвета Figma в CSS

В спецификации дизайна Figma цвет указан как rgb(234, 179, 8). Введите 234 в поле R, 179 в G и 8 в B. Поле HEX обновится до #EAB308, а HSL покажет hsl(45, 93%, 47%). Скопируйте HEX для класса Tailwind bg-[#EAB308] или HSL для CSS-переменной.

Просмотр того, как выглядит hex-код

При code review встречается background: #1E3A5F, и вам хочется его визуализировать. Вставьте значение в поле HEX. Большой образец предварительного просмотра заполнится цветом (тёмный тёмно-синий), а цвет текста метки автоматически переключится между чёрным и белым для читаемости. Вы можете сравнить его с другими цветами, используя образцы из истории.

Советы и рекомендации

Используйте панель истории как временную палитру (функция для сторонников). Инструмент хранит до 50 цветов в IndexedDB для премиум-сторонников. Составляйте небольшую палитру, добавляя цвета один за другим; каждый становится кликабельным образцом, к которому можно вернуться без записи значений.

EyeDropper работает с любым пикселем, включая кадры видео. Поставьте видео на паузу на кадре с нужным цветом и воспользуйтесь Pick From Screen. API забирает значение отрисованного пикселя, а не сжатого источника.

Вводите значения HSL для точной настройки. Если нужен конкретный оттенок при меньшей насыщенности, вводите значения напрямую в поля H и S. HSL удобнее для настроек вида «тот же цвет, на 20% светлее» (увеличить L на 20).

Ссылки для обмена кодируют текущий цвет. Инструмент использует хук состояния для совместного доступа: текущее значение HEX закодировано в URL страницы. Скопируйте URL браузера, чтобы отправить коллеге конкретный цвет.

Очищайте историю перед передачей устройства. Если вы выбираете цвета, связанные с конфиденциальными дизайн-ресурсами, используйте кнопку Clear в панели истории, чтобы удалить их из IndexedDB перед передачей устройства.

Распространённые проблемы и устранение неполадок

Появляется сообщение «EyeDropper не поддерживается». EyeDropper API требует браузера на основе Chromium (Chrome 95+, Edge 95+). Firefox и Safari не поддерживают его в начале 2026 года. На неподдерживаемых браузерах используйте встроенный образец цвета или вводите значение вручную.

Поле HEX не обновляется после ввода. Поле требует корректного hex-кода из 3, 4, 6 или 8 символов с # или без него. Частичные значения, например #3B, принимаются в поле, но конвертация выполняется только после ввода полного корректного кода.

Значения RGB вне допустимого диапазона. Каждое поле R, G, B ограничено значениями 0–255. Значение выше 255 при потере фокуса исправляется до 255. Из-за запасного варианта parseInt нечисловые символы превращаются в 0.

Скопированный формат содержит неверное значение. Каждая кнопка копирует строку своего конкретного формата. Убедитесь, что вы кликаете иконку копирования в строке панели All Formats, соответствующей нужному формату, а не в строке основного поля HEX.

История не сохраняется после перезагрузки. История — это функция только для сторонников, использующая IndexedDB. Если вы не являетесь премиум-сторонником, панель истории не будет записывать записи. Если IndexedDB отключён или недоступен в приватном/инкогнито-режиме, панель истории будет пустой при каждом посещении. Инструмент обрабатывает это без уведомлений.

Конфиденциальность и безопасность

Color Picker обрабатывает всё локально в вашем браузере с помощью JavaScript. Никакие значения цветов, содержимое экрана или данные об использовании не передаются на серверы. EyeDropper API захватывает только один пиксель, на который вы кликнули, — никакого скриншота или записи экрана не происходит. История цветов хранится в IndexedDB вашего браузера, а не во внешней базе данных. После загрузки страницы инструмент полностью работает офлайн и безопасен при работе с конфиденциальными дизайн-ресурсами.

Часто задаваемые вопросы

Color Picker бесплатный?

Да, Color Picker полностью бесплатен без необходимости регистрации. Основные функции — захват через EyeDropper, конвертация в несколько форматов и копирование в буфер обмена — доступны без аккаунта сторонника. Функции для премиум-сторонников, такие как история цветов, пресеты и заметки к инструменту, доступны при подписке сторонника Ko-fi.

Color Picker работает офлайн?

Да. После загрузки страницы Color Picker работает без интернет-соединения. Вся логика конвертации цветов реализована в JavaScript, выполняемом в вашем браузере. EyeDropper API также является встроенной функцией браузера и не требует доступа к сети.

Мои данные в безопасности с Color Picker?

Да. Никакие данные о цветах или содержимое экрана не покидают ваш браузер. EyeDropper API захватывает одно значение пикселя в момент клика — она не делает скриншотов и не записывает экран. История цветов хранится только в IndexedDB вашего браузера. У Glyph Widgets нет серверного доступа к информации о том, какие цвета вы выбираете.

Какие браузеры поддерживают кнопку EyeDropper?

EyeDropper API работает в Chrome 95 и выше, Edge 95 и выше, а также в других браузерах на основе Chromium. Не поддерживается в Firefox или Safari. Инструмент определяет поддержку в режиме реального времени и показывает чёткое сообщение вместо нерабочей кнопки в неподдерживаемых браузерах.

В каких форматах цвета инструмент выдаёт результат?

Инструмент конвертирует и отображает HEX (напр., #3B82F6), RGB (напр., rgb(59, 130, 246)), HSL (напр., hsl(217, 91%, 60%)), HSB (также называемый HSV) и CMYK. Панель All Formats отображает все пять одновременно и предоставляет отдельные кнопки копирования для каждого.

Можно ли ввести значение цвета без пипетки?

Да. Можно вводить значения напрямую в поля HEX, R/G/B или H/S/L. Также можно кликнуть маленький встроенный ввод цвета (цветной квадрат рядом с кнопкой Pick From Screen), чтобы открыть цветовое колесо браузера. Все три метода ввода обновляют одно и то же внутреннее состояние цвета.

Сколько цветов хранит панель истории?

Панель истории хранит до 50 цветов (функция для сторонников). По достижении лимита старейшая запись удаляется. История сохраняется в IndexedDB и сохраняется между сессиями браузера. Для этой функции требуется подписка сторонника Ko-fi.

Можно ли поделиться конкретным цветом с кем-то?

Да. Текущий цвет закодирован в URL страницы как состояние для совместного доступа. Скопируйте URL из адресной строки браузера после выбора цвета. Когда коллега откроет ссылку, инструмент загрузится с предварительно выбранным цветом и покажет уведомление «Loaded from share». Можно также использовать кнопки Share внизу страницы для публикации напрямую в Twitter, LinkedIn или Reddit.

Поддерживает ли инструмент значения альфа-канала/прозрачности?

Текущий инструмент работает преимущественно с полностью непрозрачными цветами. Поле HEX принимает hex-коды из 3, 4, 6 и 8 символов (4- и 8-символьные коды включают альфа-канал), но поля RGB и HSL не предоставляют отдельный слайдер альфа. Если нужны значения RGBA или HSLA, отображаемые значения RGB и HSL можно вручную дополнить желаемым значением альфа.

Что произойдёт, если ввести недопустимый hex-код?

Поле HEX принимает частичные или недопустимые значения при вводе. Конвертация цвета обновляется только при наличии корректного hex-кода (3, 4, 6 или 8 символов, с # или без). Частичные значения не вызывают ошибок — отображение просто сохраняет последний корректный цвет.

Связанные инструменты

• Contrast Checker — Проверьте, соответствуют ли выбранные с помощью Color Picker цвета переднего и заднего плана стандартам доступности WCAG 2.1.
• Color Converter — Конвертируйте между дополнительными цветовыми форматами, не отображаемыми в основном интерфейсе пикера.
• Скоро: Palette Generator — Создайте полную цветовую палитру на основе захваченного hex-значения.
• Скоро: Gradient Generator — Используйте выбранные цвета для создания CSS-градиентов в визуальном редакторе.

Попробуйте Color Picker прямо сейчас: Glyph Widgets Color Picker