20 Best Colors for Websites: Color Schemes & CSS Hex Codes

Disclosure: We are a professional blogging site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.


There are crucial things that go behind the making of a gorgeous website. One of these is color. Selecting the best fonts and best colors for websites is always a challenging task.

Where fonts increase the readability, colors are the most crucial aspect of a design. Selecting the right color scheme is something that every artist and designer puts a great deal of thought into. The color scheme of your design is capable of making or breaking the project.

Importance of Color Scheme for Your Website?

Color serves asthe most potent psychological tool for gaining the audience’s attention. It canbe used as a call-to-action for the website.

Color helps inprocessing and storing images more efficacious than black and white images. Thecontrast creates a mental appeal when coherent with your business theme.

This helps withbrand recognition and prompts the visitors to your site to take action.

A right colorcombination can make the website more memorable and also provokes emotional stimulation.

When a website iscolorful, it makes the experience enjoyable and pleasant for the visitor. Wrongcolor schemes can make UX irritating.

A pleasantexperience, in turn, leads to higher conversion rates. Apart from awell-designed user-interface, the right contrasted color scheme will help avisitor to navigate through the site content quickly and easily.

Good color combinations can also prove to be useful when it comes to developing content hierarchy or focusing on call-to-action or critical information.

Here are 20 Best Colors for Websites

#1 Soft Tones

Soft tones are intrend, and as the name suggests, the colors are classy and quiet. It is theideal choice if your brand belongs to the fashion or jewelry industry. Thissimple tone is capable of working wonders.

The tones workwith each other and make the jewelry or fashion content on the page stand out.However, the layout is as important as the color scheme. Usually, these kindsof websites have minimal text.

Instead ofcramming several products on a single page, the site takes on the approach ofonly one at a time. An excellent example of such a website is CreationsNamale.

website color schemes

 Colors Codes: #c5d5cb, #9fa8a3, #e3e0cf

#2 Balanced and Colorful

Cool and warmhues are one of the best color combinations. The combination has a soothingeffect on the visitor. From an earthy terracotta to bluish-green, this colorscheme is quite attractive.

It is suitablefor modern and youthful designs. It can serve as a sound color palette forhealth websites.

Also, minimal text is recommended for such sites to avoid giving it a cluttered look. Active Theory is a site that has made use of such color tones.

website color palettes

Color Codes: #E27D60, #85DCB, #E8A87C, #C38DE, # 41B3A3

#3 Gradient Greens and Blues

Using a gradientscale, take the simple colors of blue color and then blend it with varioustones. In case your website looks outdated and dull, you can try addinggradient colors to it.

This will offer amodern look to your design. The latest site of Stripe is using the color palette.

color schemes for websites

This is asoftware used by internet businesses to process payment. To stay updated withthe latest trend, they have introduced this color scheme to their website andgave it an appealing look.

Color Codes: #7DF9FF, #0892D0, #23B2EE

#4 Subtle and Succulent Web Color Scheme

When it comes todesigning a website that looks professional and gives a classy and subtle lookat the same time, Subtle and Succulent color scheme is the one to go for.

The mixture oflight, and yet classy color makes this color scheme great for professionalmessages and appeal, especially for websites related to accessory design.

In fact, avisitor tends to check such color schemes out from the top of the web-page downto the bottom.

Again. anexcellent example of such a website is Creationsnamale’s refined colorscheme.

The design of thewebsite is very appealing due to its deep colors, yet not too vibrant.

best website color schemes

Color Codes: #acb7ae, #acb7ae #acb7ae, #c2b490

#5 Sleek and Modern Pink and Black

If you want to create a website with a modern and sleek design, you can go for jet black and bright. It gives the website a trendy look. Use the soft tone of pink as the background to make the black stand out.

Also, add brightpink at some subtle locations. Cowboy has made gooduse of this color palette.

color palette for website

A majority of thepeople tend to use the color pink for targeting female customers. However, ifyou take a look at Cowboy, you will notice that there isn’t anything feminineabout it.

It can appeal toboth genders. It is time to throw away the stereotypes and choose this colorcombination for your e-commerce website.

Color Codes: #000000, #C39EA0, #FA255E, F8E5E5, #C39EA0

#6 Striking and Simple Electric Blue with Black

It is challengingto shift your attention when you come across a minimalist design like the onefor this website called Bert. Usually, these kinds of sites havesmoky and dark backgrounds combined with electric blue shades.

modern color palette

This makes thewebsite look striking and, thus, is a winning color scheme for various serviceagencies, consultancies, and solution providers.

Color Codes: #0B0C10, #1F2833, #C5C6C7, #45A29E, #66FCF1

#7 Throwback Red and Orange Tones

2019 has seen acomeback of retro colors. Several brands are using popular colors from the 80sand 90s for their website.

However, theyhave incorporated a modern twist. Take a look at the homepage of Spotify.

best background color for website

