Create a Color Picker, similar to Photoshop's, using Javascript and HTML Canvas

Question

I am not at all versed in Computer Graphics and am in need of creating a color picker as a javascript tool to embed in an HTML page.

First, and looking at Photoshop's one, i thought of the RGB palette as a three-dimensional matrix. My first attempt envolved:

<script type="text/javascript">
        var rgCanvas = document.createElement('canvas');
        rgCanvas.width = 256;
        rgCanvas.height = 256;
        rgCanvas.style.border = '3px solid black';
        for (g = 0; g < 256; g++){
            for (r = 0; r < 256; r++){
                var context = rgCanvas.getContext('2d');
                context.beginPath();
                context.moveTo(r,g);
                context.strokeStyle = 'rgb(' + r + ', ' + g + ', 0)';
                context.lineTo(r+1,g+1);
                context.stroke();
                context.closePath();
            }
        }

        var bCanvas = document.createElement('canvas');
        bCanvas.width = 20;
        bCanvas.height = 256;
        bCanvas.style.border = '3px solid black';       
        for (b = 0; b < 256; b++){
            var context = bCanvas.getContext('2d');
            context.beginPath();
            context.moveTo(0,b);
            context.strokeStyle = 'rgb(' + 0 + ', ' + 0 + ', ' + b + ')';
            context.lineTo(20, b);
            context.stroke();
            context.closePath();
        }

        document.body.appendChild(rgCanvas);
        document.body.appendChild(bCanvas);
    </script>

this results in something like

My thought is this is too linear, comparing to the ones i see in Photoshop and on the web. I would like to know the logic behind the color mapping in a picker like this:

I don't really need the algorythms itself, i'm mainly trying to understand the logic.

Thanks

Answer 1

I implemented a canvas based color picker once. I did it because most color picker that I found on the web used too many static images and I didn't want to cause extra requests.

The color generation is based on a 10K javascript entry that I found. I Just fixed some bugs and did some refactoring on the code.

All you have to do is to include a <input type="color-picker" /> in your code and call the PICKER.bind_inputs() after the DOM is loaded.

Here is a jsFiddle with my code:

http://jsfiddle.net/mShET/1/

Bear in mind that The HTML5 specification already supports a color picker form input. But currently, only Opera has implemented it.

Answer 2

To answer your question about the logic behind the Photoshop picker: it looks like the colour picker is based on the HSB colour space. The hue (H) is picked by the vertical slider on the right, the saturation (S) is picked by the horizontal axis of the colour picker area, and the brightness(B) is picked by the vertical axis of the colour picker area.

To quote from Wikipedia:

The original purpose of HSL and HSV and similar models, and their most common current application, is in color selection tools. At their simplest, some such color pickers provide three sliders, one for each attribute. Most, however, show a two-dimensional slice through the model, along with a slider controlling which particular slice is shown.