Creating a New Color Palette for a SharePoint 2013 Composed Look

One of the new functionalities in SharePoint 2013 is that themes are split up in multiple files.

1. Color Palette files;
2. Font Scheme files. When you want to create a new color palette in SharePoint 2013, you can start by going to Site Settings > Themes. In the theme gallery click on a color palette (ex.: palette005.spcolor) and download it to your desktop.

Open the downloaded file in your favorite text editor, and you will see that this is a normal XML file. All the elements for which the colors could be changed are in this file. This is a major improvement compared to SharePoint 2010 where you could only set the major and accent colors. All the other colors were calculated/rendered by SharePoint itself.

Now you can define your own color values in HEX for each element.

1
2

<s:color name="NavigationHoverBackground" value="CBEF00" />
<s:color name="NavigationSelectedBackground" value="CBEF00" />

Show image

But this is not all. SharePoint 2013 also works with RGBA (red, green, blue, alpha transparency) background colors, and they can be defined like this:

1
2

<s:color name="NavigationHoverBackground" value="20CBEF00" />
<s:color name="NavigationSelectedBackground" value="20CBEF00" />

Show image

As you can see the HEX values now contain 8 digits instead of 6. The first two will be used for the transparency value and the 6 other digits will define the color.

For example:

Transparency Calculation

Here you could find a converter to calculate the correct RGBA value.

Adding the Palette to SharePoint

When your color palette is finished, you can upload it to the Theme Gallery and use it in a composed look.