what colors are best for your website?
“Color directly influences the soul.
Color is the keyboard, the eyes are the hammers, the soul is the piano with many strings.
The artist is the hand that plays, touching one key or another purposively, to cause vibrations in the soul.”
– Wassily Kandinsky, Concerning the Spiritual in Art
Color signifies life. The Earth is filled with colors that delight the eyes as well as heal and awaken the mind.
It is difficult to imagine a world without color, yet we sometimes walk through our day without seeing all of the shades and hues of color in a “brown” Autumn field.
We have millions of colors at our fingertips and our decisions to paint a wall or sign or color a website can be as casual as, “let’s paint it blue”. Yet color matters so much, not only visually, but also in a subliminal way.
There are broader messaging patterns to be found in color perceptions. For instance, colors play a fairly substantial role in purchases and branding.
In an appropriately titled study called Impact of Color in Marketing, researchers found that up to 90% of snap judgments made about products can be based on color alone (depending on the product).
Your choice of website colors is one of the most important decisions you will make in designing and building your website, apart from your words and content of course.
The Internet is primarily a visual medium and color is the easiest and most advantageous way to get your message across to your visitors.
Browse a successful website, and you’ll see different colors that communicate the brand’s message, convey the website’s structure, improve brand recognition, and provide loads of other benefits.
Picking the right colors is important for achieving visual consistency in website UI Design. For instance, using light colors for the navigation menu, and using bright colors for the background can make it difficult for a visitor to read menu items. Also, colors with low value contrast can make it challenging for color blind people to make out the images and words on your website.
A study by UserTesting found that males and females prefer sites with bright or dark colors, and sites that had a white/minimal interface received the lowest ratings.
Women see more colors than men, generally. They are more aware of slight color differences within a color range. (most likely from being “the Gatherer”)
Color Scheme Matters
Color combinations or schemes refer to how two or more colors complement each other. Color schemes or palettes are often defined by where they are situated on the color wheel. Color schemes have different purposes and are used to create different feelings and effects within creative design. The four most common color schemes are known as Complementary, Analogous, Split Complementary and Triadic colors.
Using High And Low Contrast
Generally, high contrast is the best choice for important content, because it is most easily seen. Dark on light or light on dark–it’s the easiest to read. It might not be exciting, but it is readable.
One word of caution, though: If everything is high contrast, nothing stands out and it’s tiring on the eye after a while. The eye needs to rest while taking in information.
Designers often prefer low contrast techniques. They like to make things look beautiful, but beautiful isn’t always the best for readability. Tone-on-tone similar colored combinations are very popular and while they are attractive, they are also difficult for people to read.
Pro Tip: Try to find the balance between beautiful color schemes, and legibility for optimal clarity in your visuals.
In order to use similar colors, while getting the contrast you desire, create a color scheme with both complementary and analogous colors.
Choosing Color Combinations
The color wheel can help you choose great color combinations for your buttons, your infographics, and your call-to-actions.
Keeping your color combinations simple will help you in the long run.
A study from the University of Toronto showed on how people using Adobe Kuler revealed most people preferred simple color combinations that relied on only 2 to 3 favorite colors.
People like simplicity; it makes your content easier to understand if they don’t have to interpret it through many colors. And remember, color has meaning so each color adds or takes away from your message.
Too many colors make for a confusing message. So how do you choose those 2 or 3 colors? The color wheel can help.
Using Complementary (Opposite) Colors
Complementary color combinations make things stand out.
Complementary colors are “opposite” colors. They are opposite of each other on the color wheel, meaning the one color they lack is that one opposite of them.
You might even notice that some of your favorite sport teams use complementary colors. Complimentary colors are also used in most childrens’ products, to catch the eye and create “demanding!”.
Split Complementary Colors Header
If you want to use three colors instead of just two, using split complementary color schemes is a way to capitalize on the power of complementary colors but add a third color to your palette. To use it, you’ll choose one color as your base color, and then the two colors adjacent to its opposite.
A split complementary color scheme doesn’t have quite the same level of tension that a complementary color scheme does, but it’s still visually exciting for your eye. It also adds a level of variety to your color scheme that can be used in a very dynamic, meaningful way.
Using Analogous Colors
Analogous colors sit next to each other on the color wheel. They are “related”, a kind of family of colors that creates pleasing and relaxed visuals. They also don’t stand out from one another. Analogous colors can create subtle and beautiful content, but you may need to add a complementary color to get a particular item to stand out. Overall, I find analogous to be most effective to keep the mind calm while on the frenetic interent.
Using Monochromatic Colors
Monochromatic colors are a single color, with its tints, shades, and tones. They are even more soft and subtle than analogous colors since it’s a color palette based on one single color. Monochromatic colors work great when paired with a single complementary color.
On portfolio websites, where the artists’ images are center, monochromatic is best. Either find a repeating color theme in the artists’ work – or, rule of galleries; white, gray or black.
Most designers—when using complementary colors—pair a rich collection of monochromatic colors with a single complementary color.
Using Triangle, Rectangle And Square Colors
It isn’t difficult to create color combinations that stretch the boundaries of the easy power of complementary opposites and the related analogous and monochromatic palettes. All you need is a triangle, rectangle, and a square.
… coming soon: Psychology of Color
