Build A Hexagonal Color Picker with CSS & Vanilla JavaScript
Lightweight Color Picker Component. Full Code Implementation.
In most corporate work places today, Microsoft Office products such as Microsoft PowerPoint or Microsoft Word are widely considered to be mandatory productivity tools. Hence, anyone who has dealt with them would be familiar with the following color picker interface:
On the other hand, many web developers would be aware of the default HTML color picker component rendered with: <input type='color' />
Hence, in order for Microsoft Office product users to handle a color picker they are accustomed to, I searched the web for attempts to re-enact the hexagonal interface and managed to find a few implementations which either:
1) Requires external plugins
- jQuery Hex Colorpicker (requires jQuery)
- hexbin.js (requires d3 — Source: d3-js-hexbin-hexagonal-color-picker
2) Is Image-Dependent and Code Heavy
- W3Schools’ Implementation at HTML Color Picker (requires colormap…