title: How to add predefined colors to <input type="color">?
body: <p>According to MDN, the <code>list</code> attribute can be used for <code>&lt;input&gt;</code> elements of type <code>color</code> to provide a list of predefined colors. That page also <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#Browser_compatibility" rel="noreferrer">indicates that <code>list</code> is supported at least in Chrome</a>.</p>
  
  <p>Though when I specified some colors they were not shown as expected using Chrome 67. Instead, only empty items were shown in the color picker popup and clicking on them set the value of the input to <code>rgba(0, 0, 0, 0)</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/U9AMW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/U9AMW.png" alt="Predefined colors for &lt;input type=&quot;color&quot;&gt; not shown in Chrome"></a></p>
  
  <p>Simple example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="color" list="presetColors"&gt;
  &lt;datalist id="presetColors"&gt;
    &lt;option value="#ff0000"/&gt;
    &lt;option value="#00ff00"/&gt;
    &lt;option value="#0000ff"/&gt;
  &lt;/datalist&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to specify the colors in different formats like used in CSS, e.g. <code>rgb()</code> or color keywords like <code>red</code>, though none of them worked.</p>
  
  <p>Having a look at the HTML specification, it says that the input only <a href="https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color)" rel="noreferrer">accepts "lowercase simple colors"</a>, which is defined as the 6-character hex format.</p>
  
  <p>So, is that a bug in Chrome or am I supposed to specify the colors in a different format?</p>