Color Input Compared Cross-Browser

Entry categories Design
Chinese painting featuring two gold and two silver fish (ca.1800–1899) from the Miriam and Ira D. Wallach Division of Art, Prints and Photographs: Art & Architecture Collection. Original from the New York Public Library. Digitally enhanced by rawpixel.

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

Windows

iOS

iOS Safari color picker
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

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.

Opinions and views expressed here don't necessarily reflect those of my employer.
Posted on