HTML5 input type="color" について

色を入力できる欄を設けることができます

こちらで動作確認ができます
https://jsfiddle.net/junya_5102/rx7wyh70/

sample code

html

<label>
  background-color
  <input id="bg-color" type="color" value="">
</label>
<label>
  text-color
  <input id="color" type="color" value="" list="color-list">
  <datalist id="color-list">
    <option value="#000000"></option>
    <option value="#ff0000"></option>
    <option value="#008000"></option>
    <option value="#0000ff"></option>
    <option value="#ffff00"></option>
  </datalist>
</label>
<div>
  <h1>input type="color"</h1>
  <p>input要素のvalueには16進数が入ります</p>
  <p>optionのvalueは16進数で指定します、colorName(red,blueなど)ではdatalistがうまく動作しません</p>
  <p>対応確認済みブラウザ: Chrome , Firefox , safari</p>
  <p>※input要素のUIはブラウザによって異なります。input要素のlist属性の対応状況もブラウザによって違います。
</div>

JavaScript

var bg_color = document.getElementById('bg-color'),
    color    = document.getElementById('color');

bg_color.onchange = function () {
  document.querySelector('body').style.backgroundColor = this.value;
  console.log('bg-color:'+this.value);
}

color.onchange = function () {
  document.querySelector('body').style.color = this.value;
  console.log('color:'+this.value);
}

ブラウザ別UI

Chrome

Firefox

Safari

input + datalist (chrome)

対応ブラウザ

input type="color"
http://caniuse.com/#search=color

datalist
http://caniuse.com/#search=datalist