You will noticethat the red and the orange tone has a throwback vibe to it. The warm colorswhich give people the nostalgia of their adolescent years and childhood. Thepolka dot color of Spotify seems to be inspired by the 90s.

However, thedesign is trendy and uses a gradient scale that is very modern for blendingcolors.

Keep in mind thatit is necessary to ensure that you have a fair idea of whom you are targetingusing these colors.

Color Codes: #10EE67, #FECB00, # F5B842

#8 Gorgeous Contrast

Sometimes, awebsite might not look that attractive with the normal color schemes. Thebusiness or theme that it drives may need something sharper.

This is wherecontrast colors can make the website exponentially appealing.

The colorcombination consists of two opposite colors like dark and light, giving theperfect combination of dark background with light and vibrant text or viceversa.

This makes thetext and the website pop out due to colors, which makes it more noticeable.

For instance, ReputationSquad uses a simplecolor palette and design scheme.

color combinations for websites

Color Codes: #61892F, 86C232, 222629, 474B4F, 6B6E70

#9 Elegant Skin Tones with Elegant Colors

This is a uniqueblend of color. Skin tones with elegant colors like ruby and dark imperial blueare good color schemes for websites that have a nuanced message to relay.

It is reservedbut approachable and sophisticated but fun.

These are thetypes of grey-area messages which are efficaciously sent with an appealingcombination. ChordSurfer has made gooduse of these color tones.

good color schemes

Color Codes: #EFC7B7, #BAB2B5, #EEE2DC, #123C69, #AC3B61

#10 Soft Grey and Yellow with Vibrant Deep Green

Take a look at the website of the QED Group. It offers services to individuals, as well as companies for improving organizational developments with the application of behavioral economics and psychology.

best color palettes

It can be saidthat the business model of QED is unique. Along these lines, they have usedsome of the modern color tones on the website.

If you take alook at the home page, you will notice that the color scheme is a little busierthan the ones which have been mentioned previously. However, they have put uppretty well with this design.

Generally, peoplefeel that green, yellow, and purple tones might be hard on your eyes. However,by using grey and lighter tones in the background, they can add brightcontrasting colors.

Color Codes: #dddfd4, #fae596, #3fb0ac, #173e43

 #11 Dark Horse

A combination ofdark and earthy tones like grey, slate, and silver, popping out with brightertones of yellow gives a great visual appeal to the website. Every text looksclear with simplistic fonts across dark backgrounds.

It makes the web-designappear sleek and modern. Check out the website of IndianScouts. You will noticea dark, warm and beautiful combination of bright and dark look.

good color schemes for websites

The color isgreat for automobile and mechanical website.

Color Codes: #feda6a, #feda6a, #feda6a, #feda6a

#12 Precious Metals

The use ofmetallic tones over white background not only looks elegant and sharp but alsobrings put a royal and premium look to the website.

This is somethingthat has been put to use by KAE.

The company notonly has used the brilliant color scheme on the website, but also on theirstationery and other products.

If you want togive an expensive and elite look to the website, this color scheme can do thateasily.

website design color scheme

This color schemeis mainly based on a white background with the use of metallic color shades fortext.

Color Codes: #bd8c7d, #bd8c7d, #8e8e90, #49494b

#13 Audacious Yellow Against Dark Grey

Vivid yellow andPortland orange against dark grey screams for attention. Your audience willimmediately notice what you have to say on the website. This color combinationis full of energy.

Thus, it is justperfect if you want to get a bold and contemporary look. ASSIKO is a websitededicated to festivals and parties. The color scheme sits perfectly with thedesign.

best color schemes for websites

Color Codes: #FF652F, #272727, #747474, #FFE400, #14A76C

#14 Loads of Red with Muted Tones

When you checkout the color schemes that we have discussed till now, you will notice that themost popular color is red. This is because red is the most potent butchallenging color to use when it comes to a website.

Psychologically,it is the most appealing color. That is why you will always see it associatedwith big-ticket brands like KFC or McDonalds.

One of the mostuseful applications of this color is to use it against a pop of colors. Anothergood way is to pair it up with some muted colors such as grey and sand brown.

Five/Four has made use ofthese tones. As a matter of fact, a significant portion of the website usesred, and it is successful because they have used muted tones for the remainingparts of the website.

professional colours scheme

In case, theywould have paired red with light blue, bright orange. It might have been toomuch for the visitors to take. Softer colors go perfectly with red. However, ifyou are using these tones, you should avoid going overboard with the color. Useit wisely.

Color Codes: #5A7670, #B89F5D, #FA292A

#15 Futuristic Primaries and Pastels

When it comes toselecting a color scheme for websites, it is better to follow the footsteps ofthose who have enough experience. There is no need for reinventing the wheel.One such example is Anton & Irene.

best background colors for websites

This is aprofessional designing company based in New York. They specialize in digitalproducts and design. The website has a very trendy and modern color palette.One good thing about it is the futuristic feel which comes right out.

You will noticethat the site uses more colors than the websites which have been discussedpreviously. In case you want an artistic touch for your website, you need touse different combinations of light blue, purple, grey, orange, and yellow.

