Creating a “Dynamic” Gradient for HSB Color Picker

Question

I want to create a color picker in WPF/C# similar to what I see in Photoshop.

As I move the Hue Slider, the gradient should update. I 1st want to know how can I create the gradient, where should individual color stops appear and what color values should they contain.

The above maybe harder to implement as the gradient composes of

• White - Red
• White - Black
• Black - Red

I can create individual gradients easily but how can I create a "composite" gradient like this?

A simpler alternative is have 3 sliders each for HSB values.

As I move one slider, colors on the 2 other slider should update. Any links or tips to get me started? I need to find a way to calculate colors on 2 other sliders as I move one. Eg. when I move the Hue slider from Red - Blue, Saturation and Brightness should update from say a unsaturated to saturated red to blue and dark to light red to blue.

Answer 1

About the gradient, I think you should draw it yourself. Take a look at WriteableBitmap.

The three sliders thing may be implemented like this:

• Implement an abstract IMultivalueConverter that convert two color component values to a gradient brush. The converter simply takes the two color component values, creates a gradient of the third unknown component value and returns it.
• Derive three concrete converters : HSToBGradientConverter, SBToHGradientConverter, BHToSGradientConverter.
• Bind the background of the slider's tracks with a multibinding on the respective color components and converter.

Answer 2

http://blogs.msdn.com/b/wpfsdk/archive/2006/10/26/uncommon-dialogs--font-chooser-and-color-picker-dialogs.aspx

Check out the color picker dialog. That should be a good place to get started.

Hope it helps!

Answer 3

As a note the gradient doesn't really consist of the three things you've listed. Your problem is that you are still thinking in terms of an RGB colour space it sounds like. In fact the whole point of that square is that it is doign a gradient from 0 saturation to 100% saturation left to right and 0 brightness to 100% brightness top to bottom.

I'd go for creating a square image and then for each pixel work out what saturation and brightness it corresponds to and then put that colour in (with the hue information of course).

I assume you have the capability of converting HSB colours to RGB colours already. If not this should be a first point of call and the algorithms to do this should be easy to find (if not shout and I can dig them out).