logo

Full Colour Spectrum Color Picker For Flex

Flex comes with it's own built-in ColorPicker component, which looks like this:

A collapsed and expanded ColorPicker control

It works well, but you have to click on it little picker square (see above, left) to open the picker itself and, once open, you're then limited to the web-safe colour palette. 

The other day I wanted a picker that was always on show and allowed any colour to be chosen. After a search I found this solution which builds a spectrum of colours on the fly (worth a look just to see what is possible with Flex). The trouble with it, for me, was the lack a greyscale and being unable to choose white as a colour. Not having time to figure out how to modify it to meet these two requirements I took a different tact. Instead of generating the spectrum on the fly I embedded the following image:

spectrum

This is based on this image, which I modified in Fireworks to add the grey-scale bar and the white fade at the top.

I then embedded this Image in the Flex component and came up with this (working demo):

Either scripts and active content are not permitted to run or Adobe Flash Player version 10.0.0 or greater is not installed.

Get Adobe Flash Player

Click on the colour swatch to change the app's background colour. You can download a demo Flex app here with the self-contained component (based loosely on the one linked to above). Enjoy.

Comments

  1. Flex is very powerful indeed but for me a Flex component always is a foreign particle in a webpage. At least it makes me feel that it is...

      • avatar
      • Jake Howlett
      • Thu 14 Apr 2011 07:16 AM

      Agreed. I rarely (never!) use Flex as a component of a webpage. Only for demo like the above. The colour picker is used inside a fully-blown Flex app.

  2. Clever. Shouldn't be too hard to implement in JavaScript if the map is set up to known colors at a computable coordinate. Just need to figure out how to convert x and y to RGB. Seems like I've seen that done in JavaScript already, come to think of it... not that that's the point, but that get's you on a web page without a full flex app.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Thu 14 Apr 2011

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

Elsewhere

Here are the external links posted on the same day.

More links are available in the archive »

More Content