As you may know, many of the HTML5 input types have been defined, but do not have a recommended or consistent experience across operating systems, nor browsers.
Recently, the team at work and I discussed whether we should use the default HTML5 input type of ‘color’ or roll our own. As of December 2020, here’s what each picker experience looks like in the following browser and OS combos.
The variations
MacOS
Safari uses a variant of the native color picker to MacOS. The “Show colors” button opens the full native color picker experience that Firefox on MacOS uses. Firefox’s color picker uses the native color picker from the OS. MacOS Chromium‘s color picker is very elegant and allows multiple types of color inputs. Doesn’t allow for RGBA type values however.
Windows
Edge and Chromium uses the same picker experience as the MacOS variant does. Firefox again uses the native system color picker, however it suffers from the lack of defining Hex values this time IE11’s variant is, as to be expected, the worst looking experience of the batch. However, at least it lets users set an explicit Hex value.
iOS
Safari (and all browsers) uses a very nice looking, but limited selection of available colors with no ability to set a specific color value.
Android
Chromium allows users to pick default or custom colors, but provides no way to select a specific color easily. Firefox‘s color picker is the most limited of any picker on the market today, with no way to add custom colors or values. Does look nice however.
Conclusion
Since there is no single uniform value that a user could define across any channel, I personally would recommend any site or application use or create a bullet-proof cross-platform solution, especially if you must handle RGBA-like colors or need a consistent experience. If you are looking to MVP a product, are exclusively looking to support only a limited set of devices, or color selection isn’t super crucial to your app, the HTML5 defaults will likely serve you well.
