Love Color? Microsoft Expression Color Palettes Now Available from ColourLovers.com

By Arturo Toledo, Sr. Product Manager, Microsoft Expression

ColourLovers.com, a community driven by a passion about color, palettes, and patterns, has now added palette download options for the Microsoft Expression design/development tools.

Microsoft Expression tools help professional designers and developers create rich user experiences with Windows Presentation Foundation (WPF) for Windows applications, Silverlight for rich interactive Web experiences that run everywhere, and standards-based Web solutions.

The ColourLovers.com community now allows you to download three new color palette formats:

Expression Design Swatch
WPF Resource Dictionary
Silverlight XAML Resources

Tutorial: Using ColourLovers.com with Expression

This tutorial provides all the info you need to use ColourLovers.com palettes with Expression Studio tools; it covers the following concepts:

Part I: How to find a color palette in ColourLovers.com
Part II: How to choose and download the right type of Microsoft Expression palette
Part III: How to use your ColourLovers.com palette in your Silverlight, WPF or Expression Design project

If you already know what ColourLovers is and you already know what Microsoft Expression is, then you might want to jump directly to Part III, which explains the way to use ColourLovers color palettes in Microsoft Expression tools. For more context about ColourLovers and Microsoft Expression, read Part I and II.

Part I: How to find a color palette in ColourLovers.com

Navigating through ColourLovers is very easy but if you are new to the community, let me describe it and offer a few quick tips.

First of all, what is ColourLovers.com? ColourLovers is a community of people who love to combine, juxtapose, and share colors.

For example, Mary in NY, a web designer, used a beautiful five-color palette in her latest website for a spa center. She shares her five-color palette with the ColourLovers community as inspiration—so you can use it in your own project. ColourLovers is filled with people who like to play with and experiment with color and share their color palettes with you— and they’re hoping you’ll be inspired to share yours.

Community members can rate the contributed color palettes, so you can see which are most popular. With just a few clicks on ColourLovers, you can download color palettes for your own projects. If you are a designer, this is a great way to learn more about colors and get inspired. If you are a web developer, this helps you to get a range of colors immediately, which will help you create better-looking and harmonic user interface designs without knowing a lot about color.

There are some easy steps for you to search and find color palettes in ColourLovers.com:

Register with ColourLovers.com. It’s free and the registration process is short.
Roll over the Palettes menu option in ColourLovers. This will reveal different categories of palettes for you; for example, Top, which means the community top-rated color palettes.
After you select an option in the menu, browse visually for color palettes you like. When you find a palette that you like, simply click it and you will be taken into the details page of that palette.
You can also search for palettes using the more advanced Search options in ColourLovers. You can search by score (rating) and you can even type in the HEX (hexadecimal) value of a color you are looking for within a palette; and you can search by Hue too. For example, say you are working for a client whose corporate colors include orange. You could select Orange from one of the Hue list boxes, and ColourLovers will return palettes within the Orange hue. Once you click the Search Palettes button, ColourLovers will show the results. Browse visually to find the palette you are looking for.
The Details view shows the color palette with options like Rotate, Width, or Create a Pattern. You also see download options for this palette.

In addition to the download options ColourLovers has traditionally provided, there are three new options for Microsoft Expression compatible palettes.

Under the color palette detail view, you will see each of the individual colors that integrate that palette with HEX and RGB values. One thing I love is that palettes have names and also colors! So you will notice each color also has a name. This is helpful for inspiration purposes, but also to help you identify colors afterwards. By having individual colors available here too, ColourLovers opens up the possibility for you to use that color palette as a starting point to create or customize your own color palettes.
You can also Create a New color palette of your own using the Create New option under Palettes in ColourLovers.
If you want more advanced color palette creation control, use COPASO, available under Palettes in the ColourLovers menu. This is a remarkable color creation tool where you can even import a photo and extract colors from it, ensuring you are preserving the essence of that photo by selecting a color palette out of it. Give it a try.

Part II: How to choose and download the right type of Microsoft Expression palette

As I mentioned earlier, ColourLovers now offers you the option to download three different Microsoft Expression palette formats:

