Что такое выбор цвета?
Выбирайте цвета визуально и конвертируйте между HEX, RGB, HSL и CMYK. Копируйте любой формат одним кликом и настраивайте значения прямо в браузере.
Как использовать выбор цвета
- Введите значение HEX или выберите цвет с помощью визуального выбора цвета.
- Проверьте преобразованные значения RGB, HSL и CMYK, показанные ниже.
- Настройте входные значения, пока цвет не совпадёт с целевым цветом дизайна или кода.
- Скопируйте нужный формат одним кликом.
Краткие руководства
Справочник по форматам цвета сравнивает HEX, RGB, HSL и CMYK, чтобы вы могли выбрать подходящий формат для CSS, дизайна и печати.
Разбираемся в выборе цвета ▾
Пример
Типичные сценарии использования
- Выбирайте точные цвета интерфейса для CSS или дизайн-токенов
- Копируйте значения HEX, RGB или HSL в код фронтенда
- Проверяйте и сравнивайте цвета при проверке качества дизайна
- Создавайте небольшие палитры из одного выбранного цвета
Часто задаваемые вопросы
HEX, RGB, RGBA, HSL, HSLA и CMYK. Нажмите на любое поле формата, чтобы скопировать его значение.
В браузерах, поддерживающих EyeDropper API (Chrome 95+), да. Нажмите на значок пипетки, чтобы выбрать цвет в любом месте экрана.
HSL (Hue, Saturation, Lightness) и HSB/HSV (Hue, Saturation, Brightness/Value) — обе цилиндрические цветовые модели, но они различаются тем, как определяют третью ось. В HSL 50% светлоты — это "чистый" цвет. В HSB 100% яркости означает максимальную яркость, что ближе к цвету, который художники считают насыщенным. CSS использует HSL; Photoshop и Figma используют HSB.
Этот инструмент показывает значения цветов и преобразования. Для проверки контраста в целях доступности (соотношения WCAG AA/AAA) с фоновым цветом используйте специальный инструмент Contrast Checker.