Last Updated on June 21, 2021 by scottkandh
This blog post was initially written by Blog Pixie on March 12, 2017 by Vanessa. I’ve revamped it a little bit and suited it to my website.
For months I’ve been struggling with how to put “good” colors on my blog, so I wanted to take this opportunity to rebrand my website and share with you how to do it when I give it a major overhaul. The color palette can be used throughout your website on posts and pages to keep consistency.
In a nutshell, it requires you to make a color palette and I’ll outline the steps taken along the way. I can hardly wait to see the difference it’ll make on my site because I’m challenged on which colors to “effectively” use.
One of the best reasons for considering branding your website is to make your website recognizable to others. This way people will be able to recognize who you are, what your brand (your website) represents, and makes your website memorable and distinguishable.
In a moment I’ll guide you through the steps to create your color palette. Ultimately, the photo that you select will be used to build your color palette.
Three steps to making a color palette for your blog
Step 1: Find a photo you love
- Find a photo that inspires you.
One you’ve seen on Pinterest
A picture you’ve seen on Instagram
Something you’ve seen on Canva
Or a picture you’ve seen on Free Stock Image websites
- The photo should encompass what your blog is all about:
The feelings that your site evokes
I selected: Are you a House Cat? Because our society continues to face COVID and the image provides a sense of humor. It also provides my logo that I initially created. However, I wasn’t able to actually use the exact photo and had to look at a similar design to create my color palette.
Step 2: Open it in Adobe Color CC
This website (Adobe Color CC) will create a color palette. It’ll automatically create a color palette with the best colors to use selected from your photo or you might have to upload a photo to search for similar color themes.
To get the exact palette for your image follow these steps:
- Go to Create
- Click on Extract Theme (2nd tab)
- Then drag and drop your file from your computer.
For example, just for gee-whiz I wanted to get the color palette for one of my favorite pins below. To be truthful though, once I have the palette information I’m not exactly sure how to use it, it’s my guess that’ll come with experience.
To get a “similar” palette for your image follow the info below.
To open your photo, go to Explore, then click on the camera to the far right and select your file.
From there, you can select a new photo that best matches your photo to get your new color theme.
For example, I selected this one for my new color scheme (it has similar colors to mine). Once you click on the particular image, you’ll be provided with the hex codes to use.
- #5881A6 – Dark Blue
- #789EBF – Light Blue
- #BFB3A4 – Tan
- #BF7B54 – Orange
- #0D0D0D – Black or Dark Brown
My suggestion is to write down these hex codes (for your palette) at the front of your binder because more than likely they’ll be used a lot.
Step 3: Perfect your palette
Finally, the last step is to perfect your new color palette and add any additional colors or make a change to one that you don’t want to have on your website (subtract).
My favorite utility to edit images is Canva. All you’ll need to do is to capture a screenshot of the page (Shift + PrtScn, then Paste which is Ctrl + V). Or you can save it in Power Point and save it as a jpg then copy and paste it into Word where you might need to crop it a little bit.
Vanessa recommends that it’s helpful to have six colors for your color palette (which include one or two neutral colors). Adobe Color CC will create five colors for you to use. What you’ll need to do is to add a sixth neutral color (black or grey) to the color palette. The preferred color of the two is black because it’s used more predominately.
An optional color to add (and you’d have to remove one of the other colors then) a metallic color such as: gold, silver, or bronze to make your brand stand out a little more.
Possible color palette combination:
- Three bright (or dark) colors
- Two neutral colors (black and grey)
- One metallic color (optional)
There you have it, the steps to create a color palette for your blog. Now you’ll know exactly which colors to use for your website.
Related posts for you to view on my website: