Color pickers are complicated UI elements that allow users to pick a color from a given palette. There are two ways of adding a color picker to your webpage. The first one involves simply using an input element with the type attribute set to color. It's easy to add, and you can attach event listeners to make any changes to the webpage depending on the selected color.
One problem with creating a color picker using the input element is that the UI can differ significantly among different browsers. This might not always be desirable, depending on what you are creating. Your users will generally expect to see only minor changes in the UI irrespective of the browser they are using. Also, the visual appearance of the built-in color picker might not blend properly with the overall theme of your website.
You can solve this problem with the help of JavaScript-based color pickers. In this post, I will tell you about some of the best free and open-source JavaScript color pickers with their own unique features and UI.
Huebee Color Picker
The Huebee Color Picker gives you a user-friendly interface for displaying a limited set of colors. Usually, color pickers ask you to pick colors from a gradient varying from one point to the next. Huebee, on the other hand, shows a specific set of colors based on the parameters you set.
The initialization options for the color picker allow you to specify the number of hues that you want to include in the color picker. You can also select the number of shades and saturation, along with the first hue for the color grid. There's even an option to display your own set of custom colors inside the color picker by passing them as an array.
In addition, Huebee has an event listener that allows you to take action whenever there is a change in the picked color value. There are four different properties that you can use to access the full color value or its hue, saturation, and luminosity individually. You can also check if a user picked a light or dark color by using the isLight property.
Other features of the Huebee color picker are documented on the official website.
Bootstrap Colorpicker
As you might have guessed, the Bootstrap Colorpicker is a color picker plugin for Bootstrap. It has two different versions. The 2.x version works with Bootstrap 3 and 4, while the 3.x version works with Bootstrap 4.
A good thing about the 3.x version is that it will still work even if you are not using Bootstrap at all. You simply need to set the value of the popover option to false or null during initialization to use it without the Bootstrap framework.
There are many interesting things that you can do with this library. For example, you can create a predefined color palette to show to the user along with the color picker. You can also create a more advanced color picker which will create dynamic color swatches based on the color that you have currently selected.
You have a lot of control over the UI of the color picker. This includes everything from making slight changes in its appearance to adding entirely new elements like buttons with your own HTML template. The documentation on the website covers all this in more detail.
React Color
There are a few different types of UI that websites and apps use for color pickers. Have you ever wanted to try any of them in your own website? The React Color library allows you to do just that.
It comes with 13 different pre-built color pickers that emulate the UI of popular websites and applications like GitHub, Photoshop, Chrome, and Twitter. Not only that, but you can also use different components to create your own unique color picker.
MD Color Picker
The MD Color Picker is actually an Angular-based color picker whose UI is inspired by the Material Design philosophy. It also uses a small library called tinycolor.js to manipulate color values.
The color picker gives users many different ways of picking out colors from a pop-up. They can use the good old RGB spectrum or go with RGBA sliders. They can also use two different color palette variants to pick a color that they like. You can add an optional feature to keep track of a user's past color selections in order to help them quickly choose colors.
Colorjoe
Colorjoe is a simple and scaleable color picker that you can easily integrate into your website. The term scaleable here refers to your ability to define the dimensions and control the layout with CSS so that it looks great on all screen sizes.
It comes with two different event listeners—change and done—to help you react based on user interaction with the color picker. Passing a bunch of parameters during initialization allows you to create an RGB or HSL picker. The API also makes it easier for you to add your own UI elements to the color picker in order to customize it according to your needs.
Iris
Iris is a simple color picker created by Automattic, the company behind WordPress among other things. It uses jQuery and jQuery UI as dependencies so can be a good choice for anyone already using those two libraries. You can simply integrate the color picker in your own website by invoking iris() on an input element after you have included the relevant libraries.
There are a bunch of useful options that you can set in order to change how the color picker behaves on your website. It is possible to show a palette of common colors or pass an array of colors that you want to show in the palette. You have full control over the width of the color picker as well as the location where it pops up when attached to an input element.
Iris also has some callback functions and methods that you can read about on the Iris website. It includes some live working examples of the color picker.
Radial Color Picker
This radial color picker has a different approach when it comes to the UI for a color picker. It comes with a radial slider that shows the chosen color at its center. The goal is to be as simple and easy to use as possible.
Check out the following demo by Rosen of how to use the color picker in Vue.js:
Keeping this philosophy in mind, the slider offers support for a screen reader and keyboard-based color selection. You can press the up and down arrow keys to increase or decrease the hue value. Users can press the Enter key to close or open the color picker and press the Tab key to bring the color picker in focus.
The saturation and luminosity values are passed to the color picker during initial setup. More information about different configuration options of the color picker is available from the Radial Color Picker site.
I've linked to the Vue version, but this color picker is also available for use with React and Angular.
ColoReact
The ColoReact color picker is another tiny color picker widget that works great with React. It is easy to use and allows you to create color pickers of varied complexity. The UI will be responsive in all these cases.
The examples page illustrates how you can create a very basic color picker or create something with support for transparency as well as color swatches. You can also create a custom UI for the color picker that blends well with your website.
ColorPick
The ColorPick library is a simple jQuery plugin that you can add to your website to integrate a minimal color picker with a modern look. It has a very stylish design that will blend seamlessly with almost all websites.
Since this is a jQuery plugin, you do need to include the jQuery library in your webpage if you haven't already done so. Two nice features of this color picker are its dark mode and the ability to automatically save recently picked colors to local storage.
The color picker uses the Flat UI color database by default. However, you can also supply your own set of colors during initialization and change the label of the color palette.
You might have noticed that this color picker provides a relatively small list of colors to users for selection. It compensates for that by giving you the option to include an input element with its allowCustomColor parameter where users can enter a HEX value for whatever color they like.
Iro.js
The iro.js color picker is the most feature-rich JavaScript color picker widget in our list. The fact that it does not have any other dependencies makes it even more appealing. You don't need to load any third-party library or framework or any CSS or image files to make the color picker work. Check it out in this pen by James Daniel:
Some of its features include the ability to handle hex, RGB, HSV, and HSL color values with a single API. The widget also comes with its own set of pre-built UI components. You can even pick multiple colors from the same color picker widget if you are trying to create a color scheme for any new design or product.
There are a lot of initialization options available for you to determine the behavior and appearance of the color picker. All of these are explained in detail in the documentation of the widget. You will also find some advanced usage examples for the color picker there.
Final Thoughts
Color pickers are very useful UI elements that can be hard to recreate from scratch. That's why I wanted to write this post to provide you with a list of the best free and open-source JavaScript color pickers that you can use in your projects. I have tried to cover all the bases here by including dependency-free color pickers as well as those that are meant to be used with other popular libraries or frameworks like Bootstrap, jQuery, Angular, Vue, and React.
Hopefully, one of these color pickers will have the features you need, but if not, there are more color pickers to discover on GitHub.
No comments:
Post a Comment