Is your closet filled with muted tones, earthy colors, or bright colors that pop? Chances are, you probably have a personal color palette and may not even know it. You might even have a few different palettes -- certain shades you wear for work, for going out, or for zoom-meetings that require cute tops paired with comfy pajama bottoms. Your color palette can also evolve over time. I've had a gray/black phase, an every-shade-of-blue-you-can-imagine stage, and just recently, a burnt sienna/ desert red color phase of my life.
OK, wardrobe aside, this article is really about your website. Whether you realize it or not, color plays a big role in setting the tone and feeling for your site. Although you may have dreadful memories of agonizing for days over paint swatches (pine nut or butter cream???) when you repainted your bathroom, creating a color palette for your website can be quite fun and easy!
What is a color palette?
A color palette is a selection of four to five colors that will be used on your website. Sticking to your color palette creates a consistent look on your website, looks professional, and acts as part of branding your name and business in the minds of potential customers. Designers often charge clients to create a color palette. If you want to save money or don't have a designer, you can make a color palette yourself using Canva's mood board template.
There are many elements on your website that can be a color --- from the page background and navigation menu to graphic icons, text, and buttons. It's important that your website color palette has a mix of dark and light colors as well as at least one neutral tone for headers or footers.
When I create color palettes for my clients, I typically choose five colors. Although there's always room for creativity and inspiration in design, a good place to start is with the following color palette formula:
a dark shade of main color
a lighter shade of main color
a pop of bright color that compliments the main color
a darker shade of neutral
a lighter shade of neutral
Create a Color Palette from Your Website Photos
A great way to ensure that the photos on your website and your color palette go together is to create a color palette from the photos you plan to use on your website. Your photos can be actual photos that you will place in your website, potential photos, or just images that create a feeling that you'd like to have on your website.
In this tutorial, we will use the free Mood Board Template in Canva to create your very own color palette for your professional website. Here's what you'll need:
Canva - free or Pro Version
8 total photos, which can be a combination of your own photos and stock photos.
If you are a solopreneur or service based business, one of those photos should be a professional headshot of you.
If you're using the Canva Free plan, the steps are exactly the same except for the stock photos that you have access to. If the photo has a little crown on it, it means it is a premium feature. You can upgrade to access it or you can use a free stock photo website, such as Pexels or Unsplash. Then, you would upload those photos into Canva.
7 Steps to Create a Color Palette using the free
Mood Board Template in Canva:
Login to your Canva account.
From the Home screen in Canva, click on "create a design" button on the top right corner. In the search bar, type mood board and select "Mood Boards Photo Collage".
Click on a photo collage template from the left-hand results field.
Select your photos that your color palette will be based on.
To upload your own photos, follow these steps:
Select Uploads on the left side panel of Canva.
Click Upload your own images.
Select an image to upload and wait for the upload.
To use stock photos, follow these steps:
Go to Elements on the left side panel of Canva.
Type your search term in the search box to find possible photos.
Drag your images into the photo frames of your mood board.
This photo collage is for a fictional photographer, who works with clients where she lives near the beach. In the mood board, we have placed a headshot of the photographer, a few photos of the beach, photos of her industry, and a few images that create a soft and warm tone.
In our example, the photographer's headshot is top center in the mood board. Since we plan to use the same photo on the homepage of her website, we will select the color of her blue top to be one of the colors for her color palette. This will create a consistent and professional look on her website.
Pick your colors from your photos.
Click on one of the colored squares inside the mood board.
Click the color selection icon at the top left of the middle navigation.
Your color options will pop up on the left.
Scroll down a bit to see "Photo Colors".
Click "see all" to see all of the color options from the photos you've selected.
The colors from each photo will show up to the right of the photo. Simply click on the color to change the color of the square.
Fill in all the squares with five different colors from the photos to create your unique color palette.
Isolate the color palette
When you're complete, click on the grouped element of the five colored squares.
Make a copy of it by hitting the duplicate icon in the top right of the navigation.
Drag the new copy down into a new page.
Finding your Hex Codes
Each color has a code called a hex code that can be read by website platforms. The hex code will be a hashtag # followed by a 6 digit code with letters and numbers. See What is a Hex Code?
To get the hex code of each color, click on the colored square.
Then, click on the color box.
Then, click the + button all the way to the left of the Document Colors section.
Write the hex code below each square.
Your Very Own Website Color Palette
Voila! You have your very own official color palette for your website. Depending on what web platform you're using, you should be able to upload the hex codes to your site's settings to establish these as your default colors. Or, give them to your web designer to set your website colors for you.
Here's another example we did using the free version of Canva. It turned out just as nice!
Was this article helpful to you? Join the community!
If you want to sign up for my email list to receive more free resources on how to build your own business from the ground up, DIY tips on designing your brand or website, writing your message, or general positivity and encouragement for your new solopreneur life – then subscribe below!