Starting a new web design project, whether you have an existing site or not, is overwhelming. While our team at Raving Software will offer guidance and advice throughout the design process, the decisions are ultimately all up to you, the client.
To help you feel less overwhelmed, we’ve created a series of mini design lessons. We’ll cover topics ranging from color to typography to industry jargon and much more. These lessons will serve as quick references to help you be an active participant in the design of your website.
Our first topic is how to choose a color scheme for your website. Color has a dual role of making your website look nice and providing functionality. It sets the tone and personality of your business, categorizes types of content, and indicates desired actions. For example, many forms will use red to indicate if you missed a required field or if the information entered is wrong.
We’ll go over six common color schemes and focus on how you can apply them to your website. We’ll also provide online resources so you can experiment with different color schemes and figure out what works best for you and your business.
COLOR SCHEME 1: MONOCHROMATIC
With a monochromatic color scheme, you use tints and shades of one color. A tint is the base color, or hue, mixed with different amounts of white, while a shade is the base color mixed with varying amounts of black.
We chose a light blue in our example, so our colors would be a mix of that hue and lighter and darker versions of that color. This approach would give your website a very clean and minimal feel.
COLOR SCHEME 2: COMPLEMENTARY
A complementary color scheme uses two colors that are located directly opposite each other on the color wheel. Examples include yellow and purple, blue and orange, and red and green.
While complementary colors go well together, they don’t always provide enough contrast and text can blend or be hard to read. When choosing your colors, it’s important to think about how they look together in different situations.
COLOR SCHEME 3: SPLIT COMPLEMENTARY
A split complementary pattern allows you to have colors that go well together but provide a bit more contrast than a complementary scheme would. Contrast is good for making important content such calls-to-action (i.e., “By now,” “Sign up here”) stand out to your visitor.
Using the color wheel, you’ll pick three colors. In our example, we used yellow as our starting color. We then went directly across the color wheel to its complement, purple. But we won’t be using purple. Instead, we will use the color to the left, indigo, and the color to the right, pink, to complete our color scheme.
COLOR SCHEME 4: DOUBLE COMPLEMENTARY
The double complementary scheme uses four colors, allowing for as much or as little contrast as desired. To determine a double complementary scheme, you’ll choose a base color and find it’s direct opposite on a color wheel. You will then repeat this process with a second base color.
In our example, we started with yellow and then went across to find its complement, purple. Yellow and purple make up our first color pair. We then chose orange as our second base color and went across the color wheel to blue. Now, our color scheme is yellow, orange, blue, and purple. We have a good mix of colors that work well together, but can also be used to create contrast.
Note that the further apart the colors are on the wheel, the more contrast your colors will have. Find the balance that works best for you.
COLOR SCHEME 5: TRIAD
A triad color scheme uses three colors that are equal distances from each other on the color wheel. In our example, we once again started with yellow and then found the two other colors that are all an equal distance apart. In this case, those colors happen to be blue and red, making our color scheme yellow, blue, and red. Notice how there are an equal amount (three) of colors between the ones in our color scheme.
The distance and colors will vary depending on the color wheel you use. We recommend using online tools such as Adobe Color CC, which lets you set a color scheme type and experiment with different colors to find the ones right for you and your business.
COLOR SCHEME 6: ANALOGOUS
An analogous color scheme is very simple to figure out. Pick your base color, and choose the colors next to it.
In our example, we started with yellow and then picked the light orange and light green, which are located on either side of our base color. However, we could have included the two or three colors to the left and right of it as well.
How many colors you choose will increase the variation and flexibility of your overall design.
The six color schemes we discussed are good place to start when choosing colors for your website. Remember these are guidelines to help you figure out what colors will and won’t work well together more than strict rules. Also, our examples didn’t have more than four colors in a scheme but most websites usually use about five to seven colors.
There are many free online tools, such as HTML Color Codes, ColourLovers, and Color Scheme Designer, that let you play around with different colors to find a color scheme that works for you. Plus, your Raving Software designer is always ready to answer your questions.
Is there a design topic you want to know more about? Let us know in the comments or contact us through email.