MF Color Picker (Basic) widget

The basic HTML color picker can be created using the following logic:

html

<input type="color">

or

html

<input type="color" list="basiclist">
<datalist id="basiclist">
    <option>#ffffff</option>
    <option>#000000</option>
    <option>#ff0000</option>
    <option>#00ff00</option>
    <option>#0000ff</option>
</datalist>

• Adds a tick
• Manages default list of colors

If you are not happy with the basic HTML color picker, then you can use the MFColorPicker to improve this. This will enhance the basic HTML input by adding in a tick to beside the input field (something I believe is missing from the standard Windows UX), and it also maintains the color selection defaults, adding the latest selected color to the front of the defaults.

To implement you only need to include the .js file in order to initalize existing inputs

js

new MFColorPicker().init('presets');

By default, the class will assume material-icons is your chosen tick font, but if you want to change this then change the init call using the second and third arguments (class, value)

js

new MFColorPicker().init('presets', 'fa-solid fa-check', '');

Note, it would be good to add a cross, but this is not possible as the selector is a modal popup.

This class also requires material-icons to have the tick work.

html

<link rel="stylesheet preload prefetch" as="style" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://methodfish.com/Download/MFColorPickerBasic/files/latest/js/mf-colorpicker.js"></script>

<input type="hidden" id="presets" value="ffffff,000000,ff0000,00f000,0000ff">
<input type="color" class="mfcolorpicker" onchange="alert()">

<script>
new MFColorPicker().init('presets');
</script>

Also see MFColorPicker for a richer experience UI widget.