Expression Design Swatch
By downloading the Design format color palette from ColourLovers, you will be able to get an Expression Design–compatible Color Swatch. Please read Part III of this tutorial to learn how to use your ColourLovers palette in your Expression Design document.
Microsoft Expression Design is a small but professional and expressive vector graphics drawing and editing tool. It helps you create vector based graphics, integrate bitmaps along with your compositions, add dynamic effects to both vector and bitmap based objects and also allows you to manage Color Swatches, a concept that is very popular across any other vector design tool like Illustrator, CorelDraw or Freehand (R.I.P).
Color Swatches are basically color palettes, so ColourLovers fits nicely with this concept. If you want to see a sample of an Expression Design illustration, check out this small tutorial of a character I created with the help of Expression Design.
Expression Design is compared by some people to Adobe Illustrator. Expression Design, however, focuses only on digital graphics and has no features for printing. You can download a trial of Microsoft Expression Design from microsoft.com. Expression Design is included in Expression Studio, the box which includes the entire Expression family of products.
WPF Resource Dictionary
The WPF color palette you can download from ColourLovers is a WPF Resource Dictionary, which is basically a library of resources (in this case colors) that you can add to your WPF project in Expression Blend.
What is WPF?WPF is our friendly name for Windows Presentation Foundation, a platform that helps designers and developers to create Windows desktop applications. WPF includes support for vector and bitmap graphics, animation, video, audio, interactivity, rich controls, 3D and more. With WPF, Microsoft has opened the doors for designers to become first-class citizens, collaborating in the creation of the next generation of Windows applications. This is an exciting creative and business opportunity for designers.
What is Expression Blend? Expression Blend is an interactive user interface authoring tool in Expression Studio; it is a tool where “everything comes together.” Some people compare it to Flash or Director. Even though these three applications are vastly different in many ways, what they do have in common is they are authoring applications.
This means Expression Blend is a tool for designers to use to integrate vector and bitmap graphics, animation, video, audio and create rich controls… to “blend” it all together to craft a rich user interface. Expression Blend helps designers create two types of user interfaces: 1) for WPF (explained above) for Windows applications and 2) for Silverlight, Microsoft’s rich interactive platform for the Web (explained later in this tutorial). You can download a trial of Expression Blend from microsoft.com.
Silverlight XAML Resources
By downloading the XAML (Silverlight XAML Resources) color palette format, you will be getting access to a Silverlight XAML file which lists as resources the different colors provided by ColourLovers. You can then copy paste these resources (colors) into your Silverlight project in Expression Blend.
What is XAML? XAML stands for eXtensible Application Markup Language, a long name; therefore, we just call it XAML (“Zamel”).
In a nutshell, XAML looks very similar to HTML, although XAML allows you to describe much richer user interfaces than HTML. XAML uses tags like HTML, but it uses tags that allow you to create rich experiences. Tags like Ellipse, Rectangle, or Path help you define vector graphics. Tags like Storyboard help you define animation. Tags like MediaElement help you embed video and audio into your Silverlight experience.
In the XAML world, colors are stored in something called Brushes. So you have a Brush which defines a red color and so you can “paint” things with Red. When you download a XAML ColourLovers palette, you are downloading a collection of Brushes which you can then use in Expression Blend to paint objects. In the Illustrator/Expression Design/Photoshop world, we call these Color Swatches, but in Expression Blend you call them Brush Resources.
How do you create XAML? Well, you can create XAML pretty much in the same way you create HTML. You can either code it by hand using Notepad or any other text editor or if you prefer to focus on being creative then you would use a design tool like Expression Blend. The ultimate goal for Expression Blend is to create XAML automatically for you so you don’t have to code it.
What is Silverlight? Remember when we described WPF (Windows Presentation Foundation) earlier and we said this was a new platform from Microsoft to create rich user interfaces for Windows applications? Well, Silverlight is also a new platform from Microsoft to create rich user interfaces, but Silverlight is aimed at web experiences and web applications. These experiences run on the web—inside of a browser—(IE, Firefox, Safari) for both Windows and Mac. Some people compare Silverlight to Flash or other rich UI plug-ins.
Silverlight leverages the .NET Framework, used by millions of developers worldwide. This helps designers become part of a bigger family of web development, which means increased creative and business opportunities. Silverlight is a plug-in that, once installed, can open rich websites created with Expression Blend.

