Top 30 Best Colours for Websites: Colour Schemes and CSS Hex Codes

Visuals are one of the most important factors of any website. So when building a website, you need to think about your audience or customers. You cannot ignore any elements of user engagement as most people will simply leave a website that is unpleasant to look at.

The Importance of Website Colour Scheme

Visuals attract more attention than words. Often people think that colours are there for aesthetic reasons. It is not as simple as people think, the website’s ambience affects the user’s mood. Here are the reasons showing the importance of a Website’s Colour Scheme:

1. Brand Identity :

   Your website’s colour scheme should suit the kind of service or product your business provides. People associate a brand with a colour like Fanta with orange or Coca-Cola with Red. 

2. Emotional trigger:

   Certain colours trigger certain emotions this is why you should study colour psychology, and use the colours that match your business. This way you can trigger the kind of emotions you want in people.

3. Retention:

   As we know colours greatly impact emotions, people will leave a site that looks awful. A good combination of colours is required for improving the retention of users.

4. Conversions:

   You can boost conversion rates by tweaking colours. If you know your customer well you can use colours that suit a specific target base such as different age groups or gender. Small things like changing the button colour from green to red are known to increase conversion rates.

So guys these were the reasons why people should mess around with their website’s colours. But if you are somebody who’s just starting out then you need to know at least some basic colour schemes that would work out of the box.

In this post, we have a compilation of the 30 best colour schemes for websites that you can use straight away. So we have included a visual guide with each colour pairing and we also have given a hex code for those colours.

Best 30 Colour Schemes For Website:

1. Eerie Black, Goldenrod, Alabaster and Cosmic Cobalt:

   

   191716

   E6AF2E

   EOE2DB

   3D348B

2. Charcoal, Persian Green and Maize Crayola:

   

   264653

   2A9D8F

   E9C46A

3. Safety Orange Blaze Orange, Platinum, Silver and Queen Blue:

   

   FF6700

   EBEBEB

   C0C0C0

   3A6EA5

4. Oxford Blue, Royal Blue Dark, Indigo Dye and CG Blue:

   

   #OA1128

   #001F54

   #034078

   #1282A2

5. Midnight Green Eagle Green, Medium Turquoise and Mint Cream:

   

   #1A535C

   #4ECDC4

   #F7FFF7

6. French Violet, Slate Blue and United Nations Blue:

   
   

   #6930C3

   #5E60CE

   #5390D9

   
   

    

7. Mauve, Maximum Blue Purple and lavender Blue:

   

   #E7C6FF

   #C8B6FF

   #B8C0FF

8. Flickr Pink, Byzantine and Purple:

   

   #F72585

   #B5179E

   #7209B7

9. Eggshell, Plae Spring Bud, Olivine And Cafe Au Lait:

   

   #F0EAD2

   #DDE5B6

   #ADC178

   #A98467

10. Manatee, cultured and imperial Red:

    

    #8D99AE

    #EDF2F4

    #EF233C

11. Oxford Blue, Orange Web And platinum:

    

    #14213D

    #FCA311

    #E5E5E5

12. Prussian Blue, Maximum Red and Orange:
    

    

    #003049

    #D62828

    #F77F00

13. Pink Lavender, Lavender Blush and Light Periwinkle:
    

    

    #EFC3E6

    #F0E6EF

    #B8BEDD

14. Oxford Blue, Prussian Blue and Mikado Yellow:
    

    

    #001D3D

    #003566

    #FFC300

15. Beige, Tumbleweeb and Old rose:

    

    #EFEBCE

    #D8A48F

    #BB8588

16. Celeste, Mint Cream and Piggy Pink:

    

    #B2F7EF

    #EFF7F6

    #F7D6E0

17. Sky Blue Crayola, Celeste and Mint Cream:

    

    #7BDFF2

    #B2F7EF

    #EFF7F6

18. Thistle, Columbia Blue and Uranian Blue:

    

    #DEC5E3

    #CDEDFD

    #B6DCFE

19. Medium Turquoise, Queen blue and Charcoal:

    

    #55DDE0

    #33658A

    #2F4858

20. Charcoal, Honey Yellow and Orange Red:

    

    #2F4858

    #F6AE2D

    #F26419

21. Indigo Dye, Columbia Blue and Carolina Blue:

    

    #1B4965

    #CAE9FF

    #5FA8D3

22. Beige and USAFA Blue:

    

    #EFEFD0

    #004E89

23. Xiketic, Dark Purple and Twilight Lavender:

    

    #1A1423

    #372549

    #774C60

24. Twilight Lavender, Popstar and Unbleached Silk

    

    #774C60

    #B75D69

    #EACDC2

25. Metallic Seaweed, Midnight Green Eagle Green, Permanent Geranium Lake and Maximum Yellow Red:

    

    #177E89

    #084C61

    #DB3A34

    #FFC857

26. Amber, Orange Pantone and Winter Sky

    

    #FFBE0B

    #FB5607

    #FF006E

27. Pink Lavender, Mauve and Baby Blue Eyes

    

    #F1C0E8

    #CFBAF0

    #A3C4F3

28. Alice Blue, Unbleached Silk and Dark Salmon

    

    #EDF6F9

    #FFDDD2

    #E29578

29. Maximum Blue Green, Light yellow and Peach Puff

    

    #00AFB9

    #FDFCDC

    #FED9B7

30. Pickr pink, Purple and Trypan Blue

    

    #F72585

    #7209B7

    #3A0CA3

31. Mauve, Maximum Blue Purple and Lavender Blue:
    

    #E7C6FF

    #C8B6FF

    #B8C0FF

Now that you know a basic idea of the best colour schemes that would work with almost every setup you can go forth and start working on the same. We wish you the best in all your website-building endeavours.

So guys, if you liked this post and wish to receive more tech stuff delivered daily, don’t forget to subscribe to the Inspire2Rise newsletter to obtain more timely tech news, updates and more!

Keep visiting for more such excellent posts, internet tips, and gadget reviews, and remember we cover, “Everything under the Sun!”

Follow Inspire2rise on Twitter. | Follow Inspire2rise on Facebook. | Follow Inspire2rise on YouTube.

Sukhdev Miyatra

Sukhdev has a passion for sharing insights and experiences on a wide range of topics from technology to personal development!