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:

Screenshot by Author | A view of the hexagonal color picker from Microsoft PowerPoint

On the other hand, many web developers would be aware of the default HTML color picker component rendered with: <input type='color' />

Screenshot by Author | Originally taken from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/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…