How to implement a color picker instead of static colors
<p>I am developing a painting website. I have a script for selecting colors. It is working fine till now.</p>

<p>Here is the code to selecting my colors.</p>

<pre><code>&lt;div class="colorpick"&gt;
  &lt;div class="pick" style="background-color:rgb(150, 0, 0);" onclick="hello(this.style.backgroundColor);"&gt;&lt;/div&gt;
  &lt;div class="pick" style="background-color:rgb(0, 0, 152);" onclick="hello(this.style.backgroundColor);"&gt;&lt;/div&gt;
  &lt;div class="pick" style="background-color:rgb(0, 151, 0);" onclick="hello(this.style.backgroundColor);"&gt;&lt;/div&gt;
  &lt;div class="pick" style="background-color:rgb(255, 0, 5);" onclick="hello(this.style.backgroundColor);"&gt;&lt;/div&gt;
  &lt;div class="pick" style="background-color:rgb(255, 255, 0);" onclick="hello(this.style.backgroundColor);"&gt;&lt;/div&gt;
  &lt;div class="pick" style="background-color:rgb(0, 255, 255);" onclick="hello(this.style.backgroundColor);"&gt;&lt;/div&gt;
  &lt;div class="pick" style="background-color:rgb(255, 0, 255);" onclick="hello(this.style.backgroundColor);"&gt;&lt;/div&gt;
  &lt;div class="pick" style="background-color:rgb(255, 150, 0);" onclick="hello(this.style.backgroundColor);"&gt;&lt;/div&gt;
  &lt;div class="pick" style="background-color:rgb(255, 0, 150);" onclick="hello(this.style.backgroundColor);"&gt;&lt;/div&gt;
  &lt;div class="pick" style="background-color:rgb(0, 255, 150);" onclick="hello(this.style.backgroundColor);"&gt;&lt;/div&gt;
  &lt;div class="pick" style="background-color:rgb(150, 0, 255);" onclick="hello(this.style.backgroundColor);"&gt;&lt;/div&gt;
  &lt;div class="pick" style="background-color:rgb(0, 150, 255);" onclick="hello(this.style.backgroundColor);"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The colors are shown as</p>

<p><a href="https://i.stack.imgur.com/OiUSr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OiUSr.jpg" alt="enter image description here"></a></p>

<p>This is the code to my <strong>function hello()</strong></p>

<pre><code>&lt;script&gt;
  function hello(e){
    var rgb = e.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(',');
    myColor.r = parseInt(rgb[0]);
    myColor.g = parseInt(rgb[1]);
    myColor.b = parseInt(rgb[2]);
    curColor = myColor;
    console.log(curColor);
  }
&lt;/script&gt;
</code></pre>

<p>But I want to implement a color picker. I have the script for color picker as well.</p>

<pre><code>&lt;input type="color" value="#ffffff" onchange="clickColor(0, -1, -1, 5)" id="html5colorpicker"&gt;
</code></pre>

<p><strong>MY QUESTION IS THAT:</strong> How can I integrate color picker with my current code? Any help would be much appreciated.</p>