When planning out the look of your new business website, you have to decide on the colors you want to use. To make a positive impact on visitors and influence more sales, your color palette should reinforce your brand, make your site easy to read and navigate, and — above all — look good.
But, finding colors that “look good” together isn’t as easy as it sounds. Many factors contribute to how we process color on a visual and emotional level. This makes it difficult to create an effective and original website color scheme from scratch, even if we have some intuitive sense of which color combinations work well and which don’t.
Best Colors for a Website
Unfortunately, there is no universal color combination that is the secret to leads and sales from your website and design collateral. If only it were that simple (but, at the same time, all visual imagery would be pretty much the same as a result).
Instead, there are two things you should consider as you choose the colors for your website:
Color theory - How colors and visuals interact with each other to create an aesthetically pleasing design.
Color psychology - How the colors you choose can change the perception of your brand psychologically.
In essence, color theory helps you choose colors that work well together (like avoiding putting pink text on a purple background because that will hurt the readability of your site) while color psychology can help you create a subversive vibe (like choosing blue for a calming effect).
One thing that you can do is start with a single color or mood and work backward from there to create your color scheme. Alternatively, you can get inspiration from your favorite brands that are already doing it. Luckily, we’ve curated a list of some of the best color combinations used in web design that you can try out yourself.
Best Website Color Schemes & Combinations
Coral Red and Viking
East Bay, Moon Raker, and Ghost
Viking and Karry
Tan Hide, Vermilion, and Acapulco
Botticelli, Nepal, and Ship Gray
Persian Green, Vista Blue, Mauvelous, and Sunflower
Marigold Yellow, Ice Cold, and Vista Blue
Spice, Tuscany, Jaffa, Calico, and Yellow Metal
Swiss Coffee, Schooner, Pharlap, and Mine Shaft
Tulip Tree and Punga
Swans Down, Monte Carlo, and Observatory
Your Pink, Bittersweet, and Alizarin Crimson
Pampas, Your Pink, and Melanie
Mountain Meadow and Magnolia
Terracotta, Gun Powder, Moon Raker, Acapulco, and Manhattan
Bittersweet, Cosmos, Nile Blue, and Seagull
Malibu, Aero Blue, Picton Blue, and Boston Blue
Navajo White and Vivid Tangerine
Dove Gray and Aero Blue
Milano Red and Black Pearl
Of course, a group of mysterious color names isn’t much help without seeing them in action. (What is “Pharlap,” anyway?)
So, for each scheme, I’ve provided the hex color codes for each color in the color combination as well as a visual example of how they can work together. All examples are pulled from websites acclaimed for their visual appeal. Feel free to use these sites as inspiration for your color palette, layout, and overall aesthetic.
1. Coral Red and Viking
Coral Red: #F93943
Viking is a subtle pale blue that provides a soothing breath of fresh air to any site. Adding splashes of coral red provides a shock of contrast without overdoing it on saturation. The example below also adds additional blues and greens for a cool oceanic vibe broken up by the splashes of coral. Consider making the red paler if this particular shade of coral is too dramatic.
If you've ever been bored by text elements in predictable blacks and dark grays, East Bay is a dark blue that makes a great alternative. Swap white backgrounds with the pale gray of Ghost for fancier white space. Then add pale accents like Moon Raker lavender for a soft palette or opt for high-saturation accents like the pink in the example below.
Okay, we can't get enough of the pale blue that Viking provides. And, speaking of soft palettes, pairing it with a soft creamsicle color like Karry makes for a soothing feel in pastel complementary colors.
The example below takes the palette even further with Viking and Karry's starker, more saturated counterparts as accent colors.
Marigold Yellow and Vista Blue (which is really more of a pale green) are warmer colors that contrast nicely with the temperature difference of the Ice Cold blue despite being an analogous color scheme. The result is subtle but fun color shifts.
8. Spice, Tuscany, Jaffa, Calico, and Yellow Metal
Yellow Metal: #6E612F
Pastels not your thing? Embrace the strong reds of Spice and Tuscany and the dusky yellows of Jaffa and Yellow Metal. They provide a hot, spicy feel to any design. In addition, with Calico, you can have a bright contrast without resorting to white, which may be too cool for the palette.
9. Swiss Coffee, Schooner, Pharlap, and Mine Shaft
Swiss Coffee: #E1DCD9
Mine Shaft: #3E3C3C
Brown can be an extremely versatile color as shown by this monochromatic set of colors ranging from Swiss Coffee (lightest) to Mine Shaft (darkest).
Limited color schemes can be very attractive on minimalist sites. In addition, you can make designs with a light mode (light base and dark text) or dark mode (dark base and light text like in the example below).
Tulip Tree is a deep, saturated mustard color that makes a big statement. Combining it with a dark tinted orange like Punga (which almost presents as more of a dark brown) creates a rich experience on any design. Just look at how UPS uses this scheme with expert color blocking and visually appealing texture.
Minty fresh! Another monochromatic palette, this time with the pale green of Swans Down and Monte Carlo with the darker tint of Observatory. White goes well with this scheme, as do contrasting oranges or corals.
These three colors are all strong pinks heavy on the red hue. With that in mind, they provide a bold, in-your-face type of look. The example below uses this to its advantage by making Bittersweet the primary color. The effect is further emphasized with a cool white and an electric blue as accent colors.
Green and pink aren't exactly complementary colors, so you don't see them paired often. In addition, Mountain Meadow and magnolia don't have the same hue or tint. However, this unconventional pairing works because it subverts expectations. However, because Magnolia is so light and leans toward the cooler side of pink (almost like a pinkish periwinkle), it doesn’t completely clash with the green.
15. Terracotta, Gun Powder, Moon Raker, Acapulco, and Manhattan
Gun Powder: #3D405B
Moon Raker: #DCD6F7
This combination of pastels with the deep, saturated dark purplish blue of Gun Powder creates a soft but trendy and bold scheme. Terracotta, Moon Raker, Acapulco, and Manhattan make excellent choices for colored backgrounds (as shown below) with Gun Powder as contrast for text and navigational elements.
Vivid Tangerine is a dramatic red-pink color that makes a statement on its own. Paired with an understated yellow like Navajo White or even a more saturated yellow, it provides a warm look as bright as the sun.
In the example below, no extra imagery or textures are needed as the colors are loud enough to speak for themselves.
Red is hard to do well in web design, but the more muted Milano Red is easier to work with. It gets even easier with Black Pearl, a blue so dark that it presents as a black with cool undertones. This coolness balances out the muted red for an effective use of color.
At first, it might seem like finding the right color combination should be easy and intuitive. After all, we see effective uses of color all around us, from brand design, to art and entertainment, to fashionable outfits. The truth is, all of these real-world designs have been carefully planned, tested, and at least partially inspired by designs that came before.
Creating the perfect color design for your website is a challenge. But, by sticking to one of the schemes I’ve provided, your site will serve as another fine example of quality web design in action.
Editor's note: This post was originally published in October 2020 and has been updated for comprehensiveness.
Originally published Jul 14, 2021 7:00:00 AM, updated July 14 2021