How to choose the perfect color palette for your website
Choosing an beautiful color palette for your website and branding can have a dramatic impact on the success of your business, website or blog.
Not only can the right colors attract your ideal client, they also have the power to directly impact your potential sales and conversions.
It’s all down to the psychology of color – the emotional and behavioural responses that a color conveys to us.
Here’s a quick run down:
YELLOW – happy, optimistic, promotes trust, creative
ORANGE – cheerful, confident, vibrant – used a lot for call to actions on websites
RED – passionate, youthful, bold, fiery, confident – often used for sales & promotions
GREEN – conservation, growth, nature, harmony, wealth
BLUE – calm, peaceful, trust, authority, masculine
TURQUOISE – playful, healing, calm, feminine
PINK – love, compassion, playful, warmth, feminine,
PURPLE – wise, creative, colour of royalty, authority
BROWN – Earthy, friendly, stable
MULTICOLOURED – Diversity
How to choose colors for your website and brand
Step 1: Do a google search for inspiration
When I am working on a new project I normally have an idea of the type of colors I want to use and I start out by doing a bit of research on google.
EG. Type into google “turquoise and pink color palette” or “earthy color palette” and you’ll likely find some beautiful colour palettes you can use for inspiration for your branding.
Don’t go too crazy – choose colors that go well together and make up a complementary color scheme of 1 or 2 main colors plus 1 accent color which is usually brighter and is used for buttons and links.
StruggleFix uses a dark turquoise and a light turquoise for the main colors and pink for the accent.
Step 2: Create your web color palette
To use color on a website you need the Hex (hexadecimal) Color code. Don’t worry too much about what this is as I will show you how to find the information you need.
Basically websites are made up of code, so color also needs to be in code form in order to be read correctly by internet browsers. For example the hex code for the color white is #ffffff and black is #000000.
So how do I find the color hex code?
Option 1: Use an online Color Palette Generator
Watch my 1 minute video tutorial on how to use the online Color Palette Generator
Option 2: Use the eyedropper color picker tool in your design software
Any design or photo editing software should have a way to ‘color pick’ from an image and display the hex code. eg. Adobe Photoshop, Affinity Designer or Gimp (free software).
Create your own color palettes
I’m a big lover of bright, vibrant colors and have hundreds of photos I’ve taken over the years of beautiful flowers, dilapidated South American buildings, beaches & ocean scenes. I’d never really known what to do with all these images until recently when I decided they would be perfect to experiment with making my own color palettes.
Here are a few of my favourites:
Wanna see more?
If you’d like access to all my color palette images and ever building compilation then click here to join my email list and access the FREE RESOURCES LIBRARY.