Loading…

О сервисе Онлайн пипетка и конвертер цветов

Загрузите изображение, вставьте цвет или используйте колесо для точного выбора цветов. Инструмент выполняет глубокий анализ на стороне клиента: нормализует HEX, вычисляет RGB/HSL/HSV/CMYK, конвертирует в XYZ/LAB/LCH, рассчитывает яркость и контрастность WCAG, а также генерирует гармоничные палитры. Затем вы можете скопировать любой формат как готовый токен для CSS или использовать гармонии для построения целостной системы дизайна.

Возможности этого инструмента для работы с цветами

  • Выбирайте цвета из изображений* или начинайте с точного цветового круга или ввода HEX/RGB
  • Расширенные преобразования: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
  • Встроенная проверка контрастности WCAG относительно #000000 и #FFFFFF с использованием относительной яркости
  • Предложения веб-безопасных и сокращённых HEX-значений, где применимо
  • Цветовые гармонии: дополнительная, триадная, тетрадная, аналогичная, монохромная (вычисляются через поворот оттенка)
  • Предпросмотр яркости и воспринимаемой светлоты для предвосхищения проблем с контрастом
  • Приблизительное сопоставление с цветами Pantone на основе ближайшего расстояния RGB (с кэшированным набором данных)
  • Анализ выполняется на стороне клиента; минимальные данные используются только при включении опционального поиска Pantone

🔧 Как использовать пипетку for color-picker

1

1. Выберите или подберите базовый цвет

Вставьте HEX-значение, введите RGB/HSL или используйте пипетку, чтобы выбрать цвет из изображения или круга. Инструмент нормализует его до безопасного HEX-значения внутри системы.

2

2. Точная настройка оттенка и светлоты

Настройте оттенок, насыщенность и светлоту, пока образец не будет выглядеть правильно. Большой предпросмотр показывает цвет на светлых и тёмных поверхностях для контекста.

3

3. Прочитайте и скопируйте нужные форматы

Скопируйте HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB и LCH одним кликом. Используйте их для CSS-переменных, дизайн-токенов или заметок по передаче.

4

4. Проверьте контрастность WCAG

Посмотрите коэффициенты контрастности относительно #000000 и #FFFFFF на основе яркости sRGB. Используйте результаты, чтобы быстро решить, подходит ли цвет для основного текста, крупных заголовков или элементов интерфейса.

5

5. Создавайте гармонии и стройте палитру

Исследуйте дополнительные, триадные, тетрадные, аналогичные и монохромные цвета, сгенерированные через поворот оттенка. Добавляйте избранные в палитру/историю и экспортируйте их как токены.

Технические детали

Обработка и нормализация ввода

Инструмент принимает шестнадцатеричные коды цветов и преобразует их в нормализованный 6-значный HEX как внутреннюю ссылку.

