<input> элементы типаcolor предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путём ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.

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

Интерактивный пример

<p>Choose your monster's colors:</p><div>  <input type="color" name="head" value="#e66465" />  <label for="head">Head</label></div><div>  <input type="color" name="body" value="#f6b73c" />  <label for="body">Body</label></div>

p,label {  font:    1rem "Fira Sans",    sans-serif;}input {  margin: 0.4rem;}

Value

value элемента<input> типаcolor всегда являетсяDOMString, который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранён в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.

Использование настроек цвета

Входные данные типаcolor просты из-за ограниченного числа атрибутов, которые они поддерживают.

Предоставление цвета по умолчанию

Вы можете обновить простой пример выше, чтобы установить значение по умолчанию, так что цветовая заливка будет предварительно заполнена цветом по умолчанию, и палитра цветов (если таковая имеется) также будет по умолчанию использовать этот цвет:

<input type="color" value="#ff0000" />

Если вы не зададите значение, то по умолчанию будет#000000, то есть чёрный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ"#", за которым следуют две цифры, каждая из которых представляет красный, зелёный и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придётся преобразовать их в шестнадцатеричные перед установкой значения.

Отслеживание изменений цвета

Как и в случае с другими типами<input>, есть два события, которые могут быть использованы для обнаружения изменения цвета значения:input иchange.input запускается на элементе<input> каждый раз, когда меняется цвет.change событие запускается, когда пользователь отклоняет средство выбора цвета. В обоих случаях вы можете определить новое значение элемента, посмотрев на егоvalue.

Вот пример, который наблюдает за изменениями со временем значения цвета:

colorPicker.addEventListener("input", updateFirst, false);colorPicker.addEventListener("change", watchColorPicker, false);function watchColorPicker(event) {  document.querySelectorAll("p").forEach(function (p) {    p.style.color = event.target.value;  });}

Выбор значения

Если реализация элемента<input> типаcolor в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать select () метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно используетcolor, select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.

colorWell.select();

Вариации внешнего вида

Как уже упоминалось ранее, когда браузер не поддерживает интерфейс выбора цвета, его реализация цветовых входов будет представлять собой текстовое поле, которое автоматически проверяет содержимое, чтобы убедиться, что значение находится в правильном формате. Например, в Safari 10.1 вы увидите что-то похожее на это:

То же самое можно увидеть и в Firefox 55:

В этом случае при нажатии на цветовой колодец отображается палитра цветов платформы, из которой вы можете выбрать нужный цвет (в данном случае это палитра macOS):

Validation

Значение цветового ввода считается недопустимым, еслиuser agent не может преобразовать пользовательский ввод в семизначную строчную шестнадцатеричную нотацию. В этом случае к элементу применяется псевдокласс:invalid.

Пример

Давайте создадим пример, который делает немного больше с цветом входного сигнала путём отслеживанияchange иinput событий, чтобы взять новый цвет и применить его к каждому<Р> элемента в документе.

HTML

HTML довольно прост — пара абзацев описательного материала с<input> типаcolor с идентификаторомcolorWell, который мы будем использовать для изменения цвета текста абзацев.

<p>  An example demonstrating the use of the  <code>&lt;input type="color"&gt;</code> control.</p><label for="colorWell">Color:</label><input type="color" value="#ff0000" /><p>  Watch the paragraph colors change when you adjust the color picker. As you  make changes in the color picker, the first paragraph's color changes, as a  preview (this uses the <code>input</code> event). When you close the color  picker, the <code>change</code> event fires, and we detect that to change  every paragraph to the selected color.</p>

JavaScript

Во-первых, есть некоторые настройки. Здесь мы объявляем некоторые переменные. Объявляя переменную, содержащую цвет, который мы установим, когда загрузим страницу, а затем устанавливаем обработчикload для выполнения основной работы запуска, как только страница будет полностью загружена.

var colorWell;var defaultColor = "#0000ff";window.addEventListener("load", startup, false);

Инициализация

Как только страница загружена, вызывается наш обработчик событий загрузкиstartup():

function startup() {  colorWell = document.querySelector("#colorWell");  colorWell.value = defaultColor;  colorWell.addEventListener("input", updateFirst, false);  colorWell.addEventListener("change", updateAll, false);  colorWell.select();}

Это возвращает ссылку на элемент color<input> в переменнойcolorWell, а затем устанавливает значение входного цвета в значениеdefaultColor. То цвет входноеinput событие настроено, чтобы вызватьupdateFirst() функцию иchange событие, вызываетсяupdateAll(). Они оба видны ниже.

Наконец, мы вызываем select () для выбора текстового содержимого цветового ввода, если элемент управления реализован в виде текстового поля (это не имеет никакого эффекта, если вместо него предусмотрен интерфейс выбора цвета).

Реакция на изменение цвета

Мы предоставляем две функции, которые имеют дело с изменением цвета. ФункцияupdateFirst() вызывается в ответ наinput событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Посколькуinput события запускаются каждый раз, когда производится корректировка значения (например, если яркость цвета увеличивается), они будут происходить повторно при использовании средства выбора цвета.

function updateFirst(event) {  var p = document.querySelector("p");  if (p) {    p.style.color = event.target.value;  }}

Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событиеchange. Мы обрабатываем это событие с помощью функцииupdateAll(), используяEvent.target.value для получения окончательного выбранного цвета:

function updateAll(event) {  document.querySelectorAll("p").forEach(function (p) {    p.style.color = event.target.value;  });}

Это устанавливает цвет каждого элемента<p> таким образом, чтобы его атрибутcolor соответствовал текущему значению входного цвета, на которое ссылаются с помощьюevent.target.

Результат

Финальный результат выглядит так:

Спецификации

Совместимость с браузерами

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace

Изучите также

• Compatibility of CSS properties