How to use coolors.co to create your colour palette

Coolors.co is a really simple web app that you can quickly use to generate colour palettes for you and your company. All you need to do is press the spacebar, and you'll get a good selection of colour palettes If you don't like the current one, you can simply hit the spacebar again and will give you a new one.

Watch the video

If you want to see this tip in action, check out the YouTube video below 👇

Step by Step Instructions from the Video on Using Coolors.co

How to Use the Generator Feature

Click on the Blue button that says “Start the Generator”.

step by step instructions from the video on using coolors.co

Keep hitting the space bar and watch the colour pallets change and see if you come across a combination that will get your attention.

color generate page, websbymads
Press the spacebar to generate color palettes, websbymads
color generate page, websbymads

Once you find one colour that you like and want to see different colour schemes that go well with that particular colour, hover over your favourite colour and click on the “lock” link. Then that colour stays there while hitting the space bar will keep showing you more colour scheme variations. You can lock more than one colour, too!

Color code and generate page, websbymads

If you’d like to view a different shade of one of the colours just click the “View Shade” icon. 

View shade option, websbymads

How to Use What You’ve Created

Once you’ve found a palette that you love, you can:

  • Copy down the hex codes to use in your website or in other software platforms, like Canva.

  • Save your palette (you have to open a free account to save your palettes in your account).

  • You can export the palette as a png image or a pdf document.

Danielle Madden

This article was written by Danielle Madden, an award winning Squarespace website designer, marketer and graphic designer.

Ready to discuss your website project or marketing goals? Contact us today for a consultation and take the first step towards building your online presence!

Website: www.websbymads.com
Marketing: www.mads-online.com

Previous
Previous

How to share a Squarespace website before it goes live

Next
Next

How to make your favicon/browser icon on canva?