input type="color" に datalist を設定するときの注意点（Google Chrome 対応）

Google Chrome Ver.67.0.3396.62 時点

datalist要素は入力候補となるリストを定義するやつです。

MDNの例では以下のように、ブラウザをリストから選べるようにしています。

<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

この datalist は input="color" に対しても使えるので、デフォルトで表示される色候補を変更することが可能です。

ただしChromeでは注意点が。
MDNの例に合わせて以下のように設定すると、候補の色がすべてグレーアウトされてしまいます。
※Chromeじゃなければ（edgeとかは）これで大丈夫です。Safariは対応していません。

<input type="color" value="#ffffff" list="colorList">
<datalist id="colorList">
  <option value="#E63D46">
  <option value="#FF7E00">
  <option value="#00A36F">
  <option value="#4363C1">
  <option value="#CCCCCC">
  <option value="#FF0078">
  <option value="#C09D4B">
  <option value="#2CBF13">
  <option value="#2C6DFF">
  <option value="#FFFFFF">
  <option value="#FF699E">
  <option value="#89612D">
  <option value="#0B755E">
  <option value="#17AEDF">
  <option value="#000000">
</datalist>

option を以下のようにしてやればChromeでも問題なく設定できます。
見やすいように value は消してます。

<datalist id="colorList">
  <option>#E63D46</option>
  <option>#FF7E00</option>
  <option>#00A36F</option>
  <option>#4363C1</option>
  <option>#CCCCCC</option>
  <option>#FF0078</option>
  <option>#C09D4B</option>
  <option>#2CBF13</option>
  <option>#2C6DFF</option>
  <option>#FFFFFF</option>
  <option>#FF699E</option>
  <option>#89612D</option>
  <option>#0B755E</option>
  <option>#17AEDF</option>
  <option>#000000</option>
</datalist>