How to Create a color palette for your brand
You may have noticed I’ve got a series of posts going on that are all leading you towards creating a fabulous, high-converting Squarespace website. In this post, I’m sharing a quick and easy way to create the perfect color palette for your site.
We’re talking swift!
As a small, online business owner myself, finding out a time saving trick or two is always appreciated. I’m sure you can relate.
Usually, figuring out what colors should go on your website, especially if your site hasn’t undergone a branding process, can be a real time consuming challenge. So, let’s get rid of that.
Below, you’ll find a few simple steps to create the color palette for your website as well as your brand. This is just one method of course, and this method is headache free and dare I say FUN!
So let’s get started.
I highly recommend you check out a couple of posts I’ve written on mood boards. The first post shares what a mood board is and why you should create one. The second post walks you through creating one for yourself. Both will help you tremendously throughout this process.
If you’ve already read both of them, and your brand mood board is ready to go, let’s get started!
step-by-step guide: create a color palette
Step 01: Open up your mood board.
Open up your brand mood board and select an image that really speaks to you. Like, this images evokes the colors, feelings or general mood you’re going for.
If you’ve got more than one image that does this, that’s totally fine. You’ll just need to repeat steps 2-5 and play with the colors a bit more to create your brand color palette.
Step 02: select the image
If you still have a hand version of this image, you can just snag that. If not, we’re going to “snip” it.
On a Mac: press control, shift and 4 at the same time to bring up a little cross hairs symbol. Position it near the image you want and then click your mouse or trackpad to select the image.
Save it somewhere handy, like your desktop.
On a PC: go to the Start menu, found in the bottom eft of your screen. Search for the Snipping Tool. Select it. When it comes up, use your mouse or trackpad to select the image. Save it somewhere handy like your desktop.
Step 03: head on over to Coolors.co
In a web browser window, enter in the site https://coolors.co/.
If you want to, you can signup for an account and save color palettes here, but you don’t have to; coolors can be used for free and without qn account.
Navigate to GENERATE.
Step 04: Upload your image(s)
Once on the GENERATE page, look for a little camera icon.
Click on that and a little window will pop up prompting you to upload your photo.
Note: you can only upload one photo at a time.
Now sit back and watch the magic happen.
Step 05: create your palette
Okay so, here’s where it’s going to get really fun.
You’ll notice that a color palette has been created for you. This is not set in stone. You can continue you change up colors until you’ve gotten the palette that works for you.
If you’re using multiple images, you’ll want to note the string of letters and numbers associated with each color. For example,
After jotting down the letter and number combos - called hexadecimals numbers - you can exit out of the popup window and use the main version of Coolors.
All you need to do is click the hexadecimal numbers showing in the preloaded color palette to change them. When you’re solid on a color, lock it!
When you’re done, you can download your color palette and it will have your hexadecimal numbers with it.
Note: hexadecimal numbers play a vital role. Using these will ensure the purity of your chosen color across all screens. Ever notice how the color will look different in one place than another? Having the hexadecimal numbers will help to eliminate this.
Alrighty! That’s it for this post. Thank you for reading it, and I hope it helps you get the inspiring color palette that you’re looking for!