How to make my own color picker
Welcome back, well now let's look on how to create a color picker of your own style in HTML Web Page.
Why we need color picker ?
We need color picker at times when we need to select a color that should be different among others. At the same time it should be great looking to suit on different styles. HTML5 supports color picker with a little piece of code.
People find it easier when they see videos , so here is an youtube video for demonstration
Can we create Color Picker of our own style ?
Why not we can . Without wasting time lets see how it is, before that look on the demo site how it works.
Ok then we can find two ways for the color picker, standard one and customized one.
Standard code
<html><head></head><body><label for="colorpicker">Color Picker</label> <input type="color" id="colorpicker" value="#0000ff" > </body></html>Customized code with few scripts
<html><!-- Lifeofmechon.xyz Please don't remove this comment--> <head><script>function changecolor(color) { var x = document.createElement("input");x.setAttribute("id","val");x.style.setProperty("background-color", color, "important");x.setAttribute("value",color);document.body.appendChild(x);}</script><style>#val{color:white;max-width:200px;border-radius:5px;Text-Align:center;font-size:25px;position:absolute;height:100px;top:0;bottom:20px;left:0;right:250px;margin:auto;}.center {text-align: center;font-size:50px;position:absolute;height:50px;top:0;bottom:500;left:0;right:0;margin:auto;}
#colorpicker{width:200px;height:100px;position:absolute;top:0;bottom:-480px;left:250px;right:0;margin:auto;}</style><div class="center"> <label for="colorpicker">Color Picker</label> <p>Pick your Custom Colour</p> <input type="color" id="colorpicker" value="#0000ff" onchange="changecolor(this.value)" ></div> </body></html>So with few scripts and CSS styles the above customized code works like charm. You can also style on your own for your expectations.
Unnoticed Features :
1. We can toggle among the HEX, RGB and HSL values for the color we select.[]
2. We can use the palette to choose wide variety of colors.
As we use the HEX color code mostly, so I made it to visible for easy appearance.
Post a Comment
Post a Comment
your response will be validated and get a reply very soon.