Choosing the right color scheme is essential to your website’s success. Your layout and other design choices — including font — should be developed in concert with your color scheme, which can ensure readability, cohesiveness, and beauty in the final product. Unfortunately, making that choice or creating a color palette from scratch can be quite the challenge. That’s why for today’s post I’ve put together a collection of 50 beautiful color palettes that are ready to use for your next web project. If you like these, check out another 24 palettes I’ve recently rounded up.

Getting the Most Out of This Post

Before diving into the color palettes I’ve collected, I want to mention a few tools that can help you get the most out of this post. Colorzilla for Chrome/Firefox and ColorPick Eyedropper for Chrome are free tools that will help you capture the data (such as hex codes) that you will need to start experimenting with these palettes.

Editor’s Note: Want to make your own palettes even better? Check out our post on Using Color Theory to Create Better Color Palettes.

Remember that Photoshop will display certain colors far more vibrantly than they will look on the web when you use hex codes. For example, a greyed, soft pink looked super saturated until I chose “Save for Web” to preview it (this article has some thoughts on how to remedy that).

That’s all. Without further ado, here is our palette collection. Enjoy!

Pick Your Palette

1

Giant Goldfish

 

2

Cardsox

 

3

Fitz Fitzpatrick

 

4

Campfire

 

5

Aladdin

 

6

Chrome Sports

 

7

Papua New Guinea

 

8

Barni Design

 

9

Instapuzzle

 

10

Our Little Projects

 

11

State of the Owner

 

12

SoftwareMill

 

13

iGaranti

 

14

Vintage Romantic

 

15

Nicholas Jackson Design

 

16

1920 Leyendecker

 

17

WerkPress

 

18

Silmo Paris

 

19

Dark Sunset

 

20

The Color of Traffic

 

21

MandLoys

 

22

Sa Barca de Formentera

 

23

Contad

 

24

Magme

 

25

Enterprise Foundation

 

26

Scrollab

 

27

Mohiuddin Parekh

 

28

Boy-Coy

 

29

DrupalCon

 

30

Windows of New York

 

31

Lorenzo Verzini

 

32

Raspberry Theme

 

33

Paw Studio

 

34

Visually Columbia

 

35

Andaz

 

36

Secret Key

 

37

FIG

 

38

Viximo

 

39

Osaki

 

40

Kashi

 

41

Bassenettes

 

42

Adam Hartwig

 

43

Alexandra Kuban Web Design

 

44

Gravual

 

45

Scott McCarthy

 

46

Made Together

 

47

Aesthetic Invention

 

48

LRXD

 

49

Enso

 

50

El Designo

 

Bonus Resources!

If you’re anything like me, then this post has inspired you to brush up on your color theory and the skills necessary to put it to good use on your next project, in which case I highly recommend checking out the following articles:

If there are any colors you’re dying to know more about, ColorHexa (which certainly “looks like the Wolfram Alpha of color”) can help you out.

We’ve also had an awesome commenter, Dima, make a GPL file of these palettes that works with GIMP, Inkscape, etc., which can be copied in (~/.config/inkscape/palettes/ or ~/.gimp-2.8/palettes/) and has a white separator between each palette.

Time for some discussion: Where do you find your color inspiration? From photographs, the web, or fabrics? What’s the certified, 100% best way to get that colorful spark? Tell us all about it in the comments below!

