An easy way to add a color picker to your website
In my work, I have often had to develop web-based tools that allow the user to create their own content for printing, web, or mobile. This almost always involves letting them choose colors for their text, background, etc.
As you probably know, colors on the web are usually represented as a 24-bit number that contains the right mix of red, green, and blue that’s needed to display the color you want. Those 24 bits are most often expressed as a six-digit hexadecimal number such as #483D8B.
In the earlier days, websites would simply ask the user to enter that six-digit number in a text input box in order to select the color they want. Not very user-friendly, right? To improve usability, you could provide a list of colors, and the user would click on the desired one. However, that limits the choice of available colors, and it is more difficult to code.
HTML5 includes many additional user interface elements that allow you to enter data much more easily. One of them is the “color” input type. It solves our color problem completely — in an HTML form, you could add a color input with a single line of code. The browser would assist the user in picking a color, and the back-end application would get the hexadecimal code that computers can work with. The code for the input element is as simple as that:
<input type="color" name="mycolor">
Then the browser would natively provide all the UI tools needed to select a color:
<script src='spectrum.js'></script> <link rel='stylesheet' href='spectrum.css' />
For more advanced tweaking, Spectrum provides many additional options as well. Among the available solutions, I would highly recommend it to my fellow web developers. For demos, downloads, and documentation you can go to the plugin’s page.