By John Eberhard

I recently began working on a new custom web design for a veterinary ophthalmologist client. The first thing I usually do on such a project is to review 100-150 websites from others in the client’s industry. This gives me ideas, and allows both me and the client to see what is already being done in the industry. So in doing this with this veterinarian client, it forcefully brought home to me the importance of having a color scheme on a website. And how a lack of a color scheme makes the site look amateurish and gives it less impact. I was almost shocked at how bad most of them were.

So what is a color scheme exactly? A color scheme is a set of colors that are selected to use in a design, that work well together. Then those colors are used repetitively throughout the website in a way that makes the site cohesive.

Unfortunately, what I saw in a lot of those websites was basically no color scheme at all, i.e. colors were just used randomly. The themes looked professional in most cases, but the colors did not reflect a cohesive color scheme. And the sites did look amateurish.

So how does one put together a good color scheme?

Color Wheel

The first thing to know about color schemes is to know about the color wheel.

Here are some general rules about using the color wheel.

1. In general you want to use 1-3 colors for your color scheme (not more), not including white.
2. One of those colors will usually be your “main” color in your color scheme.
3. A color can be used in conjunction with its “color opposite,” i.e. the color opposite it on the color wheel. That means blue-orange, purple-yellow, red-green.
4. You can use a color plus the ones next to it on the color wheel.
5. You can add white to one of your colors to make what is called a tint, or add black to it for what is called a shade.
6. You should stay away from using all the primary colors together, i.e. red plus blue plus yellow. This tends to look garish.
7. Repetitive use of any design element, including color, makes it stronger.
8. You can always use a little splash of a color that is not in your color scheme, but not in a major way.
9. The way you use the color scheme also includes the colors in the photos you select. If you can find (or edit) photos that fit well with your color scheme, that will enhance and strengthen the color scheme, particularly if the pictures are large. This does not mean you can’t use photos that don’t fit the color scheme, but the more you can use ones that fit it, the stronger the color scheme will be.

Good Examples

Here are some examples of sites that have a strong color scheme:

http://www.animalvisioncare.com/
This one is all earth tones, yellow, orange, brown. Notice they chose photos for the slide show that include those colors. And notice how the colors are repeated throughout the site, in the logo, the headlines, the background, the navigation buttons, the footer at the bottom.

http://veterinaryvision.com/
Main color is a dark green, paired with a reddish orange. Again those colors are repeated throughout. I would have used more of a regular red instead of reddish orange, but it works.

http://stvopets.com/
Simple color scheme of just red and black, but repetitive use of those colors gives the site a feeling of cohesiveness.

http://www.southernveterinaryeyecare.com/
Nice use of color opposites purple and yellow. I would have used a little lighter yellow, but it works.

http://www.arkahsd.com/
Brown-orange-tan color scheme.

https://lvvsc.com/
Purple and yellow again.

http://www.dallasvetspecialists.com/stephanie-beaumont/
This site is mainly white with gray and black, with small accents of blue and purple in the logo. But it comes off as elegant.

Bad Examples

https://vcahospitals.com/eye-clinic-for-animals
Cringe-worthy use of color. Logo and buttons at the top are dark blue, then in scrolling down the page we have large blocks of orange, teal green, bright red, lighter blue, magenta, purple, and dark green. This is a major chain too, so they didn’t have to go the DIY route.

http://urbanvetcare.com/
This site has super bright neon green, pink and orange. It almost works in making a statement just with the colors all being super bright. But I think it would have worked better without including orange, which just throws it all off.

https://www.animaleyeconsultantsd.com/
No color scheme. Just white with black headlines and text. Paired with an overall weak design.

http://www.animaleyevetmurrieta.com/
The logo has colors that just don’t look good together, and that dominates the site.

http://www.aecwilton.com/
This site uses a light yellowish-green, then a purplish red and gold. Might have worked without the gold.

http://www.animal-eye-doctor.com/index.html
This is a case of the gold and black color scheme clashing with the photos on the home page. Now note how the color scheme looks good with the photos at the top of this page:
http://www.animal-eye-doctor.com/cataract-surgery.html

http://www.ivghospitals.com/
This site has a logo that is dark blue, orange and lime green. Then they try to use all three of those colors on banners, boxes, and headlines. Yikes!

http://backmountainvet.com/glaucoma-screening/
This sites just has white a really boring pale green, until you get to the bottom where there is a dark reddish brown. You would think this combination would work, but the green is so pale it offers no contrast with the mostly white site.

Summary

A well done color scheme really adds to the impact of a site. A poorly done or absent color scheme lessens the impact or aesthetics of the site or can even make it unpleasant to be on the site.

Today with the plethora of DIY (do it yourself) platforms like Squarespace, Wix, and Weebly, they have themes made for you, but you still have to input content into the site yourself. And not to insult anyone, but not everyone has a feel for color combinations.

Even if you are using a DIY platform or have bought a pre-designed WordPress theme, it still pays to bring in an experienced designer to make sure the color scheme and other aspects of the final presentation are coming out right.