your favorite color picker?

[xouper]

I've recently begun teaching a private course in programming using Visual Basic, and I've decided that for the first project we are going to attempt to make the ultimate grandaddy of all color picker utilities (for Windoze®). We might not fully succeed, but I suspect the effort will be educational, which is the main purpose.

In the past, I have had to live within the limitations of the various color pickers in programs like Photoshop, CorelDraw, Windows Paint, Microsoft Office, etc. For our project, I would like to look at as many as I can of other color pickers available, either stand-alone or built into another application, to see what features and color models are being used. And then incorporate the best featues of all of them into a single utility, and including some features that I have not yet seen anywhere.

So, getting to the point of this thread:

What are your favorite color pickers?


What features do they have that you especially like?


What features are missing that you wish they had?

Any other comments would also be appreciated.

Here's a key question - are there any color pickers that do more than 24-bit color (8 bits for each red, green, blue)?

[Corona688]

What are your favorite color pickers? Hm. I just use whatever one's handy, generally gimp's builtin color picker, or kcolorpicker.What features do they have that you especially like? The ability to pick up colors from arbitrary positions on the screen.hat features are missing that you wish they had? Well, they're all the square ugly color-pickers we're all familiar with. I like the three-corner triangle model better, but I forget where I saw that.Here's a key question - are there any color pickers that do more than 24-bit color (8 bits for each red, green, blue)?Well, I seem to recall Apple having one or two machines with 16-bit subpixels, but it never caught on because the miniscule increase in quality wasn't worth it to anyone. If you wanted to do 32-bit color, an alpha channel would be a unique feature I haven't seen in other color pickers.

[xouper]

I'd forgotten about picking colors from anywhere on the screen, but that's an excellent idea. The main color picker window could go "hidden" while you pick colors from elsewhere on your screen. Perhaps it could have a "magnifying" option (similar to that built into Windows) that can aid in choosing specific pixels to pick. Or, something I have often wanted in an eydropper like that, an option to "slurp" the average color of a group of pixels that are textured or dithered.

I'm not familiar with the triangle picker. I'll try to find one.

In the meantime, here is my own version of the hexagon colormap I've seen around:

http://www.xoup.net/img/hex-ff.gif http://www.xoup.net/img/hex-00.gif

Not shown are the four intermediate gray maps (the center hexagon cell ranges from ff, cc, 99, 66, 33, 00).

In one sense, the above hexagon map is simply a specialized 2D verison of the rgb color cube. Or in another sense, it is a specialized version of the color circle as used in the HSL/HSV color model.

[pescifish]

hat features are missing that you wish they had? Well, they're all the square ugly color-pickers we're all familiar with. I like the three-corner triangle model better, but I forget where I saw that.This probably isn't the triangle you meant, but Corel's Painter uses a combination of a color wheel with a triangle that helps you get to a color you want quickly.

You can move the cursor around the outside color wheel to get the color in the ballpark and then use the triangle to get to the detail.

I included a screenshot showing the "About" dialog with the version of Painter Classic (came free with my Wacom drawing tablet as did Adobe Photoshop Elements.) I don't know if the software has changed since I got it. The screenshot shows some of the other cool controls that make Painter my favorite drawing software.

[xouper]

pescifish: I included a screenshot ...
Excellent. I hadn't seen that one before. That's what I'm asking about, the various ways different color pickers pick colors. I'm mildy surprised that they don't have red at the top of the circle, since in the HSV model (which is apparently what they are using, red is a hue angle of zero degrees, green is 120 degrees, and blue is 240 degrees.

Our color picker will have a similar "circle" slider as part of the HSL/HSV color model, but I hadn't considered offering a triangle also, since we have separate linear sliders for the saturation, value, and luminance. But the option to have a triangle "slider" is nice too, I shall add it to our list to be implemented.

The triangle in that color picker is a vertical half-slice out of the color cone model (actually a double cone with the bases glued to each other). Defining the left edge of that triangle (the white to black gradient) as an axis, rotate the red point about the axis, changing color as you go in accordance with the color circle.

Trivia question: In the color wheel of the HSV model, what resolution is required to represent the hue angle and be able to pick any color from the 24-bit rgb model that has 100 percent saturation and value (i.e. pure color)?

Or to put it another way, how many distinct colors in the 24-bit rgb model have 100 percent saturation and value, and thus represent a distinct hue angle, and how does that map to the 360 degrees of the color circle?

Answer: There are 6*255=1530 distinct pure colors around the color circle (i.e. that have 100 percent saturation and value). Or, to say it another way, there are 255 colors per 60 degrees, which is slightly more than 4 colors per degree (the distance between each pure color is approximately 0.2353 degrees).

At the moment, we are using a color angle with a precision of one decimal digit (one tenth of a degree). Thus, if a specific hue angle is entered from the keyboard, it will map to one and only one pure color. For example, orange, #ff7f00 = 29.9 degrees and #ff80 = 30.1 degrees. With 24-bit color it is not possible to specify a pure color with a hue of exactly 30 degrees.

However, if we consider other saturation levels, we can get exactly 30 degrees of hue angle. For example: #ff9933 has the following exact HSV numbers:

hue = 30.0 degrees
saturation = 80 percent
value = 100 percent

#ffcc99 has similarly exact HSV numbers:

hue = 30.0 degrees
saturation = 40 percent
value = 100 percent

The traditional "websafe" colors, which have nice rgb numbers, also tend to have very nice round HSV numbers. :)

The math geek in me strikes again. :eek:

