Что такое выбор цвета?

Инструмент выбора цвета позволяет выбрать цвет на глаз, а не вводить числа. В большинстве приложений для дизайна он устроен одинаково: ползунок оттенка задаёт основной цвет из спектра, а квадрат рядом позволяет настроить насыщенность этого оттенка (слева направо) и его яркость (сверху вниз). Это цветовая модель HSV, и в ней есть место для каждого цвета, который может отображать экран.

Описание инструмента

Перетаскивайте указатель по квадрату и ползунку оттенка, чтобы найти нужный цвет, или введите либо вставьте цвет в формате HEX, RGB, HSL или другом формате. В Chrome и Edge кнопка пипетки позволяет выбрать цвет в любой точке экрана, даже за пределами браузера. Настройте непрозрачность для полупрозрачных цветов и скопируйте результат в нужном формате: HEX — для CSS и большинства инструментов дизайна, RGB и HSL — для CSS, HSV — для приложений для дизайна, OKLCH — для современного CSS, а CMYK — как отправную точку для печати.

Возможности

  • Квадрат для настройки насыщенности и яркости с ползунком оттенка; управление мышью, касанием или клавиатурой
  • Пипетка для выбора цвета с экрана в Chrome и Edge
  • Ввод или вставка цвета в форматах HEX, RGB, HSL, HWB, CMYK и других
  • Настройка непрозрачности с отображением на сетке прозрачности
  • Значения HEX, RGB, HSL, HSV, OKLCH и CMYK, готовые к копированию
  • Дополнительные форматы, такие как HWB, LAB, LCH и XYZ, доступны в списке форматов выбранного цвета
  • Работает в браузере

Как это работает

Инструмент хранит цвет в виде оттенка, насыщенности и значения, поэтому оттенок не меняется, когда вы перетаскиваете указатель к белому, чёрному или серому цвету. Остальные форматы рассчитываются на их основе: значения HEX и RGB округляются до целых чисел от 0 до 255, HSL и HSV — до целых градусов и процентов, а OKLCH преобразуется через цветовое пространство sRGB. Если непрозрачность ниже 100%, к HEX добавляется четвёртая пара цифр, а в CSS-форматы включается значение альфа-канала. В CMYK альфа-канала нет; преобразование выполняется без профиля принтера.

Советы

  • Непрозрачность вставленного цвета, например в rgba(), не сохраняется: задайте её в поле «Непрозрачность».
  • Щёлкните квадрат или ползунок и используйте клавиши со стрелками, чтобы изменять значение с шагом 1%, или с шагом 10% при нажатой клавише Shift.
  • Чтобы выбрать цвет на фотографии или снимке экрана, воспользуйтесь инструментом «Выбор цвета на изображении», который считывает само изображение.
  • Уточните в типографии, какие значения CMYK использовать: один и тот же цвет может выглядеть по-разному при печати на разных печатных машинах и бумаге.