Color scheme tools and creating a SharePoint color theme

One of the first things I do when embarking on a new SharePoint branding project is to determine the color scheme. Sometimes, the colors are part of the design requirements, but often, I have some leeway in creating suggested color palettes to present to the client. Even if the client has provided a logo with one or two colors, I will still have to determine other colors that will be used in the design or site. For example, you may have one or more background colors to anchor the site, the primary text color, and one or more accent colors. I usually like to create my own color schemes, but if you aren’t sure where to start, or if you don’t think you have an “eye” for color, here are some tips to get you going.

Starting from scratch? Start with a photo.

If you have absolutely no requirements for colors but have to start from scratch, I often find it helpful to start with a nice photo. Some may find it hard to come up with an attractive color scheme on your own, but most people have an innate sense of “that looks nice” when they look at photos, even if they can’t exactly explain why. I tend to be inspired by nature photos, but you may also find interior decorating photos, wedding photos, or party photos inspiring as well. Find a photo that evokes the kind of feeling or mood that you’re going for with your web site — for example, soothing or exciting, subtle or vibrant, corporate or earthy…

IMG_3950 IMG_8889 IMG_2724 IMG_7711 DSC03772.JPG DSC03332.JPG

Use an online color scheme tool

When you have your logo or photo or even just one initial color, use an online color scheme tool to generate a palette of colors for your site. There are several tools that allow you to upload an image or enter an image URL to generate a color scheme based on the colors in the image; or, you can pick an initial color and then allow the tool to pick colors that go with it. I’ve pulled screenshots from two of the available tools so that you can see how they compare:

colorschemedesigner.com


In Color Scheme Designer, I entered in the RGB code for a mauve color (the input box is subtle – click on the RGB code to the bottom right of the color wheel and type in your desired color). I then selected “complement” from the color wheel choices above, and a set of colors was generated for me. What’s nice about this app is that you can view light page and dark page examples that use those colors – although you may not choose to use the colors quite like the way they display them, you may find it helpful to see how the colors look in the context of a web page. Below is the “light page” sample:

colorexplorer.com

ColorExplorer allows you to upload an image and then pulls out your desired number of colors from the image.

(Note: Another powerful color scheme generator is Adobe’s Kuler tool. Unfortunately as of this writing, it looks like they’re revamping it, and it should be back up mid-October 2012.)

Or, browse sites.

Of course, you can also browse web sites and find one where you like the color scheme and steal be inspired by it. Some nice web site galleries that I often visit include:

Making a quick SharePoint 2010 color change

Once I have a color scheme, I can then present the scheme to the client to see if they approve. But if you want to make a quick implementation in SharePoint with your color scheme to see how it looks, modify the Theme colors. Make note of the six-digit hexadecimal/RGB color codes from your color scheme before you begin.

Go to Site Settings and click the Site Theme link under Appearance.

Click on the “Select a color…” links to enter in your color codes.

Click “Apply” and your theme colors will be updated! Take a look and adjust the colors as you want.

Other resources

One thought on “Color scheme tools and creating a SharePoint color theme

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s