A good color palette is crucial in setting the mood for your site and brand. This is going to be your online footprint. Your readers will notice your color combination first than other design elements of your site. The first impression you will give your readers commonly results from your site color.
For instance, Facebook has blue and white color palette. When you see that shade of blue anywhere, immediately Facebook comes to mind. That is the kind of recall that you want your readers to have. An instant recognition of your brand, which drives them back onto your site.
A good color palette doesn’t have to be the color palette which is currently trending. So don’t fall into the trap of forcing your branding to look like famous sites currently trending. It should reflect your personality and interests. More importantly, it should match your branding. Take as an example a site which intends to provide advice and tips to women undergoing depression, I don’t think it is a good idea to use black as the primary color. The color palette is like an invitation and assurance for women with depression to come forward so it is better to use happy, soothing colors like green (mint), blue (serenity, aqua), pink.
Your defined color palette will be present on all your communications, not only on your homepage. All your social media platforms will carry the same color palette. So the best way is to do it right.
Describe your brand
Defining your color palette starts with your brand. What do readers expect from your site? What services will you offer? Who are your readers and customers? How old are they? These are some questions you should ask when thinking about your brand.
List down key words that describe your brand. Choose 5-10 words which best represent your brand from your list. It can be objects, decor style like minimalist, rustic, your personality like quirky, feminine, texture like polka dots, black-white pattern.
When I was describing my brand, identifying what I will offer helped me the most. From there, I visualized my readers and potential customers. I also bench-marked on what interest me each time I read blogs. I like drooling over designs (frustrated designer here) and looking at party ideas and organization. Of course, I love cooking and baking, too. So that’s a given.
My Magic Words
- Feminine, soft
- Farmhouse (I went further and searched Joanna Gaines)
- Watercolor interchangeably with polka dot and confetti
- Rosegold + blush
- Reliable + color
Watercolor, polka dot and confetti are my optional words or interchangeable words. I call them that because I am sometimes drawn to them, sometimes not. So I included them on my list so I can identify what draws me to these patterns/textures. You can also add in “branding” for a more specific inspiration such as “feminine branding”.
If you like hollywood glam decor for instance, try searching hollywood glam living room. Try to combine other words matching your magic word.
Using the magic words, gather inspiration from Pinterest. Type each word in the Search bar and choose the pictures that capture your attention and you think represent your brand. There are also branding options which you think reflect your brand, as well. You can save them as reference only. There will always be something different so don’t rely on it entirely.
Save around 25-30 pins. Create a board in Pinterest and save your chosen pins. You can opt to keep it secret so you are not flooding your subscribers’ feed or if you want to hide it.
As I browse, I save my choices on a new Pinterest board which I named “Branding-Inspiration“. Once you have pinned 25-30 images, you can notice already the common theme among your chosen pictures. Like color palette, font (if you saved some quotes or images with texts), texture and pattern. Note of the textures and pattern because you will need that in your branding board.
Read my detailed tutorial on how to save pins on Pinterest.
Take your own pictures for inspiration
If you are overwhelmed with options in Pinterest, you can take your own pictures. It can be nature-inspired, everyday objects or anything that relates to your brand. Be creative and make it fun. This works better if you already have some items which always inspire you and reflect your brand.
For instance, if you are a wanderlust and you love the beach, you can take a picture of your favorite beach scene. Use your imagination. If you want to showcase your floral arrangement skills, take a photo of your favorite arrangement and flower choices.
The above photo are my own items. I am inspired with these items. I used the pink lantern as the base for my Pink-Gold DiY Centerpiece, rosegold pouches are from my sister and I love rosegold, pink pens are for my daily doodles (I want to hoard but my husband would not let me) and the others are my vanity items. The photo exudes femininity. Pardon the awkward placements and shot though. Still learning.
Choose the Photo/s representing the overall feel of your brand
Time to choose a photo that resonates your brand’s personality. Is there a photo that really stood out? If it is still hard to choose at this point, I suggest filtering down your photos to half. Then to 10, to 5, finally the last photo. Or just randomly choose what you still like. There is no straightforward process.
When you are choosing the final photo, better choose after you have refreshed your mind and eyes. If you have time, you can leave it for a day. That way, no more biases. Stand up, get some fresh air, walk around.
It’s additional effort but for me it was easier than pinpointing and going over all pics multiple times. I saved my 19 choices to a secret board. Then I continued working on the secret board. I deleted those which I didn’t choose but left my top 10 choices for my mood board. I chose my final photos among the 10.
Browsing through zillion of images can be overwhelming so focus on your branding. You might want to read my post on Basic Blog Design Tips and Tricks.
Creating color palette using Photoshop
One way to create your color palette is through Photoshop. You can upload the image to Photoshop then use the eye dropper tool to choose each color in the image. You can clear up the existing swatches then save new ones by hovering to the colors in the upper right of the screen, press Alt then start cutting the colors. A scissor icon will appear once you press Alt then hover over the color boxes. Swatches is the second tab after Color at the upper right hand side of Photoshop screen.
Filter the colors on your image so it is easier to choose the colors. Go to Filter/Pixelate/Crystallize. You can increase the size so the pixel becomes bigger and you’ll have fewer options. Now choose the color you like by using the eyedropper tool. Save the color as New Swatch by clicking the New Swatch button (bottom-fold paper icon) at the lower right of Color/Swatch tab.
You can get the HEX codes and RGB by clicking on the Color tab, then click on the color box. A dialog box will open which shows the Hex code and RGB. Hex code is the 6-digit code preceded with #.
Here is the color palette I came up with using the photo I took myself. However, this one is captured using Coolors.co.
Alternative to Photoshop
You can also create your color palette using the following online tools. Upload the image onto the image generator then it will show the color palette. You may want to adjust the picker, especially on Coolors.
CSS Drive Colors Palette Generator
Design Seeds is a good source for color combinations. The combinations are categorized according to collection and color so it is easy to navigate. This is where having your main color becomes handy. Just choose your main color and you will be given options. You can browse through thousands of color palette options.