[Corona688]

I included a screenshot showing the "About" dialog with the version of Painter Classic (came free with my Wacom drawing tablet as did Adobe Photoshop Elements.) I don't know if the software has changed since I got it. The screenshot shows some of the other cool controls that make Painter my favorite drawing software. That's it! I like that color hexagon, though. That'd be neat to try.

[Corona688]

I just had an idea! When I use a color picker, I generally spend a long time making tiny fiddly adjustments because there is not enough detail to pick exactly the color I want right off the bat. I can't see the exact color I want, I can only approach it then poke around with numbers.

Maybye you could have two different pickers in one, both your pretty hexagon swatches; the coarse controls, which contain the entire hue range, and the fine controls, which let you click on a color within the range specified by the coarse controls. Two of those hexagons in a row could let me pick the exact hue I want without further fiddling with raw RGB values. That would rock.

Another nice thing about picking colors with the hexagons as opposed to any sort of linear or rotational slider system is they give you easy access to pure colors -- just click on the corners -- where an HSV slider system makes that a real chore.

[xouper]

xouper: I'm not familiar with the triangle picker. I'll try to find one.
Now that I know what you meant by triangle picker, I have used a variation of that in the vbcode color tutorial I once posted on another forum. I didn't think of it in terms of a triangle, but that's exactly what it was.

http://www.xoup.net/img/bluetriangle.gif

The horizontal axis is the blue value and the vertical axis is the yellow value. (For the tutorial, I was only showing the websafe colors, to make the point more obvious.)

Here is the full color triangle picker I would use now (256 x 256 pixels):

http://www.xoup.net/img/bluetriangle.png

The above triangle shows all possible blue colors (hue = 240 degrees).

Again, the horizontal axis represents the blue value and goes from 0 to 255 (one for each pixel). Likewise, the vertical axis represents all possible yellow values. On the diagonal are the 256 possible gray colors, from black to white.

You could pick your blue by moving the mouse pointer within the triangle, or you could use the blue or yellow sliders on each axis to fine tune. Or fine tuning could be done with the saturation, value, or luminance sliders, since they would also still be visible.

Re-arranging the above triangle into an equilateral triangle (as they do in Corel) loses some of the possible colors. In order to get them all, mapping one pixel per color, the blue and yellow axes must be perpendicular to each other.

[xouper]

Corona688: I just had an idea! ... Maybye you could have two different pickers in one, both your pretty hexagon swatches; the coarse controls, which contain the entire hue range, and the fine controls, which let you click on a color within the range specified by the coarse controls. Two of those hexagons in a row could let me pick the exact hue I want without further fiddling with raw RGB values. That would rock.
I hadn't thought of that. Interesting. I'll put that on our list of things to to experiment with.

In the first hexagon, the adjacent colors are 51 values apart, so it may not be feasible to do it in only two steps. Maybe three.

For example, if I am understanding you correctly, if you zoom-click in a hexcell in the first hexmap, that cell becomes the center cell of the next hexmap. The six adjacent cells from the first hexmap would then become the outside six corners of the second (expanded) hexmap. In the second hexmap, adjacent colors would be 10 values apart, perhaps. It would be like a zoom function.

Zooming in one more level would get you a third hexmap where the adjacent colors are only 2 values apart. I'm just guessing here, since I haven't tried it yet.

In any case, I like your idea. In fact, in general, I have often wished for a better (more accurate) way to make fine adjustments when using sliders. The way most sliders are implemented, they are decent for coarse adjustments, but trying to wiggle them one pixel at a time for the fine adjustments is sometimes a pain.

I have some thoughts on various ways to solve that and one of them was some kind of zoom function, although I hadn't thought of zooming in on the hexagon maps like you suggested. Great idea.

[xouper]

For those who have used the color picker in Adobe Photoshop, what do you think of my idea as described here:

http://www.xoup.net/cp/pscp.html

If someone knows where on the internet that particular issue has been discussed (triangle versus square), it would save me a whole lot of effort trying to find it since I don't even know where to being looking.

[livius drusus]

I don't know if I have a favorite color picker, frankly, but just to add to your ever-growing collection, xouper, here are the ones I use most often in PaintShop Pro. I find the first one is particularly useful because of the little darts you can drag vertically and horizontally.

http://www.freethought-forum.com/images/pspcolor.jpg http://www.freethought-forum.com/images/pspcolor2.jpg http://www.freethought-forum.com/images/pspcolor3.jpg

[lpetrich]

I decided to check on MacOS X's color picker, and I found that it offers:

* Disk with white in the middle and saturated colors around its rim; a black to white intensity slider is next to it. HSB with the first two being in that disk.

* Slider sets (every slider's value is in an editable text field):
-- Grayscale (brightness)
-- RGB (red, green, blue)
-- CMYK (cyan, magenta, yellow, black)
-- HSB (hue, saturation, brightness)

* Swatches:
-- Apple (the eight corners of the color cube)
-- Developer (for the user-interface widgets)
-- Crayons
-- Web Safe Colors (evenly spaced over the color cube)

* Image:
-- Spectrum (like default Windows color picker)

* Crayons (graphic of different colors of them, with names like "snow" for white and "licorice" for black)

Adobe Photoshop's color picker is a square that shows two dimensions of color variation, with the third being a nearby slider, and chooosable with nearby radio buttons:
* HSB
* RGB
* Lab (a variant of HSB)
All these values are shown in editable text fields, as are the CMYK values and the HTML hexadecimal value.

If anyone is interested, I can take screenshots of these.