Как показать код выбранного цвета в HTML5?

В HTML5 есть стандартный элемент для выбора цвета. Он возвращает привычный 16-ричный код цвета RGB, вот только ни сама компонента, ни Windows в окне "Цвет" этого так нужного кода не показывают.

Решить проблему можно небольшим скриптом на Javascript.

16-ричный код цвета виден как непосредственно при выборе цветов в стандартном окне "Цвет", так и после закрытия окна кнопкой "ОК". Он выделяется вместе с префиксом "#" тройным щелчком мыши как обычный абзац текста.

Следует помнить, что элемент input type="color" пока что работает не во всех браузерах.

Вот пример в работе и исходник:

<div>
 <label for="colorer">Выбор цвета:</label>
 <input type="color" id="colorer" value="#ffffff">
 <p id="selectedColor">#ffffff</p>
</div>
<script>
 var theInput = document.getElementById("colorer");
 theInput.addEventListener ("input", function() {
  document.getElementById("selectedColor").innerHTML = theInput.value;
 }, false);
</script>
<noscript>
 <p>Извините, для работы приложения нужно включить Javascript в браузере</p>
</noscript>

Можно было у поля выбора цвета обрабатывать и событие change (выбор нового цвета подтверждён), а не input (цвет введён).

Если требуется выбирать цвета только из списка предустановленных, поможет стандартный элемент HTML5 datalist.

Код поля для выбора текста станет в этом случае, например, таким (вместо строки <input type="color" id="colorer" value="#ffffff">):

 <input type="color" list="colors" id="colorer" value="#ffffff">
 <datalist id="colors">
  <option value="#ffffff" label="white">
  <option value="#0000ff" label="blue">
  <option value="#008000" label="green">
  <option value="#ff0000" label="red">
 </datalist>

Только поддерживающих эту возможность именно для списка цветов браузеров, похоже, станет ещё меньше. Вариант кода 1 сработал в текущем Firefox и IE11, а этот вариант в Firefox ничего не дал.

В текущих Chrome и Opera вариант 1 показывает код только после подтверждения выбора цвета из окна диалога кнопкой ОК.

На Javascript выполнить преобразование 16-ричного кода цвета RGB в список десятичных интенсивностей компонент, а также обратное преобразование можно примерно таким кодом:

<div id="rgbResult"></div>
<script>
(function (context) {
 context['toRGB'] = function (color) {
  var num = parseInt(color, 16);
  return [num >> 16, num >> 8 & 255, num & 255];
 };

 context['toHex'] = function (red, green, blue) {
  return ((blue | green << 8 | red << 16) | 1 << 24).toString(16).slice(1);
 };
})(this);

var rgb = toRGB('ffcc00'); //255, 204, 0
document.getElementById("rgbResult").innerHTML = rgb.join(',');
var hex = '#'+toHex(255, 204, 0); //#ffcc00
document.getElementById("rgbResult").innerHTML += ' ' + hex;
</script>
<noscript>
 <p>Извините, для работы приложения нужно включить Javascript в браузере</p>
</noscript>

22.09.2019, 16:25 [1334 просмотра]