The 20 Best Color Combinations to Try on Your Website [Bookmarkable Guide]

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.

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: 

1. Color theory - How colors and visuals interact with each other to create an aesthetically pleasing design. 
2. 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. 

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: #7EB2DD

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.

Image Source

2. East Bay, Moon Raker, and Ghost

• East Bay: #424874
• Moon Raker: #DCD6F7
• Ghost: #CACFD6

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.

Image Source

3. Viking and Karry

• Viking: #7EB2DD
• Harry: #FFE8D4

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.

Image Source

4. Tan Hide, Vermilion, and Acapulco

• Tan Hide: #F98866
• Vermilion: #FF420E
• Acapulco: #80BD9E

If you love oranges but are seeking something more vibrant than Karry, Tan Hide and Vermilion are beautiful sunset-like colors.

In some cases, they can be a little overwhelming, so be sure not to overdo it. Consider cooling them off with a soothing color like the pale green of Acapulco.

Image Source

5. Nepal, Ship Gray, and Botticelli

• Nepal: #90AFC5
• Ship Gray: #3E363F
• Botticelli: #C4DFE6

Ship Gray is another fantastic alternative to boring black text with its super dark contrast. This plays out well when paired with the pale blue-grays of Nepal and Botticelli.

In the example below, they’ve added a lovely orange to this palette for the occasional pop of color.

Image Source

6. Persian Green, Vista Blue, Mauvelous, and Sunflower

• Persian Green: #00A6A6
• Vista Blue: #98DBC6
• Marvelous: #F18D9E
• Sunflower: #E6D72A

When done well, this color scheme accosts the monitor or page with dramatic color without being too harsh. The green, coral, and yellow are soft yet disarming.

In the example below, they're used liberally, giving a summer vibe of candy or popsicles.

Image Source

7. Marigold Yellow, Ice Cold, and Vista Blue

• Marigold Yellow: #F6E278
• Ice Cold: #BCF4F5
• Vista Blue: #98DBC6

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.

Image Source

8. Spice, Tuscany, Jaffa, Calico, and Yellow Metal

• Spice: #6E352C
• Tuscany: #CF5230
• Jaffa: #F59A44
• Calico: #E3C598
• 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.

Image Source

9. Swiss Coffee, Schooner, Pharlap, and Mine Shaft

• Swiss Coffee: #E1DCD9
• Schooner: #8F868
• Pharlap: #A67F78
• 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).

Image Source

10. Tulip Tree and Punga

• Tulip Tree: #F2AB39
• Punga: #563C16

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.

Image Source

11. Swans Down, Monte Carlo, and Observatory

• Swans Down: #D1EDE1
• Monte Carlo: #7BC5AE
• Observatory: #028C6A

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.

Image Source

12. Your Pink, Bittersweet, and Alizarin Crimson

• Your Pink: #FFC2C3
• Bittersweet: #FE7773
• Alizarin Crimson: #EA3238

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.

Image Source

13. Pampas, Your Pink, and Melanie

• Pampas: #F1EBE9
• Your Pink: #FFC2C3
• Melanie: #E6CBDD

Another combination with the bold Your Pink color, this one leans into a bubblegum-type theme with the lighter Pampas and Melanie colors.

Image Source

14. Mountain Meadow and Magnolia

• Mountain Meadow: #1B998B
• Magnolia: #F8F1FF

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.

Image Source

15. Terracotta, Gun Powder, Moon Raker, Acapulco, and Manhattan

• Terracotta: #E07A5F
• Gun Powder: #3D405B
• Moon Raker: #DCD6F7
• Acapulco: #80BD9E
• Manhattan: #F2CC8F

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.

Image Source

16. Bittersweet, Cosmos, Nile Blue, and Seagull

• Bittersweet: #FE7773
• Cosmos: #FFD8D8
• Nile Blue: #194049
• Seagull: #87CEEB

The pale blue of Seagull and pale pink of Cosmos go well with the bold coral of Bittersweet and the dark Nile Blue (which presents as a dark bluish emerald).

For a bold look, make the latter the primary colors in the design with the softer ones as subtle accents.

Alternatively, you can go for a more understated look with softer backgrounds and pops of bold color.

Image Source

17. Malibu, Aero Blue, Picton Blue, and Boston Blue

• Malibu: #4DD7FF
• Aero Blue: #AEFFF1
• Picton Blue: #32C3EE
• Boston Blue: #3B8FA1

Check out this semi-monochromatic color combination composed of blues. Aero Blue and Boston Blue have a hint of green tint, though, to make things visually interesting instead of minimalist.

Image Source

18. Navajo White and Vivid Tangerine

• Navajo White: #FFE0AC
• Vivid Tangerine: #FF8C8C

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.

Image Source

19. Dove Gray and Aero Blue

• Dove Gray: #666666
• Aero Blue: #AEFFF1

But if cool is more your speed and you want to retain a bit of eye-searing boldness, Aero Blue is a good option. The dramatic aqua can be paired with a toned-down Dove Gray as well.

Image Source

20. Milano Red and Black Pearl

• Milano Red: #BA1200
• Black Pearl: #031927

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.

Image Source

Adding a Splash 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.