Онлайн-пипетка для выбора цвета и конвертер цветовых кодов

Для чего подходит этот инструмент

Эта онлайн-пипетка позволяет взять образец цвета и просмотреть его значения в форматах hex, rgb, hsl, hwb, lch, device-cmyk и среди стандартных именованных цветов CSS. Вы также можете вручную ввести поддерживаемое значение цвета, и страница автоматически преобразует его.

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

Типичные сценарии

• Взять цвет пикселя с веб-страницы, скриншота, дизайн-макета, настольного приложения или системного интерфейса.
• Преобразовать цвет в удобные для frontend форматы: hex, rgb, hsl, hwb, lch или cmyk.
• Найти стандартный именованный цвет CSS, когда в документации, дизайн-заметках или комментариях к коду нужно читаемое имя.
• Проверить, может ли браузер разобрать существующее значение цвета, и скопировать нужный формат вывода.

Способы выбора цвета

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

1. Откройте браузерный ввод цвета и выберите цвет в системном цветовыборщике.
2. Или нажмите кнопку пипетки и возьмите цвет с экрана, если браузер это разрешает.
3. Также можно вставить код цвета или имя цвета в поле ручного ввода и позволить странице разобрать значение.
4. Скопируйте нужный формат для CSS, дизайн-заметок или конфигурационных файлов.

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

Конвертер поддерживает CSS-форматы цветов hex, rgb, hsl, hwb, lch и device-cmyk, а также принимает стандартные английские именованные цвета в качестве входных данных.

• Типичные примеры ввода: #00bfff, rgb(0, 191, 255), hsl(195, 100%, 50%), hwb(195 0% 0%), lch(...) и имена цветов CSS.
• Список результатов показывает несколько форматов сразу, чтобы проще переходить между кодовой базой, дизайн-инструментами и требованиями документации.
• Вывод именованного цвета — это ближайший стандартный именованный цвет CSS, если он доступен. Его стоит рассматривать как удобную метку, а не всегда как точный дизайн-токен.

Что важно учитывать

• Пипетка зависит от поддержки EyeDropper API в браузере. Если она недоступна, встроенный выбор цвета и ручной ввод все равно работают.
• Выбор цвета с экрана обычно возвращает sRGB hex-значение. Цветовые профили дисплея, масштабирование, рендеринг браузера, сжатие, прозрачность и сглаживание могут давать небольшие отличия от дизайн-файла.
• Встроенные браузерные цветовыборщики выглядят по-разному в разных ОС и браузерах, но преобразованные значения на странице используют один и тот же процесс разбора.
• Если ввод содержит альфа-прозрачность, проверьте формат вывода перед использованием в системе, где нужно сохранить альфа-канал.

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