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.

1
2
<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:

1
2
<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:

**Value** **Transparency** **Color** **RGBA**
00CBEF00 00 CBEF00 rgba(203, 239, 0, 0.00)
20CBEF00 20 CBEF00 rgba(203, 239, 0, 0.13)
EECBEF00 EE CBEF00 rgba(203, 239, 0, 0.93)
FFCBEF00 FF CBEF00 CBEF00

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

comments powered by Disqus