Part III: How to use your ColourLovers.com palette in your Silverlight, WPF or Expression Design project

In Part I of this tutorial I focused on those of you who are new to ColourLovers. On Part II I focused on those of you who are new to Expression. In this Part III I will focus on the actual juicy part of this story: the real deal, the bottom line: How do I use ColourLovers color palettes in Microsoft Expression tools? That is really why we are here for, so let’s get started.

Expression Design: How do I use ColourLovers palettes in Expression Design?

To incorporate a ColourLovers palette into Expression Design, follow these steps:

Visit ColourLovers.com, search, and find the color palette you are looking for. Palettes are available under the Palettes tab in the top menu bar.
When you find the palette you want, click it to get to its details page.
Once on the details page, select the Microsoft Expression format you need. Please refer to Part II of this tutorial to learn more about the different available formats. In this case, click the Design button to download an Expression Design-compatible palette.
When prompted, choose Save File and save this file in the Swatches folder of your Expression Design install folder: c:\Program Files\Microsoft Expression\Design 2\en\Swatches\ and save your file right there. Note that your Swatches folder path might be a little different. The ColourLovers palette for Expression Design is an XML file that can be understood by Expression Design.

To add this new palette to Expression Design, follow these steps and note that in Expression Design, palettes are called Color Swatches.

Open Expression Design and expand the Color Swatches panel. Choose Import Swatch Library.
Go to your Swatches folder, select your recently downloaded ColourLovers palette, and then click Open. With this, the new palette (Swatch) will be made available inside of Expression Design.
To start using colors as part of a color swatch, create a new object in Expression Design, like a circle, select it, expand the Color Swatch panel, and then click a color from your recently imported palette to apply to your object.
Visit the Expression Community site to see more Expression Design videos.

Technical Specifications for the Expression Design Swatch:
Format: XML
Name: Design Swatch or Design
Default location of Swatches: C:\Program Files\Microsoft Expression\Design 2\en\Swatches
Sample contents of an Expression Design Swatch:

<?xml version="1.0" encoding="utf-8"?>
<SwatchLibrary xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema" Name="Strawberry"
    xmlns="http://schemas.microsoft.com/expression/design/2007">
    <SolidColorSwatch Color="#FF000000" />
    <SolidColorSwatch Color="#FFFFFFFF" />
    <SolidColorSwatch Color="#FFAA0000" />
    <SolidColorSwatch Color="#FFA23737" />
    <SolidColorSwatch Color="#FFFFBDBD" />
    <SolidColorSwatch Color="#FF652700" />
    <SolidColorSwatch Color="#FFD69595" />
</SwatchLibrary>

WPF Resource Dictionary: How do I use ColourLovers palettes in a WPF project in Expression Blend?

To incorporate a ColourLovers palette into Expression Blend to use in a WPF project, follow these steps (for Silverlight projects read the next section):

Visit ColourLovers.com, search, and find the color palette you are looking for. Palettes are available under the Palettes tab in the top menu bar.
When you find the palette you want, click it to get to its details page.
Once on the details page, select the Microsoft Expression format you need. Please refer to Part II of this tutorial to learn more about the different available formats. In this case, click the WPF button to download a WPF Resource Dictionary color palette. This is a file with a .xaml extension.
When prompted, choose Save File and choose any location of your preference, such as the Desktop or My Documents.
Launch Expression Blend and create a New WPF Project.
In the Project panel, right-click the Project item and choose Add Existing Item. This will make a copy of the file into this particular WPF project folder. You could also choose Link to Existing Item, which will simply link your project to this file wherever it is without making a copy.
Select the resource dictionary (color palette) .xaml file that you downloaded from ColourLovers and click Open.
The color palette is now available for you in Expression Blend. To use it, go to the Resources panel and expand the item named after the color palette you downloaded. This will display the different colors available.
To apply a color, select a shape in your art board—a circle, for example—and then drag and drop a color resource over it. Expression Blend will ask you to select a property of that object to link to that color resource; for example, Fill. This will “fill” your object with that color. You could have also used the color to define the stroke color or other properties of the object.
Note that you can always add new colors to your palette or modify existing colors. By using Resource Dictionaries, you enable you and your team to share a single library of colors to ensure that different people adhere to the same color specification across an entire project or multiple projects.

