Do you have any preference for colour picker styles?

A couple of people from the iOS conference last year have just made this open source... http://abitofcode.com/2012/01/weve-open ... ur-picker/

But I was trying to think of something (similar but different) that I can do on an iPhone.

I've come up with an idea (using HSV colours) that I think will work well.

The one in the link uses Hue around the outside with Saturation and Value (brightness) within the circle (Saturation is x-axis and value is y-axis).

You then tap outside the control to dismiss it and select the colour.

This is a bit large for the iPhone though. Do you guys have any ideas? I've come up with something that I will demo later (when I've got something working) but any input welcome.

The main problem I'm having is representing what is a solid cone (point down with the radius representing Saturation, the circumference represetning Hue and the height Value) in 2 dimensions. I was also trying to create a control that is easy to use and is self contained (i.e. doesn't have to open up a whole new screen to contain it).

My idea is to have a circle representing the selected colour. You can then tap to summon/dismiss. When summoned the Hue/Saturation colour circle "grows" out from behind the circle you tapped with a selector over the colour within the wheel (possibly "attached" to the middle circle). The wheel will be white immediately around the centre circle and full colour saturation aroundthe outside. As you move the selector the middle circle updates in real time. You can also press and slide up/down on the middle circle to change the Value (brightness). Sliding the Value will dynamically change the rest of the wheel to reflect the colours of that value. Then you tap the middle circle and the colour circle shrinks behind the middle circle leaving you with just the circle of the selected colour.

Rather than having a colour picker that changes the colour of a button etc... this would be a button that IS a colour selector.

It would have a full set of controls so that it could be used in any app just by calling it and placing it on the screen and the selected colour will be able to be accessed through delegate methods etc...

What do you guys think? I'll try prototype it tonight in a stand alone app.

The first one is what we use on some sites for colour choosers

It does the job even on a mobile device most of the time when styled correctly

I was thinking about just using that one but the problem with it is that you can only ever see one colour in the main part of the control.

I like the idea of being given all the colours in a single control and then selecting the darkness (value) of it. It also make it easier to choose a darker version of the current colour (for shading etc...)

I had a quick go and have now got a programmatically created colour wheel (but I may change to using an image as it's quite slow) but I had to spend the rest of the weekend moving furniture around so I didn't get the chance to do any more on it.

::EDIT::

Ahh! I was right! HSV can be simulated with gradients...

Hue is set programatically but Saturation can be represented by a gradient from trapsarent to white and Value is a gradient from transparent to black.

This will massively speed up my control

This is a rough sketch of what I was thinking...



The middle bit changes colour as you move the reticle around. Then you hold the middle bit to open up a darkness slider to change the darkness of the middle bit.

A slightly better version.

Lol! Now I'm just playing. Improving technique for creating the images tonight.

Change the white. Added arrows.

Not sure what the arrows are supposed to signify, tbh.

It will make more sense within an actual working control.

The centre circle is actually a slider for the Value part of HSV colourspace. Value is basically darkness.

The problem with colour spaces is that you need 3 dimensions to represent them.

In the image above.

Hue is around the circle (i.e. colour)
Saturation is radially ina dn out of the circle.
Value is a slider within the circle.

Hold it down and it will expand vertically to show the range of colours from black at the bottom to full colour at the top.

Tapping the circle will then select the colour and dismiss the control.

Right, managed to get a prototype working. Still needs some work but here are some screenshots.








At the moment all it does is change the colour of the background but it shows that I can take the colour from the control and do something with it.

I may change how the darkness slider works too. Not sure about it.


---
I am here: http://tapatalk.com/map.php?kjcrmw