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 to ensure readability, cohesiveness and beauty in the final product.
Try again in a bit, and if you are still having trouble, let us know.
The post should arrive in your inbox shortly.
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.
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!
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!
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.
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
Great post … and on behalf of the team behind #11 (State of The Owner), thanks for the compliment!
Thanks so much! Glad you enjoyed the roundup
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.
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
Thanks Brian! Fixed via mobile. Hopefully I didn’t miss any
No color palate/design conversation should ever be had without mentioning the Adobe site, Kuler. THIS is what designers should be using.
Kuler is an amazing tool! I’m pretty sure some of these were either made there or pulled directly from there.
Nice color for web design , thanks for sharing
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
I love how bright and bold these colors are. I think Goldfish is my favorite.
Lena, Happy to hear you like the many hues Right on, Goldfish is great–blue and orange is probably my favorite complementary color pairing.
love the colors
Veronica, I’m delighted to share the colors with you and all our readers! Hope you enjoy exploring the Betterment blog
wow this is an Amazing collection !
Glad you like it!
This is just what I needed! My website is in dire need of updating. Numbers 14, 41 and 45 really caught my eye! Thanks
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
Nice colours… but when I design a website I rather stick to 2-3 colors. for me LESS IS MORE
Hey Natalija, Thanks for your comment! Good point–keeping things simple is a smart tactic What tricolor combos are your go-to’s when you design? Glad you enjoyed the colors!
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.
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
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!
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.
Glad it’ll be of help to you! You’re very welcome.
Seriously nice color combination.. .
Thanks for your feedback! Hope they come in handy. Which are your favorites?
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.
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
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!
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.
Hey can you give a visit to my personal website and give your opinion about the color palettes ?
you can leave me a message just filling out the contact form
have a wonderful day !
Thanks for the request. I’ll give it a look!
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)?
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!
Great post … thanks for sharing
You’re welcome! Let us know if you use one of them in a project. It’s great to see these resources in action.
Thank you for the colour schemes.
Delighted that you enjoyed it!
Very Beautiful colors for web designing. Thank for sharing a colorful post.
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
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
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!
Awesome i would defenetly use LRXD
Yeah, LRXD is a killer one. So vibrant! If you’re looking for more vibrant palettes, you may find more inspiration in my second palette post http://www.dtelepathy.com/blog/inspiration/24-flat-designs-with-compelling-color-palettes
I wish I had the balls to do something with these color schemes. These are really good.
You can do it! We believe in you And glad you enjoy the selection!
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!!!
You’re spot-on with the ice cream reference So I need some neapolitan now, and great to hear about your cat!
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.
Wow, thanks Dima! That’s so awesome that you made this. What a great resource!
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!
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.
What are the hex colors for visually columbia number 34
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.
You just saved my life. This is just awesome.
Thanks a ton.
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).
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.
© 2015 Digital Telepathy
Enjoy the weekly design insider.