How to Choose a Color Scheme for Your Website
Painting a room is typically all about making a relaxing and beautiful space — but those first few moments after walking into a paint store can be terribly daunting. A wall of swatches to choose from, each card only slightly different from its neighbors.
The choice is by no means permanent, but the color should be something you’re proud of. You can go for brighter, more vibrant tones to make a splash, while others might prefer or expect a tone that’s a bit more muted. Your wall color can be bold or understated — a risk that pays off or a gamble that falls flat.
The same goes for the colors you choose for your website. People can distinguish roughly 7 million different colors, so it might seem like long odds for finding just the right tone for your site.
Fortunately, switching up color schemes on a website can usually be accomplished with some minor button-clicking — no last-minute runs to the hardware store for primer. Whether you’re looking for a pop of color on your walls or to drive online conversions, however, here are a few tried-and-true notions worth considering.
Looking for professional web design help? Sign up for a FREE consultation with RipeConcepts, one of the world’s leading creative and web design firms.
What Hues Communicate to Our Brains: The Psychology of Color
For as long as we have been creating art and building civilizations, humankind has assigned symbolic meanings to colors and explored the ways our brains perceive them.
The ancient Egyptians mixed mineral-based pigments to infuse their art with color-based meanings: green symbolized growth, abundance, and the afterlife; red, the color of blood and fire, represented death and destructive energy, and gold was the color of the gods. The 19th-century German poet and statesman, Goethe, conducted a philosophical exploration of the color wheel, opening the door for enduring scientific color studies in the emerging field of Western psychology.
Some studies, both anecdotal and scientific, suggest that the sight of Van Gogh’s sunflowers and McDonald’s golden arches are likely to inspire similar effects on the brain — namely, a boost in energy and joyful feelings (that the latter hopes will inspire cheerful, vivacious french fry cravings).
Recent research indicates that up to 90 percent of today’s consumers purchase products based on color. Still not convinced? Forget about your content and product for a moment and consider this: 42 percent of online shoppers base their opinion of a website on design alone.
Color choice matters a lot — be it on the walls of your living room, your sarcophagus, or the landing page for your blog or business.
Gender, Age, and Cultural Upbringing May Color Our Perceptions
We know color has an impact on our brains, but the section of the globe where you grew up — along with your age and gender — quite likely affects how you perceive color.
Take, for instance, the way purple is perceived in the U.S., the U.K., India, and Thailand: where most people in the Western countries happily associate purple with luxury and wealth, the color represents mourning and sorrow in India and Thailand.
Similarly, the yellow in McDonald’s golden arches — found in 120 countries and territories across the globe — is associated with happiness virtually worldwide. However, depending on where its 36,000+ restaurants are located, McDonald’s crafts its color scheme to appeal to the cultural preferences of its patrons.
Don’t drive yourself bonkers trying to choose whether your blog should be accented with teal or lilac, but do keep in mind how your target audience may perceive those choices. For instance, men tend to gravitate toward strong, bright colors, while women typically prefer softer tones. Blues and greens are widely accepted and rather safe choices, while you may want to steer clear of oranges and browns. Younger folks tend to prefer brighter colors, but people’s preferred palettes tend to become more muted with age.
A Spectrum of Themes for Different Means: Choosing Website Colors
Whether for your house or your website, it’s always a good idea to make sure the structure is sound before you start slapping new paint on the walls.
Having a solid web host is like having a team of licensed contractors and technicians on call 24/7: your host ensures the walls and joints of your site are strong and secure, the lights are on, and nothing leaks. That way, you can focus on the details and furnishings that make your guests (read: potential customers) feel comfortable and at home.
Stressed out about choosing a color for your website? Close your eyes and picture yourself walking into a massage studio or a relaxing yoga class — or take a quick spin on Google to research local studios where you might treat yourself to a de-stress session. What do you see?
Ahh, now that we’re in a mindset bathed, perhaps, in tranquil blues or blissful, mossy greenish-grays, we can relax and remind ourselves that our brains know what we’re doing. We’re actually wired for this.
You can usually trust your intuition about color if you keep in mind one universal truth: every design tells a story. Our web design choices dictate our visitors’ perceptions of us, so the most important thing to consider when choosing the color scheme for yours is how do you want your story to be read?
Legal and financial firms, for example, often want to command clients’ trust and underscore their professionalism in cool, stately grays and confident navy blues. Food bloggers and grocery stores, however, typically eschew appetite-suppressing cool blues and grays for warm and vibrant reds, oranges, and greens that stimulate the appetite.
In other words, are you looking to give off a friendly, local farmer’s market vibe with a cornucopia of warm hues — or something sleeker and more polished, like a skyscraper on Wall Street? Will bold, disruptive colors strategically placed on crisp white backgrounds highlight your prowess as a thought leader in tech or as an innovative entrepreneur?
Yes, choosing color may seem like a tricky business — but one of the most important choices you can make is not to overthink it.
Color Scheming: You’ve Settled on a Dominant Color — What Next?
Once you’ve chosen a dominant color that captures the character of your website, it’s time to zero in on the secondary color to round out your scheme. Here are the options laid out on the color wheel.
- Monochromatic: Monochromatic schemes use a single color and explore different variants of light and saturation. While monochromatic schemes are considered easiest on the eyes, they run the risk of being bland. A well-placed splash of complementary yellow or an analogous purple can accomplish a lot, for instance, on a page awash in shades of blue.
- Analogous: Analogous colors are next to each other on the color wheel and generally create combinations that are pleasing to the eye. Unlike monochromatic schemes, analogous colors rub shoulders with the colors adjacent to them on the wheel (picture red, orange, and yellow hues of autumn leaves intermingled on a tree). Analogous color schemes are often found in nature and typically have a harmonious effect.
- Complementary: Complementary colors appear opposite each other on the color wheel, creating a high contrast, vibrant, attention-grabbing scheme when used together. Use them sparingly to emphasize details you want to stand out (cough *call-to-action buttons* cough).
- Triad: Triad color schemes use colors that are spaced evenly apart on a color wheel, like the points of a triangle. Purple, green, and orange is a classic example of a triad scheme — which is best applied when one color dominates and the other two are used as accents.
Choosing color schemes can feel overwhelming, especially when delving into more complex combinations like split-complementary and tetradic schemes — so perhaps the easiest thing to keep in mind when starting out is that some of the most visually-pleasing and effective color schemes keep it simple.
Consider Shades and Tints when Choosing Colors that Complement
Now that your primary color is chosen and you have a basic color scheme concept, it’s important to understand and consider other factors. Fine-tune your colorful combinations by playing with tints, tones, and shades.
- Tint: Tints are created when you add white to any hue on the color wheel to lighten, desaturate, and dial down the color’s intensity.
- Tone: Tones are the gray area, so to speak, between tints and shades. Tones are created by adding both black and white to the original hue to either darken or lighten it and to decrease the saturation of the original hue.
- Shade: Shades are created by adding black to a hue, resulting in a richer, darker, and more intense color.
Keep in mind that jarring color combinations can have an exhausting effect on the eyes. Consider a scheme with bright orange text on a bright blue background, for instance: although the colors create a high contrast, they are a literal eyesore. Tweaking shade and tone, however, evens out the color values, resulting in a visually pleasing and easily-read gold-on-navy scheme.
Make Colors Pop Where it Matters Most for Conversions
With 90 percent of split-second purchase decisions coming down to color, it cannot be underscored enough the vital role the hues you choose play in website conversion.
DreamHost knows a thing or two about designing landing pages that convert. Social media outreach, reliable web hosting, and SEO optimization each play a role in funneling customers to your store or blog — but something as simple as a vibrant, attention-grabbing call-to-action button or well-placed whitespace can work wonders.
The best landing pages aren’t busy. They’re simple, direct, and cemented in good design principles. Apply your newfound knowledge of color theory as you consider these landing page design factors and tips:
- Does your headline stand out? Be aware of your background colors and never let your color scheme swallow your message.
- Is your body copy readable? Don’t be afraid of basic black on white! Not only is it the most easy-to-read color combo, but it also creates a clean, minimalist feel in almost every context.
- Is your call to action bold and alluring? If you have a clickable call to action, she’s the diva who demands attention. This is where you’ll want to make your contrasting colors pop.
Unleash Your Inner Code-Free Design Guru with DIY Design Tools
Perhaps by this point, you’re thinking this lesson in art history and color theory has been delightful, but who has the time or patience to spend hours tweaking a website’s color scheme?
Thankfully, tools abound that help match and craft a color palette to your whims and wishes. Adobe Color is one of my favorites, while Colour Code provides a cursor-driven experience that lets users fly through color options. What’s more, the hex codes are readily available.
For those who want an extraordinarily easy time of implementing a new color scheme, using a website builder is a great way to take the stress out of designing and building a page. It’s that friend you can rely on to help paint your living room without dripping paint on the baseboards or leaving accidental blotches at the edges of the ceiling.
It’s also the best way to keep things simple. Imagine you have a managed hosting plan (remember, that’s your team of rugged contractors working around the clock to ensure the walls, plumbing, and electric wiring are solid) paired with a website builder — your own personal interior designer who’s equipped with a useful tool belt, carpentry skills, and all the paintbrushes required.
With a website builder like DreamHost’s Remixer, no one has to be a graphic design expert or a coding whiz to build beautiful websites. Even the most indecisive among us can get started with a professionally-crafted theme, and then customize elements like colors and fonts to align with the story we want to tell.
The Do’s and Don’ts of Choosing Colors for Your Web Page
In web design, as in interior design or fashion, there are classic guidelines that never go out of style. Pay attention to the Do’s and Don’ts of Website Design and always consider what the colors you choose communicate.
What do your color choices suggest about the story you want your website to tell? Do you intend to stimulate or soothe your audience? Do your color choices convey sophistication and cool professionalism, or warmth and approachability?
How does your color scheme affect the navigability and usability of your site? Does it help direct your audience’s attention to the places that matter most — like your call to action badge? Is the text easy to read?
Are your color choices creating an unintended Lisa Frank effect — otherwise known as a rainbow-hued sensory overload? Is the effect intended? Take a step back and think about your fluorescent chartreuse choices.
When in doubt, keep it simple, and remember: There is always room to learn from past mistakes.