I’m not a design expert by any means, but I found this clever little trick that is easy to use and helps even non-designers like me come up with a color pallet that looks great.
Colors are a very important part of the design of your site. So it’s a good idea to come up with a consistent color pallet for your site.
There are four main types of color pallets:
Monochromatic – one hue or color but different shades
Adjacent – colors that are next to each other on the color wheel
Triadic – One color from one side and then two adjacent colors from the other side
Tetrad – two adjacent color from each side of the color wheel.
With Monochromatic, adjacent and triadic color pallets you can also add the complementary color from the opposite side of the color wheel. This can give you a nice contrasting color for your designs.
If you would like to learn more about these pallet types, there is a really good easy to understand article with examples that you can find from Speckeyboy Design Magazine
The main key to using colors especially as a beginner is to limit your colors to a maximum of four main colors, not including white, black and grays, you can use those as much as you want. I would say that the fewer the colors you use in general the classier or more elegant you site is going to look. The more colors; the more dynamic and fun.
So how do you come up with a color Pallet?
I found this great tool, and it’s free and easy to use paletton.com.You simply select the type of pallet that you want to create, monochromatic, adjacent, triad or tetrad. You can also choose to add a complementary color, by selecting “with complement”
Then from bellow the color wheel choose the base color. You will need to input it in hex color code or by just dragging the main color picker around till you see a color that you like. If you know the color that you want but don’t know what it is in hex, then watch the video below where I show how to find a color and then create a pallet from that color.
Then on the right-hand side of the window you will see the color pallet that was created for you. Underneath that pallet is a button called “examples”.
Selecting “examples” gives you several different helpful options for viewing the color pallet. I like the “city glitters” and “splash” from the “artwork section” of examples.
It’s important for your website, and brand, to keep a consistent color pallet. That’s why using paletton.com is such a powerful tool. If you look at the bottom right of the site, there is a link that says “color tables”.
The color tables page shows you what the main colors you have selected, but the real magic is along the right. There you will find additional views of your color pallet. My favorite is under “Color list” > “as HTML” This view gives you a nice easy to read sheet that shows your colors in Hex code. A handy guide when building your site.
I like to save this sheet as a pdf. I then keep it in the master folder with all of the artwork and design elements I am using for the site that I’m building. Now when you need to pick a color for your site, just look one up from your color table.
You will find this to be much easier than guessing. I found that using the Paletton pallet as a guide saved me time in worrying about if I was choosing the “right” colors.
Plus I found that when I had converted a site over from the colors I had just guessed at, to ones that I created using Paletton that there was a noticeable positive difference in the overall look and feel of the site.
There is another big advantage is in having a set color pallet. You now have a selection of colors to choose from when creating other types of content. This is important for maintaining a constant image across multiple different media. By using a consistent color pallet, customers, users or visitors will know that they are interacting with you or your company even if it’s not on your website. Using the same colors on your Facebook page, Youtube banner or piece of print advertising will create a unified looking brand.
In the video below, I walk you thru the entire process of creating a color pallet. I start out with an existing logo and use that as a starting place for creating an entire color pallet.
If you want to read more about design and colors I recommend:
graphic design for non-designers affiliate link. It’s a nice introduction to the concepts of design.