АспектПоведениеПримечания
Нормализация HEX3-значный и 6-значный HEX, необязательный ведущий #Короткий HEX (например, #0f8) расширяется до #00ff88; не-шестнадцатеричные символы удаляются.
Поддержка HEX8RGBA через #RRGGBBAAАльфа-канал преобразуется в 0–255 и добавляется как 4-й байт.
Предложение для веб-безопасностиПривязка к ближайшему шагу 51 на каналЗначения округляются до ближайшего кратного 51 (0, 51, 102, 153, 204, 255).
Предложение сокращённого HEXТолько при возможности сжатияПоказывается, когда каждая пара HEX-цифр повторяется (например, #112233 → #123).

Цветовые пространства и преобразования

Все вычисления основаны на sRGB с эталонным белым D65.

ПространствоВычислениеИспользование
RGBИз нормализованного HEX (0–255 на канал)Базовое представление для преобразований.
HSL / HSVСтандартные цилиндрические преобразования из sRGBИспользуется для интуитивного редактирования и расчётов гармонии.
CMYKАппроксимация, независимая от устройстваВычисляется как 1−max(R,G,B) с компонентами 0–100%; не привязано к ICC-профилям.
XYZЛинеаризованный sRGB → XYZ с использованием матрицы D65Промежуточное пространство для LAB/LCH и углублённого анализа.
LABCIE L*a*b* из XYZПерцептивно более однородное метрическое пространство.
LCHCIE L*C*h° из LABПолезно для корректировок оттенка/насыщенности/яркости и перцептивного дизайна палитр.

Яркость и контраст WCAG

Контраст вычисляется по стандартной формуле относительной яркости WCAG.

АспектДеталиПримечания
Относительная яркостьВычисляется из линеаризованного sRGB (компонент Y)Используются коэффициенты 0.2126R + 0.7152G + 0.0722B.
Коэффициент контрастности(L1 + 0.05) / (L2 + 0.05)Инструмент показывает контраст относительно #000000 и #FFFFFF.
Пороги WCAGAA/AAA для обычного и крупного текстаТипичные пороги: 4.5:1 (AA обычный), 3:1 (AA крупный), 7:1 (AAA обычный), 4.5:1 (AAA крупный).

Гармонии и производные цвета

Гармонии генерируются как простые повороты оттенка в HSL с сохранением насыщенности и светлоты.

ГармонияПравилоПример
Комплементарная+180° оттенкаПротивоположная точка на цветовом круге.
Триадная±120° оттенкаТри равномерно распределенных цвета.
Тетрадная+90°, +180°, +270° оттенкаЧетыре цвета, образующие прямоугольник на круге.
Аналоговая−30° / +30° оттенкаСоседние цвета вокруг основного.
МонохромнаяОсветление/затемнение по LБолее светлые и темные версии одного оттенка.

Сопоставление с Pantone (приблизительное)

При доступности набора данных Pantone инструмент вычисляет ближайшее соответствие в пространстве RGB.

АспектПоведениеПримечания
Загрузка набора данныхКэширование + асинхронная загрузка через getPantoneColors / getPantoneColorsCachedИнтерфейс может показать соответствие мгновенно при теплом кэше или после короткой асинхронной загрузки.
Метрика соответствияКвадратичное евклидово расстояние в RGB (0–255)Быстрое, простое приближение; не является перцепционной метрикой ΔE*.
ВыводID и название в стиле PantoneОтображается только для справки; не является официальным соответствием Pantone.

Производительность и конфиденциальность

Преобразования, яркость, контраст и гармонии вычисляются полностью на стороне клиента. Поиск Pantone может обращаться к локальному или удаленному набору данных в зависимости от конфигурации, но исходные цвета остаются простыми HEX-строками, если вы явно не делитесь или не экспортируете их.

Популярные варианты использования

UI/UX и Front-End

  • Создавайте доступные пары переднего плана/фона для кнопок, ссылок и текста.
  • Экспортируйте CSS-переменные и дизайн-токены непосредственно из выбранных цветов.
  • Проверяйте контраст для светлых/темных режимов перед внедрением переключателя тем.
/* CSS-токены цветов */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

Брендинг и визуальная идентичность

  • Создайте палитру основных/второстепенных/акцентных цветов из одного главного цвета.
  • Исследуйте дополнительные или триадные варианты для логотипа или продуктовой линейки.
  • Получите приблизительные названия в стиле Pantone перед подготовкой руководства по бренду.

Визуализация данных и дашборды

  • Определяйте цвета серий, которые остаются различимыми как на светлом, так и на темном фоне.
  • Используйте LAB/LCH для создания палитр с контролируемыми перцепционными шагами.
  • Быстро проверяйте, соответствуют ли цвета диаграмм ожиданиям контраста в легенде и метках.

❓ Frequently Asked Questions

В чем разница между HEX, RGB, HSL и HSV?

HEX — это просто компактный способ записи значений RGB в шестнадцатеричной системе. RGB описывает компоненты красного/зеленого/синего в sRGB. HSL и HSV — более интуитивные цилиндрические модели: H — оттенок на цветовом круге, S — насыщенность, а L/V управляет яркостью или светлотой.

Почему значения CMYK выглядят приблизительными?

Реальный вывод CMYK зависит от профилей принтера, чернил, бумаги и калибровки. Этот инструмент показывает независимое от устройства приближение, полезное для ранних дизайнерских решений, но окончательную печатную работу следует проверять с ICC-профилями вашего поставщика печати.

Для чего полезны LAB и LCH?

LAB и LCH более перцепционно равномерны, чем сырой RGB. Равные числовые шаги в L или C обычно выглядят более последовательными для глаза, что делает их отличными для создания оттенков, теней и сбалансированных палитр или для измерения визуального расстояния между цветами.

Как рассчитывается контраст?

Мы вычисляем относительную яркость из sRGB по формуле WCAG, затем выводим коэффициент контрастности (L1 + 0.05) / (L2 + 0.05). Результат сравнивается с общими порогами, такими как 4.5:1 (AA для обычного текста) и 7:1 (AAA для обычного текста).

Точны ли названия Pantone?

Нет. Любая метка в стиле Pantone является приблизительным соответствием ближайшего соседа в RGB-пространстве и предоставляется только для справки. Для критически важных производственных работ всегда проверяйте с официальными библиотеками и инструментами Pantone.

Вы храните мои изображения или цвета?

Вычисления цветов (форматы, контраст, гармонии) выполняются на стороне клиента. В зависимости от конфигурации, загрузки изображений и наборов данных Pantone могут затрагивать сервер, но инструмент предназначен для временной обработки, а не долгосрочного хранения. Для высококонфиденциальных активов предпочтительнее локальные/офлайн-инструменты.

Pro Tips

Best Practice

Всегда проверяйте цвета на светлых и тёмных поверхностях; воспринимаемая насыщенность и контраст могут сильно меняться в зависимости от контекста.

Best Practice

Используйте LAB или LCH при создании оттенков и теней, чтобы изменения яркости воспринимались человеческим глазом более равномерно.

Best Practice

Проверяйте контраст AA/AAA для всех интерактивных состояний (наведение, активное, отключенное), а не только для цвета кнопки по умолчанию.

Best Practice

Экспортируйте CSS-переменные или токены дизайна из вкладки форматов, чтобы сохранять единообразие цветов во всех компонентах.

Best Practice

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

Additional Resources

WCAG 2.2 – Контраст (Минимальный)
Documentation
Модуль цветов CSS уровня 4
Documentation
MDN – Значения <color>
Documentation
Колориметрия CIE (XYZ/LAB)
Documentation

Other Tools