Nov 12 2013

24 Flat Designs with Compelling Color Palettes

11-12-13_BlogPostColorPalettes

From iOS7 to websites, there’s evidence everywhere we look that flat isn’t going anywhere. However, flat doesn’t mean there’s no dimension. In fact, a number of these 24 sites have a lot of depth and layers. And flat designs definitely have fantastic color palettes that include both bold & muted tones.

Enjoy this followup to my other color palette post, 50 Beautiful Color Palettes for Your Next Web Project (which includes suggestions for color tools), and our Betterment post on color theory.

Need more flat inspiration? Check out our 50 flat design examples in addition to those listed below. For more on the flat trend, this Web Designer Depot guide to flat design, as well as this Awwwards look at the flat aesthetic, both of which can help you capture the trend for your own project.

First peruse the selection of palettes, then see the palettes in action below. I chose the most visually prominent colors, so be sure to check out the parent sites for the whole spectrum. Seeing the colors in context will show you what vibrant colors (& more neutral shades) look good for hover states, blocks of text, backgrounds, and more.

Ladies & gentlemen, we now present a palette for each hour of the day (and the sites that included the hues) :D Enjoy!

The Flat Palettes

1. Banana CaféBanana Café Palette

2. Carbon CrayonCarbon Crayon Palette

3. The Selfie RevolutionSelfie Revolution Palette

4. HydrosysHydroSys Palette

5. svkariburnusvk Palette

6. VVIVVI Palette

7. MySuccessMySuccess Palette

8. Gimmii MagazineGimmii Palette

9. BlogInBlogIn Palette

10. ReadymagReadyMag Palette

11. Present PlusPresent Plus Palette

12. TemperTemper Palette

13. AdSempreAdSempre Palette

14. Connect Mania

Connect Mania Palette

15. BarCamp 2013BarCamp Palette

16. Full EnglishFull English Palette

17. KarlynKarlyn

18. usertifyUsertify Palette

19. AlchemyAlchemy Palette

20. Karrie GurnowGurnow Palette

21. Graus Arquitectura TécnicaGraus Palette

22. Agence UzikUzik Palette

23. GratisographyGratisography Palette

24. Bells DesignBells Design Palette

The Sites From Whence the Palettes Came

1. Banana CaféBanana Café Site

2. Carbon CrayonCarbon Crayon Site

3. The Selfie RevolutionSelfie Site

4. HydrosysHydroSys Site

5. svkariburnusvk Site

6. VVIVVI Site

7. MySuccessMySuccess Site

8. Gimmii Magazine
Gimmii Site

9. BlogInBlogIn Site

10. ReadymagReadymag Site

11. Present PlusPresent Plus Site

12. TemperTemper Site

13. AdSempreAdSempre Site

14. Connect ManiaConnectMania Site

15. BarCamp 2013BarCamp Site

16. Full EnglishFull English Site

17. KarlynKarlyn Site

18. usertifyUsertify Site

19. AlchemyAlchemy Site

20. Karrie GurnowGurnow Site

21. Graus Arquitectura TécnicaGraus Site

22. Agence UzikUzik Site

23. GratisographyGratisography Site

24. Bells DesignBells Design Site

The Takeaways

Now, to improve my palette posts, I’m curious about what you do with the palettes you find. Do you pin them on your Pinterest boards to share with friends, choose a hue to make your site’s background color, or use them to redecorate your living room? Let me know in the comments because I want to stock these posts with as many literal and figurative takeaways for you as possible. So, how do you use color palettes you find online? 

About the Author:

Julia Larson is a freelance copywriter & copyeditor. When not on a quadrilateral device, she’s on her yoga mat, a hike, or a cooking spree. Connect with her on Google+ and Twitter.

Leave a Response

6 Responses

  1. Jan 28 2014
    Tom durkin

    Really useful, thanks.

  2. Feb 15 2014
    Akhtar

    Well written and nice examples of Color Palettes, Thanks.

  3. Feb 25 2014
    Dave

    Very useful. Thanks so much Ms Julia

  4. Apr 08 2014
    kat

    lovely color palettes. Really like Present Plus, the site look great.