“Colour the World” – my version of an iPod Touch Colour Picker done with SilverLight

Sub Heading 5


I shouldn’t have to tell you of the importance a great colour scheme has on the success of your application or web site.

To create that amazing user experience you have to have a great UI and one of the most important ingredients to a great UI is having a perfect “colour palette”.

Conceiving a perfect colour palette is an art form, great artists devote there whole lives to the study of colour (amongst other things of course).

I am not an artist, and my colour theory is shockingly poor.

I actually cheat when it comes to my colour palettes…  I use

1) Adobe’ Kuler – a RIA flash/flex application that helps you create a good colour palette with virtually no understanding of colour theory.


2) ColourLovers.com – a web based community that specializes in a colour palettes and patterns as well as the community around the palettes. They also have a javascript colour picker called Copaso, brilliant application.


Kuler also has community features but it is not as lively and involved/fun as ColourLovers.com. My preference is ColourLovers first then Kuler a close second.

I use both to conceive my colour palettes, BUT today I’m going to embark on creating my own colour picker and  palette community. I want to learn the theory behind RGB and Hue/Saturation/Brightness. I want to be able to look at a colour picker and know what those values actually mean.

I want to build this colour picker in such a way that it will look amazing on Apple’s iPod Touch or iPhone. I’m hoping that one day SilverLight will work on an iPhone or iPod Touch (here’s to wishful thinking)

Great Sample that got me started

 The fist step is to see what other’s have done. There is a brilliant sample that gave me most of what I needed to know regarding RGB (Red Green Blue) HSB (Hue Saturation Brightness). The “Scribbler” sample had exactly what I wanted in it for learning the in’s and out’s of basic colour pickers. I can’t find the link to the sample but if you “Google” it or “Live” it then you should be able to find it again. If you can’t shoot me an email and I’ll send you the copy I have.

Colour the World – SilverLight RIA

“Colour the world” is the name I’ve decided to give this SilverLight RIA.

I want to create a colour picker that has dynamic resizing so that it can scale to the size of an standard desktop application or an iPod Touch screen. (The version of my sample demonstrates this ability but the resizing is not 100% perfect)

Also the design of the screens are meant to compliment apple’s iPod touch, in that it has minimum clutter on the UI only showing the bare minimum that it can get away with.

Here are the screen shots of my SilverLight colour picker… It’s only the first version so expect it to have heaps of bugs and for it to change over time.

[screen 1 is the main colour picker screen]


[screen 2 is the details screen, shows the RGB/HSB information]


[screen 3 is the “save screen”, let’s you save it to the community where others will be able to use it or comment on it]


[screen 4 is the “community screen”, let’s you see what other palettes people have saved. Other than showing what others have saved it really is just a view of palettes, over time I will build out this communityh to allow for comments. For the demo purposes it will suffice]


[screen 5 is the same application but shown in a resized format, just resize the browser to play with it. As I mentioned earlier it isn’t perfect but it will do for the demonstration]


Click the following image to play with the demonstration. You need SilverLight 1.1 to run it.

As always’ the source code for this SilverLight Application is free. Currently it sits in a very messy state, but still readable. It needs a lot of refactoring, I’ll save that for the next version (hopefully after SilverLight 2.0 is released).

Source code: My SilverLight Colour Picker Source Code “Colour the World”

You can find this in the “A Beautiful Website” section of this site, over time I may move it into it’s own area but for now it will sit there!



This was my first foray into the world of colour theory and I have to admit I’m loving it. “Colour the World” is a project I envision continuing to update over time,  ultimately adding new features that will rival those of “ColourLovers” and Adobe’s “Kuler”. I do this not because I want to compete with them BUT because it’s a great learning experience for me.

What amazes me is the ease at which I created this application using C# and Blend. This new world of SilverLight is really going to be huge, applications of the future are going to be immersive experiences that really captivate the visual senses. I can’t wait to see what other’s build !!! 

Please leave comments on what you think of the RIA, also remember to share what you can 🙂

Oh and if you like the article or application feel free to kick it 🙂  kick it on DotNetKicks.com

15 responses to ““Colour the World” – my version of an iPod Touch Colour Picker done with SilverLight

  1. Oh my god… that is a beautiful application!!

  2. I was about to go to bed when I got and update in my RSS reader saying you had posted.

    I am always waiting for you to blog about stuff, this time is no exception. You are really a great designer/developer.

    Makes me ashamed to call myself one!

  3. Pingback: Silverlight Cream for January 11, 2008 -- #168

  4. this needs to be made into a mobile or ultra mobile app. With a few more key features it would be one hell of a killer app! (adding picture editing etc) really love the UI

  5. i like it, i think it very thought out, i can only imagine what you will be able to do when silverlight 2.0 beta comes out.

  6. i cant wait to see what 2.0 has to offer. Im waiting BIG TIME!

  7. looking good…. I like

  8. Thanks Mike… your name rings a bell 🙂 ..

    My goal with this is to replicate what Adobe’s Kuler does. As you probably know, but just informing the people out there that don’t, Adobe’s Kuler is a colour palette community that let’s people create palettes and share them .

    More importantly these created palettes can be consumed via API’s into RIA Flash/Flex apps. Allows the application to be personalized with different palettes, similar to how CSS stylesheets can re-theme a website.

    I will create a future post that will take the community palettes and allow an SilverLight RIA to change it’s colour theme using them .The RIA will consume the “Colour the World” webservice and allow the user to choose from the palettes.

    All a part of the big SOA picture that were all moving towards 🙂

  9. Purty.. Very Purty…

    (Sorry I’m late to the party, head in the clouds and all)

  10. everything is purty with Silverlight and Blend. And head in the clouds? Mine’s always there!

  11. Is it true that you can only follow 2000 on your twitter account…..someone twitted that tonight…..but I see that you and so many others are following many more than that…..also is it best to follow everyone who follows me or should I be selective and only follow back those that I think I really want to hear from? Advice is appreciated.

  12. I enjoy, lead to I found just what I was having a look for. You’ve ended my 4 day lengthy hunt! God Bless you man. Have a nice day. Bye

  13. This post will assist the internet users for setting up new web site or even
    a blog from start to end.

  14. Pingback: Angry Birds Space

  15. If you have dreams but they do not worry you it means they are not big enough for you

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s