Alert This post is over a year old, some of this information may be out of date.

Creating a New Color Palette for a SharePoint 2013 Composed Look

August 3, 2012

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.

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

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:

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

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:

00CBEF0000CBEF00rgba(203, 239, 0, 0.00)
20CBEF0020CBEF00rgba(203, 239, 0, 0.13)
EECBEF00EECBEF00rgba(203, 239, 0, 0.93)

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.


comments powered by Disqus