Why are the right colors for your website so important? This article will outline when, why and how to pick your colors in order to make your visitors feel comfortable and convert into buyers/users of your product.
Color theory is often used in marketing and branding. Warm colors attract spontaneous buyers, while cooler ones are more create the sensation of security and elegance.
“Research has reinforced that 60% of the time people will decide if they are attracted or not to a message — based on color alone!”
You can see an example with the three logos below, all taken from some of the top law firms. They are all using cold colors; in this case blue or dark red, black or silver.
They are not emotional like the red or yellow, but corporate, serious and secure.
While if we go for more warm companies, building an emotional bond or simply trying to provide fresh and positive look we can see color pallets as these:
Safe to work web colors
Green is bad, the rest is okay.
… uh …
Okay really, there are things called “safe to work colors” and there is a pretty legit reason for them.
Monitors are very, very different; Settings, technology, and 100 other factors decide the final output of the colors you set. #27B14C on my screen will most likely be different than yours.
Monitors represent color by defined subset of colors which are accurately represented under certain circumstances. In addition to that, your video card might have different settings, some of which you’ve edited manually or working on a weird color mode.
Meaning that while you are designing on your screen, the final look will be most likely different on your client’s monitor. Or if you’re out of luck — projector.
What I advice sometimes is to export your initial concept where you’re applying your full color scheme and do the following test:
With this you will check:
- Does it work on oversaturated/too bright screens?
- Does it work well as black and white? (that is testing color value contrast)
Obviously, you are not supposed to design for bad screens, but it’s important to see if important information is lost due to it.
A very good example can be too light shaded text. I’ve often seen sites that love to add very hard to see #ddd -ish gray colored text. You can see this effect illustrated in the image above.
When I’m outside I have a hard time reading it and I am using a rather good MBP Retina screen… Imagine that on an older TFT screen. On them the technology is such, that the color coming out of the screen shifts when seen from different angle, creating distorted look.
I’ve often had issues when reading dark gray text on light shade of gray under angle. The colors shifted to ugly orange-brown-ish with terrible coloring around the letters because of the Windows font rendering engine.
So in short — be careful, if possible test on more than one screen different from yours. if best — different technology.
What is your primary color
Okay, so enough hardware and complex stuff (even though I didn’t go technical hehe ^^). How do you pick your design’s primary color? Well, 90% of the time that is your brand’s color.
Another very basic example is Android’s official site. It’s is quite minimalistic, a light use of color where they are only applying their primary #a4c639 color for actions like CTA buttons, links and menu items.
How to pick secondary and accent
Now maybe this is the part where I struggled the most. There are a few legit ways to pick secondary and accent colors — eye drop them or measure them.
This whole process can actually take weeks until you get it right having you have the time of course.
First, what I suggest always is to use a color wheel when deciding on your color palette. Very basically said you can decide from checking your Analogous, Monochromatic, Triadic or Complementary colors.
The way picking colors that go well with your exact primary color happens by setting it as “Base color” on Adobe’s color wheel (the one we use). Then it will generate you 4 new colors that are based on your main one.
These new colors are compiled based on formulas and studies developed throughout many years and apply all base rules of color theory about what colors work well together, creating a more harmonious style.
But… as you might see they don’t always look that great, right? That was my main concern initially when I began using this tool, but thanks to many discussions with our team (In which I was mainly against these tools) I agreed that it can actually be helpful.
Here is the deal: When you pick your pretty primary color and you generate your triads or compound or whatever, you can do another, and another, and another iteration of generating colors until you get it right.
For example in the image above my main color is blue and Adobe is saying that red is a good fit, but I don’t like this exact shade of red, so I click on it and generate Monochromatic color variants from it.
Then I grab one of the surrounding colors and generate another set of Complementary colors, producing this:
Where now I find a nice shade of red (the second one) that I really like. I then proceed doing this for all my accent color, which in this case is most likely green. And in the end I come up with this color scheme, base purely on the color wheel:
When to use your colors?
This is also a good question. Now that you have picked some color scheme you need to know where and how to use it.
First — It is nice to add imagery in the design. This will make it more alive and bond better with your visitors.
The color scheme of your images if possible must also follow the generated color schemes from your primary color in the color wheel. This is not necessary as much, but if done correctly will give you a harmonious and balanced look for your site.
Then, after you’ve build the base of your design using only your primary color wherever possible add your secondary for balance and contrast.
You can see this as a live example from Twitter. The primary color is Blue and the secondary is Yellow:
Or you can go for a more minimalistic look like Apple, where you focus on a lot of images and the use of only one primary color to define action like CTAs, links or events.
Sharing some neat color-related tools and libraries:
- http://www.colorhunt.co/ — A very cool lib of palettes.
- http://designspiration.net/colors — You can use other colors 🙂
- https://brandcolors.net/ — See what are the colors for the biggest brands
- https://color.adobe.com — My choice for color wheel
- https://coolors.co/
- https://flatuicolors.com/
- http://www.colourlovers.com/
- http://paletton.com/
- http://enchroma.com/test/instructions/ — And, worth doing this test if you make dessisions based on colors!