Как пользоваться: Выбор цвета
- Перетащите указатель в квадрате цветов и двигайте ползунок оттенка, введите значение HEX или используйте пипетку, чтобы взять цвет с экрана.
- Нажмите на любую строку, чтобы скопировать цвет в формате HEX, RGB, HSL или OKLCH.
- Используйте оттенки и гармонии, чтобы собрать палитру, и проверьте контраст текста.
- Чтобы разместить выбор цвета на сайте, настройте его параметры в блоке Встроить этот выбор цвета и скопируйте код.
Какой формат цвета выбрать?
- HEX — короткая запись, которая используется в CSS и дизайнерских инструментах.
- RGB задаёт каналы красного, зелёного и синего, удобно, когда инструмент запрашивает числа.
- HSL проще корректировать вручную: измените светлоту, чтобы получить тон или оттенок.
- OKLCH воспринимается равномерно, поэтому одинаковые шаги светлоты выглядят одинаково. Его поддерживают все современные основные браузеры.
Встраивание выбора цвета
Код для вставки — это один самодостаточный пользовательский элемент без библиотек и внешних запросов. Вставьте его на любую страницу, слушайте событие input и читайте event.detail.value. Его стили находятся в shadow root, поэтому они не конфликтуют со стилями вашего сайта. В Webflow кнопка Copy to Webflow вставляет код как элемент Embed.
Нужно больше? Конвертируйте значения с помощью Color Converter, смешайте два цвета в Color Mixer, получите палитру из фото в Image Color Palette или проверьте читаемость в Contrast Checker.
Также ищут как: color picker онлайн, html color picker, hex color picker, rgb color picker, встроить color picker, color picker javascript.
Инструменты, которые хорошо сочетаются с Выбор цвета
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Генератор цветов Tailwind — Вставьте один цвет бренда и получите сбалансированную шкалу из 11 оттенков (от 50 до 950), построенную в OKLCH, с подсказками контраста и экспортом для Tailwind v3, v4, CSS и SCSS.
- Конвертер HEX в OKLCH — Вставьте HEX-цвет и получите его значение OKLCH для CSS.
- Конвертер OKLCH в HEX — Вставьте значение oklch(), и вы получите его HEX-эквивалент, а также RGB и HSL.
Часто задаваемые вопросы
Как взять цвет с экрана?
Нажмите кнопку пипетки в выборе цвета и щёлкните в любом месте экрана. Это работает в Chrome и Edge на компьютере. В других браузерах открывается их собственное окно выбора цвета, которое может включать пипетку экрана.
Можно ли использовать встроенный выбор цвета на коммерческом сайте?
Да. Код бесплатен для личных и коммерческих проектов, указание авторства не требуется.
Как получить выбранный цвет из встроенного виджета?
Добавьте к элементу обработчик события input и читайте event.detail.value или в любой момент читайте его свойство value.
Загружает ли встроенный виджет что-либо с devpack?
Нет. Всё находится внутри вставляемого фрагмента кода, поэтому он продолжает работать без интернета.
Можно ли установить Выбор цвета как веб-приложение и пользоваться им офлайн?
Да. Выбор цвета — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.