Did you know that 90% of an assessment for trying out a product is based on color alone? This data is according to Buffer and it’s one more reason why the color palette of your website holds über-importance.

That’s also one of the toughest decisions for me when building a website. Selecting the right combination of colors that will go on a website is essential for attracting the target audience of my client’s business.

The color palette should not only reflect the style, voice and values of my client’s business but it should also have a visual aesthetic that is attractive to the audience that my client wants to serve and speak with.

It’s not easy but I want to help to make this part of the website design process easier for you - with my favorite 10 tools.

Whether you are building your website from scratch or even tweaking it to fit a renewed focus or expansion of your business, these 10 tools will be of help. They have helped me at different stages of my web site design creation process. I’ve bookmarked them and they all open up in a new window when I am ready to work on a new website.

Ten tools (free) I use for creating a color palette
or a mood board for my client’s websites

1| Start with some inspiration

This blog on Canva comes in handy when you are just starting to brainstorm. When my clients send me info about their business and a selection of photographs, I already have made notes on the mood, the voice and the style the website should reflect. This blog gets my creative juices flowing as I am very visual and I find that looking at 50 curated websites based on style (ex. fun and professional or modern and clean or enon tones and sharp contrast), is quite helpful.

Blog: https://www.canva.com/learn/website-color-schemes/

2| Play With the Color Wheel

After getting some ideas from Canva’s blog (point 1 of this blog), I jump over to Adobe Color Wheel Tool. First of all, it’s so much fun. But best of all, I can start with one hexcode (one color) and then see several combinations suggested by the tool. I can see Analagous, Monochromatic and so on (see image on the right).

Interactive Tool: https://color.adobe.com/create/color-wheel

3| Get Color Combos from Paletton

Now there’s yet another free tool that I may jump over to play around with my first round of selected colors. This one is also fun and if nothing, you get a nice color therapy just looking at the color wheel ;-)

Interactive Tool: http://paletton.com

4| See Your Colors in Action

By now, I have selected my first draft of three or four colors for the website. Now I jump over to design inspiration.net to see how others have used it. Again, I like to see visually what has been done with my color selections to see if the look and feel is right

The cool thing about this tool is that you can plug in several of your colors (hexcode) and see what kind of creative things people have made. You will see everything from posters to photographs - there’s a lot to get inspired by.

Interactive Tool: https://www.designspiration.net/

5| Ooh! Let the Fun Begin With this Color Palette Generator

This by far is my most favorite tool. And if you are a photographer or your site will be very image heavy, this tool might be your very best friend when it comes to selecting colors. Watch the video to see this more precisely but all you do is drop your photo and this generator will spit out 5 colors selected from the photo. I think this one has the most fun-factor, at least for me!

Interactive Tool: https://www.canva.com/color-palette/

Notice that each of these tools and resources serve a different facet of the color palette creation process. One may be for picking hues that complement each other, while another tool will convert your rgb data into a hexcode. So they are all essential in your website building toolbox. Watch the video where I am more specific about these.

6| Change RGB to HEX Code and more

This tool is one of the earliest tools I ran into back in 2014-2015. You will see in your Squarespace backend that there are tons of colors that show up in different color models such as rgba or hsl. This interactive tool is very handy because you can copy that rgb (168,138,212) from the Site Styles panel of your website. Then drop it into the site and color-hex.com will shoot a page out with not only the Hex code (ex: #A88AD4) but also give you a host of other resources - such as hues, tints, analogous colors, triadic colors and so on. So go take a look.

Interactive Tool: https://www.color-hex.com/

7| Use This Tool to Convert a Hex Code

This tool makes it easy to convert a hexcode into different color models such as RGB, HSL and CMYK. This may especially be relevant if you are working with printers and graphic designers.

Interactive Tool: http://www.convertacolor.com/

8| Pick A Color You Like Straight From A Website

This one is a real help. It’s not an interactive tool like the others. Instead it is a Google Chrome extension and once you install it, it sits on your toolbar ready to work with a just a click. When I see a website with a color scheme that I really like, I use my color picker to learn what these are. This is very good for learning from other designers, especially my esteemed colleagues who are also Squarespace Web Designer or Authorized Trainers.

Interactive Tool: http://www.colorzilla.com/

9| Another Fun Tool To Choose Colors for Your Palette

This is a fairly new tool that I have only known for a few weeks now. This tool has two features I like. 1. When you use the “Generate” feature, you can select a color, lock it and then hit spacebar to see other color combinations suggested. 2. You can go to the “Explore” section, plug in the hex code of let’s say the main color in your palette and then the app will show you color palettes that contain that color. I haven’t had used the “Explore” feature much but it’s worth a try.

Interactive Tool: https://coolors.co/

10| Time To Create The Moodboard

A moodboard is a collection of images, colors and fonts that designers put together for their clients as they begin their website design process. It give a quick snapshot of how the design style that the site will evoke.

If you are building a site for yourself, you may be tempted to skip this step. But there are at least two reasons why this will come in very handy. 1. When you are designing complementary design materials such as a business card, brochure, or social media graphics. 2. When you are working with a graphic designer, marketing team or redesigning your site with a web designer. In both scenarios, having a moodboard handy will help speed up and make thing easier for yourself and whoever you are collaborating with.

ProTip: If you are getting your site designed by a web design professional, make sure to get the moodboard file (PDF, .jpeg or .png) as one of the deliverables from your designer. (This could be during or at the end of the web design creation process - based on the style of your designer).

Interactive Tool: https://www.sophiaojha.com/canva (affiliate link)

Bonus Tool: ColourCode by Toptal

This is a tool that I had fun checking out as the colors change based on the position of your cursor. It’s by a firm called Toptal and is a completely FREE, web-based color design tool. It’s an all-in-one color design tool where you can find different palette categories (analogic, triad, quad, etc.), multiple conversion colors, and even download your custom palette.

Interactive Tool: https://www.toptal.com/designers/colourcode

Are you getting excited to get your own website? I love designing websites for fabulous people like yourself, so take action to get your website design process started —> Start the Conversation by sharing some ideas about your site with me.

Each week, in my blog, in my free live trainings or in my video tutorials, I show you more things you can do on your Squarespace website without spending an extra dollar. So sign up to my weekly emails that I send out on Thursday mornings so you are always be informed when the next blog/video tutorial or free live training is coming out. Just go on over to —> Squarespace Tips and sign up!

Questions about this blog post? You can drop them in the comments below!

~Peace,

Sophia