Our Rating for Coolors:

5 out of 5

This post may contain affiliate links, which means I may receive a commission if you make a purchase using these links.
I only recommend products and services that I use myself and genuinely believe in!

Resource you need for this tutorial:

Why we love this tool:

We consider Coolors an essential tool in our web design toolkit. Start with a specific color in mind and let Coolors generate coordinating colors, or use an image for inspiration. It’s incredibly easy to use and there’s no commitment to purchasing a subscription — but we will go over a few advantages to subscribing!

TL;DR

This tutorial demonstrates how to use various tools available on the Coolors website.

Collage Maker Tool: Easily create an exported collage file with hex codes to use as a mood board or provide inspiration for your graphic designer.
Image Picker Tool: Upload a photographer to extract various color palettes. This tool connects to the Color Palette Generator Tool.
Color Palette Generator Tool: Can randomly generate colors to create a color palette. Start from scratch or start with selected colors.
Color Picker Tool: Start with your favorite color and learn all sorts of information including the full list of shades, tints, color theory, etc. Will also link to already created color palettes using that exact color.
Explore Color Palettes: Explore a large library of previously created color palettes and filter them by colors, words, # of colors, and so much more.

You can accomplish everything shown in this tutorial using the free plan, but there is one extra step to take for free plan users.

Check out Coolors

Was this content helpful?

Video Transcription

[00:00:00] By far, one of our favorite ways to create a palette for our custom web design clients was using the Coolers website. It was really common to have a client that didn't have a professionally designed logo or brand kit, or they had a very monochromatic or black-and-white logo and wanted to introduce more color to the website.

[00:00:19] So I'm already signed in to the coolers website. I'll have a link for you below. You can create an account. It's free, and that allows you to save up to 10 color palettes, which is very handy if you're undecided on a few color schemes.

[00:00:33] Coolers has so many tools, as you can see. There's no way we're gonna be able to cover all of them. But I do wanna hit some of the main ones and why they're handy to create a custom color palette in your Squarespace website.

[00:00:48] So the first thing I wanna go over is the Collage Maker. If you're inspired by colors in an image you found, then I encourage you to explore either the collage maker or the image picker tool.

[00:01:00] Now the collage maker is sort of limited but it can help you create and build a mood board. And it's also handy to export for a graphic designer if you're working with someone like that. Let's start out by adding an image that I found.

[00:01:20] So from here you can select the total number of colors. I tend to go to three, and I'm gonna cycle through some of these picked palettes. One thing I wanna point out is the show hex button. This is gonna be important once you download this collage, the hex codes will come with it. You obviously want that information because you can't tell from the image necessarily what the color code is, so this is the exact color code.

[00:01:46] You can also change the layout, but just watch out because some of these don't have enough space for the hex codes. So if you like it just because you like the format, then download it. But make sure you're also downloading a version with the hex codes. And again, I'm going change the color number to three and I wanna cycle through until I find a fun combo.

[00:02:19] So remember if you watched our other tutorial on the basics of setting up a Squarespace color palette, you know that the presets are based on three main colors with a focus on the middle or pop color. So when you set the number of colors to three, you can easily plug in those codes in Squarespace and see how things look.

[00:02:40] You can also export this to the generator tool, and we're gonna circle back around to that here in a minute. If you're not liking the colors in general, you can increase the number and that's gonna introduce more shades and speed up the process of curating your color palette. So let's play around with the palette generator tool.

[00:03:03] Honestly, most of the tools available on the website can connect to this Color Palette Generator. This was the original feature of the website when it was first launched.

[00:03:14] So one thing I wanna do is I like to look at the palettes from left to right, lightest shade to darkest shade, because that's gonna correspond to how Squarespace sets up all 10 color themes.

[00:03:30] So if for some reason you change your mind and you're thinking, you know, I'm not sure about this middle color, but I like this puce and the licorice, so I'm gonna click the lock icon, and then I'm gonna hit the space bar and see. This is why the generator tool is so awesome because it will automatically create coordinating colors that work with the colors that you do want.

[00:04:00] So yeah, you can play around with that. It's a lot of fun. But for now, I'm going to copy this hex code and we're gonna look at the Color Picker Tool because this is a great way if you're in love with a single particular color; this is going to give you a lot of information related to that individual color.

[00:04:24] There is a lot of information, including shades, tInts, tones, the color harmonies, all of that information. But what I want to show you is all the way at the bottom; it's gonna show you color palettes. Now, it's weird because sometimes this won't show anything and sometimes it will show a lot.

[00:04:46] But if there were color palettes using this specific hex code , when you click on view more, it takes you to another tool, which is just Exploring Palettes. So since that didn't actually give us any colors, let's go back.

[00:05:04] I want to select this sky blue instead and see what we get.

[00:05:13] Ah, see, I figured that might work. So again, you can see other pre-made color palettes using that exact shade, which is really fun. And when you click on view more, you'll see that that exact hex code is a tag that's filtering all the color palettes using that exact color.

[00:05:37] So for now, I'm gonna clear out this tag. And if you've done research on your ideal client, this may be a great way to plug in specific keywords.

[00:05:46] So I can search for a specific word, like sophisticated and see these results . Another great way to go about this is just clear out any other tags and then just click on the three colors, and then you can filter again by just going green and three colors, simple things like that.

[00:06:09] I have already selected a palette based on some warm green shades that I found earlier, and I have gone ahead, and I've plugged these into my test website. So when you're viewing a color palette like this, again, lightest to darkest, so these are the three shades that I showed you earlier.

[00:06:37] And this is automatically defaulting to a pale white and a pure black. So as I scroll through the page, I can just see that the contrast is good and wherever it may not be good I'm happy with how Squarespace has defaulted. For the most part, that's probably not gonna cut it.

[00:07:04] I don't think the contrast is good enough there, but that's an easy enough tweak to make.

[00:07:10] Thanks for watching and we hope you have fun creating your color palette.