CODEWITHSUNDEEP
javascriptgraphics
André Alçada Padez
André Alçada Padez

Reputation: 11628

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

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
3D RGB color map

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: photoshop color picker

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

Thanks

Upvotes: 14

Views: 19475

Answers (4)

Naftali
Naftali

Reputation: 146360

See Here: http://jsfiddle.net/maniator/GXuqb/2/

Using ColorPicker

See the code for it here: http://www.eyecon.ro/colorpicker/

Upvotes: 2

SoftMoon-WebWare
SoftMoon-WebWare

Reputation: 1

I created a JavaScript project, "MasterColorPicker", that has 4 different canvas based color-pickers. It took me several months of both reading Wikipedia articles on "Color Wheel" as well as "HSB" and "HSL" and "RGB", and also working with the algorithms directly as I built each color-picker from scratch. One thing I focused on in this project is bringing the LOGIC of these color-spaces into an easy-to-understand and use format. My hope is that just using the project will help you to understand each color-space. As far as mapping from one space to another, for example, the relationship between RGB and HSL, you must really expand your 3D imagination to begin that. That is where I hope this project can help. But really, don't bang your head against the wall for years trying to figure out these algorithms. Besides Wikipedia, see:

http://www.easyrgb.com/index.php?X=MATH

All the formulas you can digest. EXCEPT: Wikipedia talks about "Chroma" in one of their articles and says not to confuse it with "saturation". My MasterColorPicker project adds another color-space, hue-chroma-gray (HCG), and the source code for this project documents the formulas for converting between HCG and RGB. With HCG, you can find the organization of the "Web-Safe" colors, and the "RainbowMeistro Color-Picker" in the project will give you a clear visualization of that color-space. You can try the project and download the JavaScript/HTML files to use it on your own system (open-source and free) from here:

http://softmoon-webware.com/MasterColorPicker_instructions.php

Peace!

Upvotes: 0

Gareth
Gareth

Reputation: 5718

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.

Upvotes: 3

Cesar Canassa
Cesar Canassa

Reputation: 20253

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.

Upvotes: 7

Related Questions