Colors determine the emotions of your viewers. Choosing the right color scheme can lead a customer to stay at your website and buy your product. However, if you are new to webdesign the color decision can be difficult. In this article I will show you how to find your color scheme in 3 easy steps.
1. Trigger The Right Feelings
Think about the emotions you want to trigger when a viewer enters your website. Pick the first and second rank of color names that fit the desired feelings the most.
Note: If there is a first color specified (e.g. in a given logo), use this one as your first choice and pick the best fit of the list as your second rank.
Second Note: If you already have a website and want to rework the design, I recommend to maintain the main color of the old design, because your viewers very likely identify your website by it.
The following psychological and emotional effects of colors come from color-effects.co.uk and arttherapyblog.com.
➕
purity | innocence | cleanliness | sense of space | neutrality | hygiene | sterility | clarity | simplicity | sophistication | efficiency
➖
mourning (in some cultures/societies) | sterility | coldness | barriers | unfriendliness | elitism
➕
neutral | timeless | practical | psychological neutrality
➖
lack of confidence | dampness | depression | hibernation | lack of energy
➕
power | strength | intelligence | thinning/slimming | sophistication | glamour | security | emotional safety | efficiency | substance
➖
authority | evil | death or mourning | oppression | coldness | menace | heaviness
➕
love | romance | gentle | warmth | comfort | energy | excitement | intensity | life | physical courage | strength | basic survival | "fight or flight" | stimulation | masculinity
➖
blood | defiance | aggression | visual impact | strain
➕
happy | energetic | excitement | enthusiasm | warmth | wealth prosperity | sophistication | change | stimulation | physical comfort | food | security | sensuality | passion | abundance | fun
➖
deprivation | frustration | frivolity | immaturity
➕
happiness | laughter | cheery | warmth | optimism | intensity | attention-getting | confidence | self-esteem | extraversion | emotional strength | friendliness | creativity
➖
hunger | frustration | anger | irrationality | fear | emotional fragility | depression | anxiety | suicide
➕
natural | cool | growth | money | health | tranquility | harmony | calmness | fertility | balance | refreshment | universal love | rest | restoration | reassurance | environmental awareness | equilibrium | peace
➖
envy | boredom | stagnation | blandness | enervation
➕
calmness | serenity | wisdom | loyalty | truth | focused | intelligence | communication | trust | efficiency | duty | logic | coolness | reflection
➖
cold | uncaring | aloofness | lack of emotion | unappetizing | unfriendliness
➕
royalty | wealth | sophistication | wisdom | exotic | spiritual | prosperity | respect | mystery | containment | vision | luxury | authenticity | truth | quality
➖
introversion | decadence | suppression | inferiority
➕
romance | love | gentle | calming | physical tranquillity | nurture | warmth | femininity | sexuality | survival of the species
➖
agitation | inhibition | emotional claustrophobia | emasculation | physical weakness
➕
reliability | stability | friendship | warmth | comfort | security | natural | organic | seriousness | earthiness | support
➖
sadness | mourning (in some cultures/societies) | lack of humour | heaviness | lack of sophistication
Examples
If your website is about summer vacations you probably want warm and bright feelings. I suggest choosing yellow or orange as the primary color and brown as the accent color.
If you sell sports products you need trust of your customers. Leading social media platforms mainly use the color blue in their designs for the same reason. The sports topic matches perfectly with the accent color orange or red (powerfull).
A website about gardening tips could use green and brown to express naturality, earthyness and environmental awareness.
First step: ✔
2. Find Your Main Colors
Now you know the names of the colors that attract your viewers. The main colors are the basis of your color palette and consist of:
- primary (the color that is used for most elements)
- accent (a smooth contrast to your primary-color)
- warn (a signal color that alarms the viewer in case of an error)
Your warn color should be red or red-related (pink or orange). Your task now is to find a primary, accent (dependent on the two colors from step one) and a warn color that fit all together. Write down the color codes.
You have two options to find your color codes:
- browse thousands of handpicked palettes at https://colorhunt.co/. Filter the palettes by the color names you picked in step one and choose the palette you like the most.
- or get a customized color palette here: http://colormind.io/bootstrap/. Click the generate button to generate a new color palette and click on the lock icon if you found one of the color names from step one and you like the color. Scroll down to see how it looks like when applied to elements.
Examples
The following color palettes consist of:
[primary color][accent color][warn color]
The website about summer vacations could use these main colors:
The website about sports products could use these palettes:
Second step: ✔
3. Build Up Your Color Palette
Now you need some more shades of your colors. A white background and black text is actually implemented very often but it is never a good choice. Black and white don't exist in nature nor in your surroundings. Neither choose absolutely black or white in your color palette. Instead, pick a very dark or very light shade of your main color that is almost black or white. You will notice that it looks like actual black or white but more pleasant.
Your color palette should at least consist of:
- primary (font-light - light - main - dark - font-dark)
- accent (font-light - light - main - dark - font-dark)
- warn
Your task now is to find your shades of the primary and accent color. Just inherit the warn color from step two.
Visit https://convertingcolors.com/, pick a bright, dark and light shade of your primary color and wright down the color codes. Then pick a very dark and very light shade of your primary color for your font (for best results, pick the darkest and the lighest color that is not absolutely black (#000000) or absolutely white (#FFFFFF)) and write it down. Repeat this step for your accent color.
Note: It is not always a good idea to simply pick a lighter and darker shade of exactly the same color. If you see a lack of e.g. blue in your darker shade, add some more blue.
If you want to apply your color palette on the material theme (or a similar framework) you can test it on https://in-your-saas.github.io/material-ui-theme-editor/.
Examples
This is a final example of a color palette for e.g. a sports products website. The color accent-dark is a little more red than the rest of the accent colors.
Third step: ✔
What's Next?
Now you can apply these colors in your mockUp. When implementing a webApp you will likely use CSS (or SASS/SCSS/LESS). I recommend putting the color codes into variables and swap these into a separate file. The example in step three uses the syntax for variables of SASS/SCSS. When using the Material framework, you can also override the Material Theme.
After building some elements on my new website I usually make a few corrections in my color palette, because only after seeing the colors in the final design I can decide if e.g. the accent color is bright or the contrast between my primary and accent color is high enough.
I hope you enjoyed this article. Thanks for reading!
Any ideas or feedback?
I would like to know your thoughts and experience related to this topic.
Do you like this article? Follow me on Twitter and don’t miss any future posts.
Top comments (0)