Technical Specifications for the WPF Resource Dictionary:
Format: XAML (WPF Resource Dictionary)
Name: WPF Resource Dictionary or WPF
Location of Swatches: Any location (after adding it to your project, the swatches will be copied into your WPF project folder)

Silverlight: How do I use ColourLovers palettes in a Silverlight project in Expression Blend?

To incorporate a ColourLovers palette into Expression Blend to use in a Silverlight project follow these steps (for Silverlight projects read the next section):

Visit ColourLovers.com, search, and find the color palette you are looking for. Palettes are available under the Palettes tab in the top menu bar.
When you find the palette you want, click it to get to its details page.
Once on the details page, select the Microsoft Expression format you need. Please refer to Part II of this tutorial to learn more about the different available formats. In this case, click the XAML button to download a text file that includes a collection of brush (color) resources. This is a file with a .txt extension.
When prompted, choose Save File and choose any location of your preference, such as the Desktop or My Documents.
Launch Expression Blend and create a New Silverlight Project. (At the time of writing this article you would choose Silverlight 2, but choose the latest version of Silverlight available in your version of Expression Blend.)
Outside of Expression Blend, open the text file you downloaded from ColourLovers. The file would normally open in Notepad or another text editor. Select all the text in the text file except for the comment line.
Copy the color brush tags text and then switch back to Expression Blend. In the Project panel, right-click App.xaml and select Open [do not confuse and open Page.xaml or any other .xaml file, as that will make your colors available only to that one .xaml file you use. The good thing about using App.xaml is that this will make the color resources available *everywhere* in your project; much better!]. Now click the XAML tab to switch to XAML code view.
Paste the text in between inside the Application.Resources tag:
<Application.Resources>            <Paste your color palette text here> </Application.Resources>
You will end up with text that looks like this:
<Application.Resources>
     <SolidColorBrush x:Key="Brush1" Color="#FF281930" />
     <SolidColorBrush x:Key="Brush2" Color="#FF312F3D" />
     <SolidColorBrush x:Key="Brush3" Color="#FF195E55" />
     <SolidColorBrush x:Key="Brush4" Color="#FFF7B00A" />
     <SolidColorBrush x:Key="Brush5" Color="#FFF37D2C" />
</Application.Resources>
The colors you brought in from ColourLovers are now available for you to use in your Silverlight project. To use them, select an object, such as a circle, for example, and then go to the Resources Panel. Expand the App.xaml selector and you will see your color brushes available.
Drag and drop one of the color brushes over your object—in our case, a circle. When you drop the brush, Expression Blend will ask you to select a property of the circle to link to the brush;for example, Fill. This will fill the object with that color resource. If you choose Stroke, you will make the stroke of the circle use that color resource, and so on.
You can always edit colors in your Resources panel or add new color brushes too. Also note that if you edit a resource, all objects you previously colored using the resource will be updated automatically.

Technical Specifications for Silverlight XAML with Color Resources:
Format: Text File
Name: Silverlight XAML or XAML
Location of Swatches: Any location (user will copy and paste the XAML code of this file into his or her Silverlight project inside the App.xaml file)

<SolidColorBrush x:Key="Brush1" Color="#FFD69595"/>
     <SolidColorBrush x:Key="Brush2" Color="#FF652700"/>
     <SolidColorBrush x:Key="Brush3" Color="#FFFFBDBD"/>
     <SolidColorBrush x:Key="Brush4" Color="#FFA23737"/>
     <SolidColorBrush x:Key="Brush5" Color="#FFAA0000"/>
     <SolidColorBrush x:Key="Brush6" Color="#FFFFFFFF"/>
     <SolidColorBrush x:Key="Brush7" Color="#FF000000"/>

Arturo Toledo is Sr. Product Manager with the UX Platform Group at Microsoft. You can visit his blog at http://ux.art.tv.

Gallery

Expression RightRail

Visual Basic Add-In Project Template for Expression Web 4
Are you a Visual Basic (VB.NET) programmer or do you wish to create a VB.NET Add-in for Expression W... More... ShoppingCart, ComCity LLC

Explore all Gallery Contributions