How to create your Color Picker in Javascript?

I know that there are many similar scripts on the net for different taste and color. But I wanted to write my own from scratch and the first thing I did was googling in Google to look for an algorithm for creating (color picker). In the end, I was disappointed because I didn’t find anything except ready-made scripts, which is probably why after I figured out and wrote my color picker, I decided to share my experience in writing it.



Since I write on pure js without libraries (not counting the one I write myself :)) in this post there will be only hardcore javascript.

What you need to know to write cp (abbreviated color picker):

• The Basics of Drag'n'Drop
• Understand Canvas a bit (Hue scale will be drawn on it)

1.CSS & html

<div class="picker" id="primary_block" > <div id="line"> <div id="arrows"> <div class="left_arrow"></div> <div class="right_arrow"></div> </div> </div> <div id="block_picker"> <img src="img/bgGradient.png" class="bk_img"><div id="circle"></div> </div> </div> 

I think the comments here do not need the simplest structure.

Now css

 .right_arrow { width:0; height:0; left:23px; position:absolute; border-bottom:6px solid transparent; border-left:10px solid transparent; border-top:6px solid transparent; border-right:10px solid black; }//    .circle { width:8px; height:8px; border:1px solid black; border-radius:50%; position:absolute; left:0; top:0; cursor: default; -moz-user-select: none; -khtml-user-select: none; user-select: none; -webkit-user-select: none; } 

Of course, this is not the entire css code, but there is nothing more interesting (only the positioning of the elements).

')

2.Javascript

And now let's get down to the most interesting, to Javascript.

First you need to finish the structure (ie, from drawing the Hue scale), and I will do it on the canvas (to reduce the number of images).

 gradient: function(canva,w,h){ /* canva-  canvas h -   w-  */ var context, gradient, hue; context = canva.getContext("2d"); gradient = context.createLinearGradient(w/2,h,w/2,0); hue = [[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,255],[255,0,0]]; //   hue  rgb for (var i=0; i <= 6;i++){ color = 'rgb('+hue[i][0]+','+hue[i][1]+','+hue[i][2]+')'; gradient.addColorStop(i*1/6, color); }; context.fillStyle = gradient; context.fillRect(0,0, w ,h); } 

You can watch and “touch” what happened here . Further trivial hanging of events will go (therefore I will pass this code).

Now we will analyze what color model we will use, it will be HSV

HSV is a color model in which the color coordinates are:



Hue - color tone (for example, red, green or blue-blue). Varies in the range of 0-360 °, however, sometimes it is reduced to the range of 0-100 or 0-1.



Saturation - saturation. Varies in the range of 0-100 or 0-1. The larger this parameter, the “cleaner” the color, so this parameter is sometimes called color purity. And the closer this parameter is to zero, the closer the color is to neutral gray.



Value (color value) or Brightness - brightness. It is also set between 0-100 and 0-1.

how to implement it on our cp is clearly shown below (Figure 1)

We have the Hue scale, we add a change to Saturation and Value (color value).

Since the value of S and V is 0-100, the question may arise:

What to do if the width and height of the block is more than 100?

-

 var px_X = elem.clientWidth / 100; /*   px    . :   180 180/100 ,    1       1,8; */ var S = left / px_X;//   left   "" (div c id = "circle")  Math.round(S);//    

When the “circle” is shifted, we track the changes in S and V (for the visual effect of a color change, we change the background under the picture (the picture is semi transparent)).

But in order to change the background you need to convert from HSV to RGB, I’ll not go too far with this stage because there’s a formula and if you compare it with the code below, everything will be clear.

  hsv_rgb: function (H,S,V){ var f , p, q , t, lH; S /=100; V /=100; lH = Math.floor(H / 60); f = H/60 - lH; p = V * (1 - S); q = V *(1 - S*f); t = V* (1 - (1-f)* S); switch (lH){ case 0: R = V; G = t; B = p; break; case 1: R = q; G = V; B = p; break; case 2: R = p; G = V; B = t; break; case 3: R = p; G = q; B = V; break; case 4: R = t; G = p; B = V; break; case 5: R = V; G = p; B = q; break; } return [parseInt(R*255), parseInt(G*255), parseInt(B*255)]; } 

I wrote it myself because what I found on the network did not work correctly.

I hope I gave the basic knowledge for creating cp in this post, so I’ll finish with this because I can add functionality for a long time to add conversion to different color formats ...

3. Let's summarize

That's what I got the demo .

In this post I tried to explain how to create cp, without going deep into the code because I didn’t see the point in Drag`n`Drop, there is nothing complicated!

Thank you for your attention with you was CyBer_UA and this is my first post on javascript (hopefully not the last).

The PS code in the final example is crooked (it was written a long time ago), it’s just just now that I got around to write this post.