Wix Blog: Use Color Theory to Improve Web Design
A good color scheme can make or break a web design. Colors affect the mood and feeling a visitor will have on your site. Learn how to pick a cohesive color scheme that will give your website the desired feel.
Sign up for WixEd! Learn how to build professional websites, create high quality content and develop an online presence – for yourself or for clients. Learn more at http://www.wixeducation.com
Also, subscribe to our channel here: https://goo.gl/d0VmxW
TRANSCRIPTION:
One of the first questions you’ll need to address when you begin to create a website is which colors to choose for the design. Not surprisingly, a website’s color palette is one of the first things that site visitors notice, which is why it has such a fundamental part in the overall design process.
Colors influence a website’s look and style, but also play a significant role in that site’s performance. In other words, the colors you choose for your website can impact its success in terms of visit duration, returning users, click rates, or sales.
So how do we proceed with choosing the perfect colors for a professional website? This is where color theory comes into play. Color theory is an important concept in art and design.
At the heart of color theory is the Color Wheel. I’m sure you’ve seen it before. It looks like this. [show in VG]
The color wheel is an illustrated organization of colors, based on the relationship between them. The base of the wheel is comprised of the three primary colors – red, blue and yellow. Added between those are the secondary colors – green, orange and purple.
In the elementary color wheel, which has 12 colors, the additional six tertiary colors are added, formed as a mix of the primary and secondary ones – yellow-green, green-blue, blue-purple, purple-red, red-orange, orange-yellow. Also common is the 24 hues color wheel, which has a more elaborate breakdown.
The color wheel is divided into two general categories: warm colors, which revolve around yellow, orange and red – including most brown hues – and on the opposite side are the cool colors, revolving around blue, green and purple – including most gray hues.
There’s no right or wrong in choosing warm or cool colors. The choice depends on the effect you want to achieve. Warm colors are considered to be stimulating, and convey action and vitality. Cool colors, on the other hand, are considered to be tranquil, and have a calming effect.
Whether you choose to work only with cool or warm colors depends on your brand identity and on the atmosphere you want to create on your site. Of course, combining warm with cool is also a possibility.
Successful color combinations follow a set of color schemes, most of which are based on the position of the colors on the wheel itself. For instance:
Complementary Scheme: This formula takes two colors that are positioned exactly opposite from each other on the color wheel, like red with green, or yellow and purple. Using two contrasting colors together makes your design more lively. To create a full scheme, add a neutral color to the complementary duo. Beige, light browns, light grays, black or white.
Analogous Scheme: In this formula, you’ll use three colors that are adjacent to each other on the wheel, like orange, yellow-orange and yellow, or purple, purple-blue and blue. Any three colors that sit next to each on the wheel harmonize well, because of their closeness.
Color Triad: Ready to use some geometry? The color triad scheme takes any three colors on the wheel that are of an equal distance from each other, forming a perfect equilateral triangle. Possible combinations would be yellow-green, orange-red and purple-blue, or yellow-orange, red-purple and blue-green. This scheme tends to be very vibrant. You’ll want to create a balance where one of the colors dominates, and the other two are supporting colors.
Split Complementary Scheme: With this formula, start by choosing one color, and adding the two colors that sit right next to its complementary color (creating an isosceles triangle). Possible combinations here would be red, yellow-green and blue-green, or purple, yellow-orange and yellow-green. This scheme offers a refined contrast, one that isn’t quite so bold as the regular complementary one.
Tetradic Scheme: Here you will be forming a scheme from two pairs of complementary colors, making a rectangle on your wheel. For instance, you could combine yellow-orange, yellow-green, blue-purple and red-purple. This scheme is particularly rich. You don’t want color-chaos on your website, so pick one color to set the tone, and the rest to add a nuance.
Monochromatic Scheme: As the name implies, this scheme utilizes different hues of the same color. You could use a wide spectrum that includes the darkest and lightest hues of that color or narrow it down by using the tones around either the dark or the light area. Monochromatic color schemes have a clean and minimalist visual impact…