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.

Luckily, you don’t need to reinvent the color wheel to build a great website. In this post, we’ve curated a list of the 21 best color combinations used in web design that you can try out yourself. This way, you can skip the coworker debates about whether both green and orange belong on your homepage, and get one step closer to launch.

Free Workbook: How to Plan a Successful Website Redesign

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 a visual example. 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

Hex codes: #F93943, #7EB2DD

an example of the Coral Red and Viking color scheme

Image Source

2. East Bay, Moon Raker, and Ghost

Hex codes: #424874, #DCD6F7, #CACFD6

example of the East Bay, Moon Raker, and Ghost color scheme

Image Source

3. Viking and Karry

Hex codes: #7EB2DD, #FFE8D4

example of the Viking and Karry color scheme

Image Source

4. Tan Hide, Vermilion, and Acapulco

Hex codes: #F98866, #FF420E, #80BD9E

example of the Tan Hide, Vermilion, and Acapulco color scheme

Image Source

5. Nepal, Ship Gray, and Botticelli

Hex codes: #90AFC5, #3E363F, #C4DFE6,

example of the Nepal, Ship Gray, and Botticelli color scheme

Image Source

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

Hex codes: #00A6A6, #98DBC6, #F18D9E, #E6D72A

example of the Persian Green, Vista Blue, Mauvelous, and Sunflower color scheme

Image Source

7. Marigold Yellow, Ice Cold, and Vista Blue

Hex codes: #F6E278, #BCF4F5, #98DBC6

example of the Marigold Yellow, Ice Cold, and Vista Blue website color scheme

Image Source

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

Hex codes: #6E352C, #CF5230, #F59A44, #E3C598, #6E612F

example of the Spice, Tuscany, Jaffa, Calico, and Yellow Metal website color scheme

Image Source

9. Alto, Mandys Pink, Chestnut Rose, and Stiletto

Hex codes: #D9D9D9, #F5B3B4, #D15656, #94353

example of the Alto, Mandys Pink, Chestnut Rose, and Stiletto website color scheme

Image Source

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

Hex codes: #E1DCD9, #8F8681, #A67F78, #3E3C3C

example of the Swiss Coffee, Schooner, Pharlap, and Mine Shaft website color scheme

Image Source

11. Tulip Tree and Punga

Hex codes: #F2AB39, #563C16

example of the Tulip Tree and Punga color scheme

Image Source

12. Swans Down, Monte Carlo, and Observatory

Hex codes: #D1EDE1, #7BC5AE, #028C6A

example of. the Swans Down, Monte Carlo, and Observatory website color scheme

Image Source

13. Your Pink, Bittersweet, and Alizarin Crimson

Hex codes: #FFC2C3, #FE7773, #EA3238

example of the Your Pink, Bittersweet, and Alizarin Crimson website color scheme

Image Source

14. Pampas, Your Pink, and Melanie

Hex codes: #,F1EBE9, #FFC2C3, #E6CBDD

an example of the Pampas, Your Pink, and Melanie website color scheme

Image Source

15. Mountain Meadow and Magnolia

Hex codes: #1B998B, #F8F1FF

an example of the Mountain Meadow and Magnolia website color scheme

Image Source

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

Hex codes: #E07A5F, #3D405B, #DECDF5, #81B29A, #F2CC8F

example of the Terracotta, Gun Powder, Moon Raker, Acapulco, and Manhattan website color scheme

Image Source

17. Bittersweet, Cosmos, Nile Blue, and Seagull

Hex codes: #FE7773, #FFD8D8, #194049, #87CEEB

example of the Bittersweet, Cosmos, Nile Blue, and Seagull website color scheme

Image Source

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

Hex codes: #4DD7FF, #AEFFF1, #32C3EE, #3B8FA1

exmaple of the Malibu, Aero Blue, Picton Blue, and Boston Blue website color scheme

Image Source

19. Navajo White and Vivid Tangerine

Hex codes: #FFE0AC, #FF8C8C

20. Dove Gray and Aero Blue

Hex codes: #666666, #B5FFE9

example of the Dove Gray and Aero Blue website color scheme

Image Source

21. Milano Red and Black Pearl

Hex codes: #BA1200, #031927

example of the Milano Red and Black Pearl website color scheme

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.

Blog - Website Redesign Workbook Guide [List-Based]

 website redesign

Originally published Sep 24, 2018 6:00:00 AM, updated August 13 2020

Topics:

Website Design