Color Code: #bccbde, #c2dde6, #431c5d, #e6e9f0, #cdd422

#16 Dynamic and Texturized Dark Tones

Charcoal, darksienna, and a burst of pale red will give your website a color scheme that is amuch have for futuristically and elegantly designed websites.

The color combinationis quite versatile and can be used for various projects with ranges fromeditorial content to modern-looking corporate reports. One good example of theuse of this color palette is HAUS.

webpage background colors

Color Codes: #2F4454, #DA7B93, #2E151B, #376E6F, 1C3334

#17 Black on Black

You will noticethat black is a standard color across many websites. However, it is usedsparingly. It is generally used for text and numbers as the background or theprimary color.

However, thisdoes not mean that you will not be able to use black more abundantly for thecolor scheme of your website, particularly when you are using different tonesof black.

If you want tocheck out how it looks, the homepage of JY BH can be a goodexample. When you combine various shades of black, you will have a gradienteffect, which you will also notice in some of the early examples on our list.

futuristic color palette

The gradientblack color palette offers the site a mysterious look. JY BH sells luxuryaccessories and garments for women, as well as men. This color scheme has beenpopular for several years and continues to be a common choice.

Color Codes: #151516, #090A0A, #151617

#18 Energetic and Clean Blue Tones

If you check outthe Avoconseil website, youwill notice that the shades of violet and blue is particularly pleasing to theeye. It can evoke peace and energy at the same time. Sky blue and blueberryhave been combined with amethyst.

They triggerpsychological attraction and decrease the bounce rate instantly.

website color schemes

This gives thesite a refreshing and attractive look. It is suitable for all designs that areaiming to create positive emotions.

Color Codes: 56809, #84CEEB, #8860Do, #C1C8E4, #5AB9EA

#19 Fun and Youthful Tones of Yellow and Mauve

The colorful andplayful scheme of yellow, mauve and blue can give a vibrant and youthful lookto a website. It can be an excellent choice for shopping websites that arelooking to be trendy and attract a younger audience.

A good example isthe website of famous musician Pharrell Williams.

website color palettes

You will noticethat it has a white background, which makes the vibrant hues like tangerine,bright turquoise, dark orchid, and yellow stick out. It projects a happy andyouth-filled emotion full of stories and experiences.

Color Codes: #A64AC9, #FFB48F, #FCCD04, #17E9E0, F5E6CC

#20 Flat Design Color

In case you arenot aware of the phrase term flat design. You might have seen such websitesbefore with no gradients, drops, or slope. These kinds of sites do not have athree-dimensional element.

Take a look atthe flat-designed website of Render. Flat designcolors are generally quite super saturated and bright or super dark. Renderprovides video production and editing services, and its website provides adirect and sharp feel of professionalism.

website color scheme

They provide animmediate seriousness to your business persona. The user notices feelings ofdiligence as your website portrays a standard industrial tone.

Color Codes: #00887A, #FFFFF, #D3E3FC, #FFCCBC, #777A6F7

With so manyoptions, it is time for you to ditch the old and dull color you have beenusing. It is necessary to use modern color schemes, which can affect websitesales today.

Selecting theright color palette for the website shouldn’t be difficult. If you have toupdate the website colors to make it look modern, trendy, and unique, you canmake use of any colors which we have mentioned above.

As a matter offact, you can use some of the exact color codes which have been provided.

However, when youare selecting the color, you need to take the demographics of the website intoaccount. Also, consider the emotions and personality of the target audience andthe number of colors you would like to use.

Kulwant Nagi

Hi! I am Kulwant Nagi. I created this blog in 2011 with the vision to help new bloggers. I am running more than 10 blogs on various categories and running a digital marketing company in India now.

2 thoughts on “20 Best Colors for Websites: Color Schemes & CSS Hex Codes

  1. Hi Negi
    I didn’t know about colour and colour combination But after reading this post I learn something that I think, enough for me to create elegant website.

    Thanks for your great advice

Leave a Reply

Your email address will not be published. Required fields are marked *

How I made $700,000 with affiliate marketing
FREE 10 Days Training
Overlay Image
How I made $700,000 with affiliate marketing
FREE 10 Days Training
How I made $700,000 with affiliate marketing
FREE 10 Days Training
START YOUR BLOGGING CAREER..
Join this FREE 7-Days training to get access of 7 emails in your inbox.
We will send one email everyday to teach you everything you need to become an awesome blogger.
Overlay Image
Want to Learn How to Increase your Customers Ten Fold?
Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
Learn how to Start Your Affiliate Blog from Scratch in a “Professional Way."​
Join other 34,000+ subscribers on my mailing list and I'll give you FREE 10-days training to start your affiliate marketing career with ease.​
Learn how to Start Your Affiliate Blog from Scratch in a “Professional Way."​
Join other 34,000+ subscribers on my mailing list and I'll give you FREE 10-days training to start your affiliate marketing career with ease.​