Line25

The Rising Trend of Bright Flat Colors in Web Design

Read the full post

We’ve seen the use of solid colours increase through the adoption of the flat design trend, but these hues are becoming increasingly vibrant following the release of iOS7 and the colourful iPhone 5C. Dazzling RGB colours are becoming more popular in the latest website designs, with saturation levels at an all time high. This post rounds up a collection of over 20 great examples of the growing trend of super saturated background colors in web design.

Apple

Apple

Mud

Mud

Connect Mania

Connect Mania

Wrist

Wrist

Design Week Portland

Design Week Portland

Lush Type

Lush Type

Transformation Projects

Transformation Projects

Andrew McCarthy

Andrew McCarthy

Mixd

Mixd

Cyclemon

Cyclemon

TWNSND CO

TWNSND CO

Made Together

Made Together

Kick Point

Kick Point

Fubiz

Fubiz

Do a backflip

Do a backflip

Babbit

Babbit

PACE

PACE

HEIKOPAIKO

HEIKOPAIKO

Spring/Summer

Spring/Summer

Octave & Octave

Octave & Octave

Bark PR

Bark PR

Flat WordPress Theme

Flat WordPress Theme

Petra Sell

Petra Sell

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://michaelmoennich.de Michi

    Hi,
    could you tell me how you collect and upload the Screenshorts to your blog? Do you have a specific workflow or a special program?

    Thanks,
    Michi

    • http://tyok.me tyok

      do print screen (press print screen on the keyboard) for windows and paste in PhotoShop (create new doc ctrl + N and ctrl + V) or ms paint, save it.

      For mac do with ctrl +shift + 4. paste in photoshop.

      upload to your web.

  • NedKamburov

    How do you find these websites? I mean you knew some of them but not all I guess? Or am I wrong?

    • http://www.skyblueoceanmedia.com skyblueoceanmedia.com

      Good web browsing does the job I guess..

  • http://www.mariapapandreou.com Maria

    It really is a rising trend (thanks to Apple) but I guess it’s really difficult for a designer to use it right. It’s easy to “hurt” the viewers eye if one doesn’t use the correct colors.

    Most of the examples in your post look really beautiful and also use “easier on the eye” colors on the rest of their page to help the viewer read more comfortably.

    But a couple are too “rough” I think. Especially when you scroll their pages.

    • http://odig.net/ anasbin

      i think they are visually beautiful and elegant ..but i dont think you can use it for more time, coz it really hurt your eyes…!!

    • Louie

      Not that it matters, but this has been happening way before apple decided to go flat. One could easily say, they are late in the game.

    • http://www.starvingmeteor.com Tom Chapman

      This is one time that Apple hasn’t been on the forefront. I think Microsoft (This time LOL) really made this trend popular. Apple is just now catching up.

      You’re right about it being difficult to get just right… I’ve had some trouble with it, which amazed me – because it seems so simple (some people equate simple to easy…me included I guess)

      Then I just started thinking “Easter colors!” – nice soft pastels all over the place, and then it doesn’t hurt my eyeballs :P

    • Jay

      Actually you should thank Microsoft for popularizing it. Flat, content not chrome design was started with Microsoft’s Metro design language.

  • http://www.ryanpeacan.com Ryan

    I’ve been messing around with some flat design ideas for my portfolio, but I’ve been having trouble with the same thing: the colors. It’s hard to find the right color where it compliments the content well and doesn’t drown it out. Flatuicolors.com has some set ones that work alright, been trying to integrate some of those.

    • http://medialoot.com Jenn

      Thanks for sharing that website, I had no idea about it!

  • http://psd.io PSD

    Very good collection here. I love the way apple has done their new iPhone 5C website.

  • http://kalpeshpanchal.co.nf Kalpesh Panchal

    I agree with this, even i have started using the flat design concept now. It’s the latest ongoing trend. Microsoft, Google, Facebook, etc. name it, all are moving ahead with this idea of flat design and people love it.

  • http://www.mmeininger.com michael meininger

    They all look so alike. And I agree that Apple was very late to the game, but Apple’s brand is so strong that they can do nearly anything and fanbois will eat it like candy.

    My real question is…
    Was “flat” design initially created from lack of creativity from developers or did people really start to idolize simple Scandinavian designs..?

  • http://www.dcgws.com Jerralyn Tanoc

    Wow, the bright colors are all wisely used. We all know that bright colors is a big “No” “No” in web design. However, since flat design became trends, it breaks the rules but resulted to more interesting designs. Thank you for sharing this.

  • http://www.150weightlosstips.com Weight Loss Tips

    Nice information abut The Rising Trend of Bright Flat Colors in Web Design, thanks for sharing such a wonderful tip, it is so much helpful for me.

  • http://sitosysgraphics.com/ manojsitosys

    awesome and useful article….
    Web Design Company

  • http://www.pixelsolvent.com Saje Dennis

    It is true that more and more designers are now using RGB colors with high saturation levels as opposed to the solid colors that were being used before. The websites featured in this post are great examples of how one can use these colors to achieve great results.

  • http://www.jabulanidesignstudio.co.za Kim

    This seems to be the new trend and I find myself incorporating these themes into most of my designs. It is simple and modern! Love it!

  • http://www.xhosting.hr/ Web hosting

    Nice designs, coolors are awwsome! New colors new brand ;)

  • http://www.dweb3d.com/blog.html Dweb3d

    definitely a cool look very hand with html5, share the examples are examples of successful designs

  • http://www.subharanjan.in Subharanjan

    After update to iOS7 (flat UI) I often get confused with the icons and its functionality.

  • http://instalogic.com Calgary Web Developers

    I love the pink iphone! :)

  • http://responsivewpthemes.org/ Tyler Herman

    Getting soooooooo tired of flat design.

    Any time something that is easy to recreate/copy that looks good comes around it gets incredibly overused.

    Flat design is the web 2.0 style that got equally played out.

  • http://www.jabulanidesignstudio.co.za Ilse

    I quite like Flat Design. It is clean and fresh and just looks great to me. “Less is more”….

  • http://americommerce.com adam

    I’m a front-end dev for the eCommerce company, AmeriCommerce, and to celebrate the launch of our new admin we threw together a fun landing page targeting web insiders that falls inline with a lot of the examples given here.

    Check it out: http://americommerce.com/responsive-admin-launch

  • http://www.nilsdavisdesign.com/ Paula Beardsley

    You could say that the Apple company is a trend setter what with their top of the line operating systems and gadgets that make people go gaga. Anyway, these are fabulous designs. When better to have them than now when the holiday season is just around the corner.

  • http://www.24thstreetrealty.com Brandon

    I agree with Paula…I believe Apple started the trend with their simple modern look.

    But great examples listed above!