How to do an color-picker with just a range of colors

Question

I am trying to do something like this:

A colorpicker where you can pick some Colors, but only from this 40 colors. I don't want to use an eventlistener for each color. I think it should be possible to do it like a <select> element, but how?

Answer 1

I suggest that you can use some color picker libraries like
https://bgrins.github.io/spectrum/
This one includes color picker with variety of views and other functions and is free .
This could save a lot of time and work

Answer 2

If you truly want it as a Select, you could just do this:

<select>
    <option style="background-color:red" value="red">Red</option>
    <option style="background-color:green" value="green">Green</option>
    <option style="background-color:#0000ff" value="#0000ff">Blue (as hex)</option>
</select>

That requires no Javascript at all.

Answer 3

I think it will be alot of tinkering to do your specific solution. To do your solution I would do a html table containing the 40 cell, then define a color for each cell, write the code to define which one the user has selected, to later on use for what ever purpose you need.

if it was me i would use something like this: code from: http://widget.colorcodehex.com/color-picker.html

<div style="font-family: Arial,Helvetica,sans-serif; border: solid 1px #cccccc; position: absolute; width: 240px; height: 326px; background: #ffffff; -moz-box-shadow: 0 0 6px rgba(0,0,0,.25); -webkit-box-shadow: 0 0 6px rgba(0,0,0,.25); box-shadow: 0 0 6px rgba(0,0,0,.25); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;">

<div style="background-color: #2d6ab4; position: absolute; top: 0px; left: 0px; width: 100%; height: 22px; text-align: center; padding-top: 2px; font-weight: bold; border-top-right-radius: 5px; border-top-left-radius: 5px;"><a style="text-decoration: none; color: #ffffff;" target="_blank" href="http://www.colorcodehex.com/">HTML Color Picker</a></div>

with this your can get the same result (or in my oppion a better since the user can define whatever color they would like) but your don't have to sit and do all the table-color-code and user interaction code.

/S