Jul 09 2013

50 Beautiful Color Palettes for Your Next Web Project

peacock

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.

DTTV_banner

Editor’s note: And in case you haven’t see it, check out our latest design happy hour episode!

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

Color-Palette-Post-01-Goldfish

2. Cardsox

Color-Palette-Post-02-Socks

3. Fitz.

Color-Palette-Post-03-Fitz

4. Campfire

Color-Palette-Post-04-Campfire

5. Aladdin

Color-Palette-Post-05-Aladdin

6. Chrome Sports

Color-Palette-Post-06-Chrome

7. Papua New Guinea

Color-Palette-Post-07-Papua

8. Barni Design

Color-Palette-Post-08-Barni

9. Instapuzzle

Color-Palette-Post-09-instapuzzle

10. Our Little Projects

Color-Palette-Post-10-ourlittleprojects

11. State of the Owner

Color-Palette-Post-11-stateoftheowner

12. SoftwareMill

Color-Palette-Post-12-softwaremill

13. iGaranti

Color-Palette-Post-13-igaranti

14. Vintage Romantic

Color-Palette-Post-14-vintageromantic

15. Nicholas Jackson Design

Color-Palette-Post-15-njd

16. 1920 Leyendecker

Color-Palette-Post-16-leyen

17. WerkPress

Color-Palette-Post-17-werkpress

18. Silmo Paris

Color-Palette-Post-18-silmo

19. Dark Sunset

Color-Palette-Post-19-darksunset

20. The Color of Traffic

Color-Palette-Post-20-colortraffic

21. MandLoys

Color-Palette-Post-21-mandloys

22. Sa Barca de Formentera

Color-Palette-Post-22-barca

23. Contad

Color-Palette-Post-23-contad

24. Magme

Color-Palette-Post-24-magme

25. Enterprise Foundation

Color-Palette-Post-25-enterprise

26. RS collab

Color-Palette-Post-26-rscollab

27. Mohiuddin Parekh

Color-Palette-Post-27-mohi

28. Boy-Coy

Color-Palette-Post-28-boycoy

29. DrupalCon

Color-Palette-Post-29-drupalcon

30. Windows of New York

Color-Palette-Post-30-ny

31. Lorenzo Verzini

Color-Palette-Post-31-lv

32. Raspberry Theme

Color-Palette-Post-32-raspberry

33. Paw Studio

Color-Palette-Post-33-paw

34. Visually Columbia

Color-Palette-Post-34-visually

35. Andaz

Color-Palette-Post-35-andaz

36. Secret Key

Color-Palette-Post-36-key

37. FIG

Color-Palette-Post-37-fig

38. Viximo

Color-Palette-Post-38-viximo

39. Osaki

Color-Palette-Post-39-osaki

40. Kashi

Color-Palette-Post-40-kashi

41. Bassenettes

Color-Palette-Post-41-bass

42. Adam Hartwig

Color-Palette-Post-42-adam

43. Alexandra Kuban Web Design

Color-Palette-Post-43-alex

44. Gravual

Color-Palette-Post-44-gravual

45. Scott McCarthy Design

Color-Palette-Post-45-scott

46. Made Together

Color-Palette-Post-46-made

47. Aesthetic Invention

Color-Palette-Post-47-aesthetic

48. LRXD

Color-Palette-Post-48-lrxd

49. Enso

Color-Palette-Post-49-enso

50. El Designo

Color-Palette-Post-50-el

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: applying color theory to web design, understanding the code behind your color swatches, learning how to assemble your own palette, and our own Betterment article on color theory. And 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.

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:

Julia Larson is a freelance copywriter & copyeditor at digital-telepathy, a UX design agency that crafts meaningful experiences. When not on a quadrilateral device, she’s on her yoga mat, a hike, or a cooking spree. Find her on Google+.

Leave a Response

48 Responses

  1. Jul 09 2013
    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.

    • Jul 09 2013
      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

  2. Jul 09 2013
    Jonathan Raymond

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

    • Jul 09 2013
      Julia Larson

      Hi Jonathan,

      Thanks so much! Glad you enjoyed the roundup :)

    • Nov 13 2013
      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.

  3. Jul 09 2013
    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 :-)

    • Jul 10 2013
      Nathan B Weller

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

  4. Jul 14 2013
    Greg

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

    • Jul 15 2013
      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

  5. Jul 16 2013
    Mr Web Design

    Nice color for web design , thanks for sharing

    • Jul 18 2013
      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

  6. Jul 17 2013
    Lena

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

    • Jul 22 2013
      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.

  7. Jul 18 2013
    • Jul 22 2013
      Julia Larson

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

  8. Jul 25 2013
    Geniusknight

    wow this is an Amazing collection ! :)

  9. Jul 27 2013
    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 ;)

    • Jul 29 2013
      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

  10. Aug 11 2013
    Natalija

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

    • Aug 16 2013
      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!

  11. Aug 27 2013
    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

    • Feb 20 2014
      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!

  12. Sep 18 2013
    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.

  13. Sep 30 2013
    Goa Packages

    Seriously nice color combination.. .
    thanksss…

  14. Oct 10 2013
    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. :)

  15. Oct 19 2013
    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!

  16. Oct 31 2013
    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 !

  17. Nov 05 2013
    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)?

  18. Nov 13 2013
    isuru prabath

    Great post … thanks for sharing

  19. Dec 02 2013
    Peter

    Thank you for the colour schemes.

  20. Dec 05 2013
    Khuram Shahzad

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

  21. Jan 30 2014
    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

  22. Feb 27 2014
    Tauqeer

    Awesome i would defenetly use LRXD

  23. Mar 02 2014
    scott

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

  24. Mar 29 2014
    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!!!

  25. Apr 03 2014
    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.