color as a function of slider position for setting a color

I am trying to create a color picker tool, that the user could use. The color picker has a slider of all colors and additional slider to set how dark the color is. Both are shown in image 1 and 2:

Image 1: picks color:

Image 2: sets how dark color is

I know that I could use a custom image for slider, and than match each color with a position, that would mean that I would need to create huge array and is a lot of work. The second slider that sets how dark color is would still need to be computed at runtime. I'm doubting this approach is any good and therefore ask you if you have a better idea on how to tackle this problem. Perhaps a mathematical function that connects color with slider position, color(x) where x is position of slider, would do the trick. So how to create a color as a function of position and create a slider based on this math function?

The way I have done this before is just by using images.

You could render each pixel based on the position of it etc... but that's very intensive stuff and the image won't actually change.

Various apps already have a hue gradient built in (Pixelmatr and Photoshop both do).

Just create a hue gradient image and use that behind the hue slider.

For the brightness slider create a transparent - black gradient image and place that over the slider. Now you can just set the slider colour and the gradient on top of it will make it look correct.

I used this technique to create this colour picker in an app of mine...

The "slider" on the left uses a single image with a hue gradient.

The "brightness / saturation" picker on the right uses a single image with a white-transparent gradient from left to right and a black-transparent gradient from bottom to top. Then I just have to set the background colour based on the hue.

Example

All colours in iOS use 0.0-1.0 based colours.

So all you need is a percentage of how far along each view you are.

So you have a position as a CGPoint and need to produce a percentage.

Each colour is "3 dimensional" (4 with alpha but I didn't include it) so you need three percentages.

For the hue view that is easy...

// put this inside the hue view (if you're not using a UISlider
// this works vertically you ay need yours to work horizontally.
- (CGFloat)hueValueForTouchPosition:(CGPoint)touchPoint {
    return touchPoint.y / CGRectGetHeight(self.frame);
}

This will return the correct hue value based on the position of the touch within the view.

Now you can use that to set the background color of the brightness view.

// this will change the background color of the brightness view to match the selected hue
CGFloat hue = [self.hueView hueValueForTouchPosition:touchPoint];
self.brightnessView.backgroundColor = [UIColor colorWithHue:hue brightness:1.0 saturation:1.0 alpha:1.0];

Now you just have to do the same with the brightness