Adobe Kuler is a great example of a Rich Internet Application that provide great value directly in the browser. Kuler is a tool that helps you create color themes by applying different rules to find matching colors. You start by selecting a base color, and Kuler will help you find four matching colors. You can even use Flickr photos as a basis for your color theme. Adobe Kuler has a social aspect to it as well. You can create an account and save your colors online and share them with the community. People can rate and commend on your themes, or create new color themes based on an excising one. Kuler is being a good Web 2.0 citizen and offers a REST-full API that lets you build your own applications using the colors of the community.

Whenever I find a service I like with an open API I just can’t leave it alone. So today I’m announcing the Colorful Expression add-In.

Colorful Expression is an add-in for Expression Blend and Expression Design that brings you the Adobe Kuler community directly into your toolbox. It adds a new palette to your design environment, making it easy to leverage the community to find the perfect color theme for your application or design. The add-in also available as a standalone application, making it useful for web developers working in Visual Studio or Expression Web to select colors for your CSS style sheets.

Expression Design

Last week Jose Fajardo blogged and complained that Expression Design doesn’t get enough love. I totally agree, and am going to give it some love by making it more colorful.

The key feature of the add-in is to select colors. The eyedropper tool in Design lets you click anywhere on the screen to select a color. Simply click the eyedropper in your color panel, and click on one of the colors in the Colorful Expression panel.

You can also copy colors to the clipboard by clicking the copy-button. When you paste the color theme onto the design surface you’ll get five rectangles and the name of the color. This lets you collect interesting themes directly in your design file by copying them onto the document.

Expression Blend supports exporting and importing color swatch libraries through a simple XML file format. Colorful Expression allows you to save a theme as a swatch library you can import into Design. The screenshot shows the “Buddah in Rain” theme imported to the swatch library.

Expression Blend

The add-in works almost the same way in Blend as in Design but with some minor differences. In Blend you can use the Ctrl+C key combination to invoke the copy command, making it a lot easier to copy/paste themes onto the design surface. When you paste a theme onto the surface you will get a grid containing five rectangles and a text block. The rectangles are painted with a solid color brush resource, and each of the colors gets added to the resource collection of the page. If you go into XAML-view and paste the theme you will get five solid color brush resource elements you can add to any resource collection. The Blend add-in also supports drag and drop, letting you drag color themes onto the design surface.

Standalone application

The standalone application gives you most of the same features as the Blend and Design add-in. You can copy or drag themes into Blend, and you can save Design swatch libraries. The stand alone application is useful if you don’t want to run the add-in all the time or if you don’t use Expression Studio. You can also hold down control and click a single color to copy it to the clipboard as a RGB HEX color. That way you can use the standalone application as a color picker for any application using HEX colors, such as CSS style sheets.

Ideas for next version

I want to keep the add-in simple and focused, but I do have some ideas for new features. The first thing I’m planning to implement is a color provider for the COLORLovers site. I also want deeper integration with Blend and Design, especially around managing resources in Blend.

It would also be nice to support Expression Web and Visual Studio 2008 so that web developers can use it to get CSS colors for their web projects.

Another feature missing is support for the light Expression Studio color theme. The current look and feel is based on Hadi Eskandari’s Expression Clone theme and only supports the dark theme. It should be fairly simple to create a new theme matching the light colors.

You can suggest new features in the discussion board or report bugs in the issue tracker.

Download and installation

The project is released on http://www.codeplex.com/colorful, and the initial release contains the compiled version of the add-in for Design 2.0, Blend 2.0, Blend 2.5 June CTP, Blend 2.0 SP1 Preview and as a standalone WPF application. To install the add-in simply copy the files into your Blend or Design director, and launch the EXE file with an extra parameter.

I.e: “Blend.exe –addin:Colorful.Blend.AddIn.dll” or “Design.exe –addin:Colorful.Design.AddIn.dll”.

You can also right click your application shortcut and select properties to change the target of the shortcut. Add the above parameters to the target to launch Blend or Design with the add-in every time you click the shortcut.

Getting involved

If you would like to get involved in the project drop me an e-mail at jonas@follesoe.no. You can also suggest features or report bugs in the discussion forum and the issue tracker.

To build the project you need to have Expression Blend or/and Expression Design installed. The add-in has a dependency on Microsoft.Expression.Framework.dll, which in turn has a dependency on Microsoft.Expression.Diagnostics.dll, Microsoft.Expression.Interop.dll and Microsoft.Expression.Licensing.dll. For licensing reasons these assemblies are not checked into the source control three.

If you want to run the add-in from Visual Studio I recommend running Visual Studio 2008 as administrator and then change the output directory of your debug build to the installation folder of Blend/Design. Then change the startup application to the Blend.exe/Design.exe with the correct startup arguments. That way you can hit F5 inside Visual Studio to launch Blend/Design in debug mode. You can set breakpoints in your code and test/debug the add-in this way.

Happy coloring!