Color picker
Hello friends, in this tutorial I will discuss how to use the color picker using javascript. JavaScript is a strong client-side programming language and recently it is used heavily on any platform. Let’s come to the point.
This is an HSV color based JavaScript color picker for generating a pretty color, HTML5 canvas based color wheel UI with touch support.
How to use it:
If you want to do this, first of all, you need a js file, that is iro.min.js. So, first download it and setup it in your project. Click here to download this file.
Javascript library:
Add the core JavaScript library to the html page:
<script src="iro.min.js"></script>
HTML element:
Create an HTML element for the color picker.
<div class="wheel" id="colorWheelDemo"></div>
Script initialization:
We need to initialize the script
var colorWheel = iro.ColorWheel("#colorWheelDemo", { // options for color picker });
Full source code:
Here is the full source code of the color picker
<!DOCTYPE html> <html> <head> <title></title> <script src="iro.min.js"></script> </head> <body style="background-color: #7b3c3c"> <h1 id="head-div">My Color Wheel Test</h1> <div class="wheel" id="colorWheelDemo"></div> <script> var colorWheel = new iro.ColorPicker("#colorWheelDemo",{ width:320, height:320, padding:4, markerRadius:8, color:"rgb(68, 255, 158)", css:{"#head-div":{"color":"rgb"}} }); </script> </body> </html>
Here you can customize this color picker wheel by changing its width, height and other parameters. You can also add changing color code in any element by element id or class. Which I have done with the h1 element.
Conclusion
We can use this color picker in any web application. If you like this post and found it as helpful , then share the post in social media.