Color Picker for Simple painting application javascript

Question

I am working on a simple painting application as part of my college course. We are told we have to design it using HTML5 and Javascript.

I have integrated a lot of the required functionality into the application but I was trying to make some sort of a color picker to allow the user select a color. At present I have a dropdown menu which is not very attractive on the UI.

I have created a color gradient from the following code:

var grad = colContext.createLinearGradient(20, 0, colCanvas.width - 20, 0);
        grad.addColorStop(0, "red");
        grad.addColorStop(1 / 6, "orange");
        grad.addColorStop(2 / 6, "yellow");
        grad.addColorStop(3 / 6, "green");
        grad.addColorStop(4 / 6, "aqua");
        grad.addColorStop(5 / 6, "blue");
        grad.addColorStop(1, "purple");

        colContext.fillStyle = grad;
        colContext.fillRect(0,0, colCanvas.width, colCanvas.height);

I would like it if when the users mouse is over the gradient the color is displayed in another box and then they mousedown to accept the color. I just don't have any idea how I could achieve this!? Is there a way of retrieving the data from the pixel the cursor is over?

Thanks for any help!