About the Author
Comments
  • http://h-am.tumblr.com Stuart

    I’d be interested in hearing about what emotions and themes you’re trying to play on with these swatches? 14. Vintage Romantic and 45. Scott McCarthy design seem especially intriguing to me. This reminds me of the editorial essay in a collection of writing and I’d be really interested in hearing what about these speak to you.

    • Julia Larson

      Hey Stuart,

      Thanks for your comment!

      As far as emotion goes, I’d say that each palette contains its own feel, but each is high-contrast (either the palette already in the 5 hues or has the potential to be 5 accents with a grayscale/black-and-white).

      Generally the ones with muted tones (like 14 & 45) encourage me to leisurely peruse the site, while the more vibrant, candy-colored palettes spur me towards the given CTA. Those two you mentioned both offer calmer palettes with some “vintage” nostalgia and a faded/greyed feel, yet they still offer high-contrast potential (as Scott McCarthy shows on his site). There’s something about the muted, almost dustiness of these two palettes, too, that makes me think that either could go well as a color scheme for a house’s exterior or interior. What emotions and themes do you sense in them?

      Also, which editorial essay did the post remind you of? I’m curious to learn more about it :-) Thanks for sharing!

      P.S. You may enjoy this blog post that addresses color theory for individual hues: http://blog.bufferapp.com/the-science-of-colors-in-marketing-why-is-facebook-blue

  • http://emyth.com/evoke Jonathan Raymond

    Great post … and on behalf of the team behind #11 (State of The Owner), thanks for the compliment!

    • Julia Larson

      Hi Jonathan,

      Thanks so much! Glad you enjoyed the roundup :)

    • http://www.website.com AmyInNH

      State of the Owner collection is closest to my house interior/exterior, which I had to hire a decorator to pick out because I’m (shamefaced) that indecisive. Very happily living with these colors.

  • Brian

    Sorry to be that picky guy, but the expression I think you want is “without further ado”. I do like your choice of color palates. (Just kidding – I know the word is “pallets” … oops, I mean “palettes” of course :-)

    • http://dtelepathy.com/blog Nathan B Weller

      Thanks Brian! Fixed via mobile. Hopefully I didn’t miss any ;)

  • Greg

    No color palate/design conversation should ever be had without mentioning the Adobe site, Kuler. THIS is what designers should be using.

    • http://dtelepathy.com/blog Nathan B Weller

      Greg,

      Kuler is an amazing tool! I’m pretty sure some of these were either made there or pulled directly from there.

      Best,

      Nathan

  • http://www.webdesigncompany.com.hk Mr Web Design

    Nice color for web design , thanks for sharing

    • Julia Larson

      You’re very welcome! Glad you enjoyed the color combos I rounded up. Stay tuned for more color-oriented posts (and loads of other good stuff) on the Betterment blog :D

  • http://www.psychalive.org Lena

    I love how bright and bold these colors are. I think Goldfish is my favorite.

    • http://www.dtelepathy.com/blog/author/julia Julia Larson

      Lena, Happy to hear you like the many hues :D Right on, Goldfish is great–blue and orange is probably my favorite complementary color pairing.

  • http://betterment veronica

    love the colors

    • http://www.dtelepathy.com/blog/author/julia Julia Larson

      Veronica, I’m delighted to share the colors with you and all our readers! Hope you enjoy exploring the Betterment blog :D

  • http://geniusknight.weebly.com Geniusknight

    wow this is an Amazing collection ! :)

    • http://dtelepathy.com/blog Nathan B Weller

      Glad you like it!

  • http://www.jlmadison.com Jasmyn

    This is just what I needed! My website is in dire need of updating. Numbers 14, 41 and 45 really caught my eye! Thanks ;)

    • http://www.dtelepathy.com/blog/author/julia Julia Larson

      Happy to hear this was helpful to you, Jasmyn! Stuart (in the first comment above) also gravitated toward 14 & 45. Best of luck with your site update :D

  • Natalija

    Nice colours… but when I design a website I rather stick to 2-3 colors. for me LESS IS MORE

    • http://www.dtelepathy.com/blog/author/julia Julia Larson

      Hey Natalija, Thanks for your comment! Good point–keeping things simple is a smart tactic :D What tricolor combos are your go-to’s when you design? Glad you enjoyed the colors!

  • http://calibratedmarketing.com Bob M.

    Thanks so much for putting together this fantastic selection! I wonder if it’s possible for someone to address a question that, oddly enough, I’ve had trouble finding.

    What’s the rule for applying the colors across a web property? What colors, left to right (or whatever), are applied to which elements? Does it start with site body and move inward to content wrapper, etc., ending with followed links or something?

    Some sort of best practice method would be very helpful.

    Thanks again!

    Bob

    • http://www.dtelepathy.com/blog Julia Larson

      Hi Bob,

      Thank you for your comment! Great question. The majority of the palettes are from live websites, so visiting those may provide some best practices of how those sites have utilized the colors I chose from them. There isn’t a formula for how these colors are arranged within the palettes, but here’s a resource I found that provides some options if you want a variety of lighter or darker options to use for hover states, links, etc: http://colorschemedesigner.com/

      Hope that helps! Glad you enjoyed the selection :D

    • http://www.designtank.ws Chris R

      Bob, you raise an excellent point. An overall color palette is one thing, knowing how to apply 6 colors to different typographic and navigational elements without looking like a rainbow is the challenge. You’d need to click to each of the sites using the palette and really examine how each color is applied: For headings? For hover colors? For buttons? Etc.

      I have the same challenge as you do, and I am a professionally trained designer!

  • oyomtho john paul

    Choosing what colors to use on a webpage has been my worst nightmare. But with this collection I shall have no more nightmares thanks to you Julia Larson. I really appreciate your work.

    • http://www.dtelepathy.com/blog Julia Larson

      Glad it’ll be of help to you! You’re very welcome.

  • http://www.visit2goa.com Goa Packages

    Seriously nice color combination.. .
    thanksss…

    • http://www.dtelepathy.com/blog Julia Larson

      Thanks for your feedback! Hope they come in handy. Which are your favorites? :D

  • http://sleepingshark.com Vincent

    Wow this presented some really nice palettes! I went with #3 when I was designing my first website; my art portfolio. Admittedly I didn’t read up on much of the theory behind the colors and I’m sure I didn’t apply the colors quite correctly but I like the outcome! Thanks for bringing all these together; it was a big help. :)

    • http://www.dtelepathy.com/blog Julia Larson

      Great! I’m glad to hear that this post was helpful. The theory is something I’d enjoy learning about more in depth. Definitely share some links here if you come across guides you end up using :D

  • http://www.classoffederico.wordpress.com Federico Viola

    Hi Julia,
    thanks for this good post. It is a good idea to have a number of palettes to choose from. Selecting colours successfully can be a challenging task due to emotions and values that we attach to them. It should just be fun to pick colours and a certain level of research will help to choose a suitable candidate for a target audience. Well, your post will make the task more fun and definitely easier. Thanks for that!

    • http://www.dtelepathy.com/blog Julia Larson

      Hey Federico, Thanks for your comment and delighted to hear that my post will make the task easier and more enjoyable! You’re right, there’s a lot wrapped up symbolically in each color — and color combo — to contend with.

  • http://www.razvan-bordeanu.com Razvan Bordeanu

    Hey can you give a visit to my personal website and give your opinion about the color palettes ?
    http://www.razvan-bordeanu.com
    you can leave me a message just filling out the contact form
    have a wonderful day !

    • http://www.dtelepathy.com/blog Julia Larson

      Thanks for the request. I’ll give it a look!

  • http://techcollections.co Tech collections

    I was thinking of improving my blog’s appearance and found this. This is really helpful. I would like to know whether any specific palettes are good for technical and food sites(I have one blog http://oishirecipes.com too)?

    • http://www.dtelepathy.com/blog/author/julia Julia Larson

      39 & 40 (Osaki & Kashi) should provide some good colors-for-food inspiration. Generally I’d suggest a warmer palette (including warmer shades of green/blue/purple) for showcasing food. Best of luck with your blog’s redesign!

  • http://clipartzx.blogspot.com isuru prabath

    Great post … thanks for sharing

    • http://www.dtelepathy.com/blog/author/julia Julia Larson

      You’re welcome! Let us know if you use one of them in a project. It’s great to see these resources in action.

  • http://www.letmeatit.com.au Peter

    Thank you for the colour schemes.

    • http://www.dtelepathy.com/blog/author/julia Julia Larson

      Delighted that you enjoyed it!

  • http://www.microedges.com Khuram Shahzad

    Very Beautiful colors for web designing. Thank for sharing a colorful post.

    • http://www.dtelepathy.com/blog/author/julia Julia Larson

      Thanks Khuram! Pleased to hear you liked the roundup. Are there any in particular that you might use for a project? Always great to hear how the palettes are being put to use :D

  • http://graphicdesigngoddess.blogspot.com Rebekah Teller

    I get color inspiration from nature and from children! Kids play with color so effortlessly. http://graphicdesigngoddess.blogspot.com/2014/01/bold-color-choices.html

    • http://www.dtelepathy.com/blog/author/julia Julia Larson

      Great point — young kids (& the young at heart) aren’t afraid to take those color (& fashion) risks ;). Nice post, and great examples of rooms that match your niece’s outfit!

  • http://www.grafixdesignmag.com Tauqeer

    Awesome i would defenetly use LRXD

  • http://www.scottbronkema.com scott

    I wish I had the balls to do something with these color schemes. These are really good.

    • http://www.dtelepathy.com/blog/author/julia Julia Larson

      You can do it! We believe in you :D And glad you enjoy the selection!

  • greg

    just beautiful!! number 35 inspired me to go find my cat and pet him, he’s such a devil. I wonder though, how can one resist making ice cream sandwiches after viewing number 47?? Impossible I say!!!

    • http://www.dtelepathy.com/blog/author/julia Julia Larson

      You’re spot-on with the ice cream reference :D So I need some neapolitan now, and great to hear about your cat!

  • Dima

    I collected the palettes as a .gpl file, https://gist.github.com/dimaursu/9921467 it’s good to use in Inkscape, GIMP or whatever program uses this format too; just copy it in ~/.config/inkscape/palettes/ or ~/.gimp-2.8/palettes/ and you are all set. Each scheme is separated with a white square, called ‘separator’, and the first color of the scheme has the name on it.

    • http://www.dtelepathy.com/blog/author/julia Julia Larson

      Wow, thanks Dima! That’s so awesome that you made this. What a great resource!

  • Brian

    Love all these colors! I was curious, and tried inverting some of the palettes and came up with some really neat results! It just goes to show you how powerful and fun colors can be!

  • Mario Martinez

    This is so helpful! My family and I are designing a website for our long-standing business for the first time ever, and this was definitely a great place for color inspiration.

  • Sara

    What are the hex colors for visually columbia number 34

  • Kirsten NB

    Thanks for this great post. Not only was I finally able to find a color scheme that both my boss and I like, but the Chrome ColorPick Eyedropper is great.

  • Muhammad Faraz

    You just saved my life. This is just awesome.

    Thanks a ton.

  • http://the-virtuous-devil.blospot.com Vikas

    Hey Julia. Thanks a lot. Really helping me get accustomed to better color combinations and of course, getting better designs prepared by the graphics agency. (Followed you on Twitter as well…just now).

  • http://www.openmysip.com Manish

    Hi,
    I have been struggling with the color scheme for my portal, but being a bootstrapped startup have limited resources.
    Can somebody check my portal and suggest some color scheme option on pro bono friendly basis as a Godly gesture.
    Lots of love and warm feelings in advance.
    Thanks.