<input type="color">

Елементи <input> типу color (колір) надає елемент користувацького інтерфейсу, що дає користувачеві змогу задати колір, або шляхом використання інтерфейсу вибору кольору, або введення кольору в текстове поле в шістнадцятковому форматі #rrggbb.

Дозволені лише прості кольори (без альфа-каналу), попри те, що кольори CSS мають більше форматів, наприклад, назви кольорів, функційні записи й шістнадцятковий формат з альфа-каналом.

Представлення елемента може суттєво відрізнятися в різних браузерах чи платформах: може бути простим текстовим полем, що автоматично валідує введений колір на коректність формату, або ж залежним від платформи інтерфейсом вибору кольору, або ж якимсь особливим віконцем.

Спробуйте його в дії

Значення

Значення атрибута value елемента <input> типу color завжди є рядком, що містить 7-символьний рядок, що задає колір RGB у шістнадцятковому форматі. Хоч колір можна ввести у верхньому чи нижньому регістрі, він буде збережений у формі нижнього регістру. Значення ніколи не набуває жодної іншої форми, і ніколи не буває порожнім.

[!NOTE] Задання значення у вигляді будь-чого, що не є дійсним, цілком непрозорим кольором RGB у шістнадцятковому записі, призведе до задання значення #000000. Якщо конкретніше, то не можна використовувати для задання значення стандартизовані назви кольорів CSS, а також будь-який функційний запис CSS. Це має зміст, коли мати на увазі, що HTML і CSS – це окремі мови й окремі специфікації. На додачу до цього, кольори з альфа-каналом не підтримуються; задання кольору в 9-символьному шістнадцятковому записі (наприклад, #009900aa) так само призведе до задання кольору #000000.

Застосування полів кольору

Поля типу color – прості, у зв'язку з обмеженою кількістю атрибутів, що вони підтримують.

Задання усталеного кольору

Можна оновити простий приклад вище для задання усталеного значення, щоб інтерфейс вибору кольору був наперед заповнений усталеним кольором, і інтерфейс вибору кольору (якщо він є) також отримав це значення як усталене:

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

Якщо не задати значення, то усталеним буде #000000, тобто чорний. Таке значення повинно бути в семисимвольному шістнадцятковому записі, тобто в записі з символом "#", після якого три пари цифр, кожна з яких позначає червоний, зелений та синій відповідно, отак: #ччззсс. Якщо доступні кольори мають будь-який інший формат (як то назви кольорів CSS або колірні функції CSS штибу rgb() або hsl()), то доведеться перед заданням value їх привести до шістнадцяткової форми.

Відстеження змін кольору

Так само як у випадку інших типів <input>, є дві події, що можуть використовуватися для відстеження змін значення кольору: input і change. input спрацьовує на елементі <input> при кожній зміні кольору. Подія change спрацьовує, коли користувач закриває інтерфейс вибору кольору. В обох випадках можна з'ясувати нове значення елемента, поглянувши на його value.

Ось приклад, що слідкує за змінами значення кольору протягом часу:

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

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

Вибір значення

Коли браузер не підтримує інтерфейс вибору кольору, його реалізацією полів кольору є текстове поле, що автоматично валідує вміст, аби пересвідчитися, що значення має коректний формат. У такому випадку можна використати метод select(), аби вибрати текст, присутній в полі редагування.

Якщо замість цього браузер використовує інтерфейс вибору кольору, то select() нічого не робить. Слід мати на увазі цю логіку, щоб код міг реагувати відповідно в будь-якому випадку.

colorPicker.select();

Валідація

Значення поля кольору вважається недійсним, якщо користувацький агент не може перетворити введення користувача на семисимвольний шістнадцятковий запис у нижньому регістрі. Якщо і коли це так, то до елемента застосовується псевдоклас :invalid.

Приклад

Створімо приклад, що робить трохи більше за допомогою поля кольору, відстежуючи події change і input, щоб отримати новий колір і застосувати його до кожного елемента <p> в документі.

HTML

HTML є доволі прямолінійним: кілька абзаців з описовим матеріалом, а також <input> типу color з ідентифікатором color-picker, який використовується для зміни кольору тексту абзаців.

<p>
  Приклад, що демонструє застосування контрольного елемента
  <code>&lt;input type="color"&gt;</code>.
</p>

<label for="color-picker">Колір:</label>
<input type="color" value="#ff0000" id="color-picker" />

<p>
  Спостерігайте за зміною кольору абзаців при виборі кольору. При змінах в
  інтерфейсі вибору кольору змінюється колір першого абзацу, як попередній
  перегляд (ця функціональність використовує подію <code>input</code>). Якщо
  закрити цей інтерфейс, то спрацьовує подія <code>change</code>, і вона
  відстежується для застосування вибраного кольору до кожного абзацу.
</p>

JavaScript

По-перше, є трохи налаштування. Тут створюється кілька змінних, налаштовується змінна, що містить колір, котрий буде заданий інтерфейсові вибору кольору при першому завантаженні, а потім налаштовується обробник load, щоб виконати стартову роботу, коли сторінка повністю завантажена.

let colorPicker;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

Ініціалізація

Коли сторінка завантажена, викликається обробник події load – startup():

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

Цей код отримує посилання на елемент кольору <input> у змінну, що зветься colorPicker, потім задає значення поля кольору – значення defaultColor. Далі налаштовується подія input поля кольору, щоб викликати функцію updateFirst(), а подія change – задля виклику updateAll(). Це можна побачити нижче.

Насамкінець викликається select(), аби вибрати текстовий вміст колірного поля, якщо контрольний елемент реалізований як текстове поле (це не спрацює, якщо замість цього наданий інтерфейс вибору кольору).

Реагування на зміни кольору

Тут дві функції, що мають справу зі змінами кольору. Функція updateFirst() викликається у відповідь на подію input. Вона змінює колір елемента першого абзацу в документі на колір зі значення поля кольору. Оскільки події input спрацьовують щоразу, коли значення змінюється (наприклад, збільшується яскравість кольору), то це відбувається раз за разом, при використанні інтерфейсу вибору кольору.

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

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

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

Це змінює колір кожного блока <p> так, що його атрибут color відповідає поточному значенню поля кольору, звертання до якого відбувається за допомогою event.target.

Результат

Остаточний результат має такий вигляд:

Технічний підсумок

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

Сумісність із браузерами

Дивіться також

• Сумісність властивостей CSS