Create Gradient For Color Selection With Html5 Canvas (all Possible Rgb Colors)

Is it possible to greate a linear gradient which contains all possible RGB colors (only red, green, blue - no alpha values) for a linear color picker. So far I've tried it with the

Solution 1:

You may want to ask yourself what do you want to do with these colors, and why. Also, you might consider the kind of users you will have and what they will want to do with the colors.

As the other responders have noted, the RGB color space is 3-dimensional. But there is more than one way of mapping those three dimensions. There is also Hue/Saturation/Value (HSV). Many applications with color pickers have both, side by side or in separate tabs.

Hue, the H in HSV, can be thought of as position along the rainbow, starting at red #ff0000 and cycling back to red again. This is often represented as a position along a circle, with red at 0 degrees/ 360 degrees, green #00ff00 at 120 degrees and blue #0000ff at 240.

Saturation refers to "how much color is in the color", with 100% saturation being the full color and 0% saturation representing monochrome black, white and grey. Value represents how bright or dark the color is, with 0% value being black #000000 for any hue, and 100% being full brightness, which will be the full color for that hue if the saturation is also 100%.

Here is a screenshot of the Gimp color picker. You can see that it has sliders for Hue, Saturation and Value above the sliders for Red, Green and Blue.

The values for Hue range from 0 to 359 degrees, Saturation and Value range from 0% to 100%, and Red, Green and Blue from 0 to 255 (ff in hexadecimal). The triangle rotates around the rainbow - the Hue values - and the inside of the triangle displays the 2-dimensional Saturation - Value color space for that particular hue. You can play and experiment with all these variables and learn how RGB and HSV values relate to each other.

Depending on your application, you might want to take a look at the traditional "web safe colors". These were more important in the early days of the Web when everything was new, browser compatibility issues were prevalent and web pages were viewed on CRT screen monitors. The "web safe" colors had the best chance of looking consistent on different screens from different vendors. Even though this is not important anymore, they still make a good starting point for colors on almost any computer application, from which you can diverge as desired.

The "web safe" colors are the set of colors generated by using multiples of 17 for the RGB values, with special emphasis on multiples of 51 (3 x 17).

Why 17? Because 11 in hexadecimal is equal to 16 plus 1, or 17 in decimal notation. 255, which is 2 to the 8th power minus 1, is 15 times 17, or ff in hexadecimal digits. This makes the values of 0%, 20%, 40%, 60%, 80% and 100% fit nicely into 0, 51, 102, 153, 204 and 255, which is written neatly in hexadecimal notation as 00, 33, 66, 99, cc, and ff.

Solution 2:

+1 Philipp is spot on. RGB colors are not well represented in 2d space because rgb has 3 components that all must be represented.

The closest you can get to geometrically representing all rgb combinations is a cube (makes sense since a cube has 3 axes and rgb has 3 values).

Here's an illustration from Wikipedia: http://en.wikipedia.org/wiki/RGB_color_space

You could use this as a starting place and use a slider to show each color "layer" from front to back.