Limit the colors to choose from in <input type=”color”> with <datalist>

Christian Heilman:

The input type colour supports the list attribute, which allows you to define a preset list of options. The colours need to be defined as hexadecimal colours. They can be defined as values or text inside the option tags, but the values take precedence.

Pictured at the top of this post is how Chromium-browsers render the following snippet:

<input type="color" list="presets"></label>
<datalist id="presets">
  <option value="#cccccc">Grey</option>
  <option value="#ffffff">White</option>
  <option value="#6699cc">Blue</option>
</datalist>

In his article he continues with dynamically adjust the colors to choose from, based on the color palette of an uploaded image.

UPDATE 2020-04-27: Turns out it’s also possible to limit the options for datepickers and range sliders: datalist experiment. (via)

Limiting input type=”color” to a certain palette (from an image) →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

3 Comments

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.