5 Web Design Color Palettes – Web UI Inspiration

by on October 16, 2015

Fresh and innovative , bold as fuck, design color scheme ideas

5 Web Design Color Palettes – Web UI Inspiration

  •  
  •  
  •  
  •  

So I often go looking for web design color schemes on Pinterest, and beautiful web design color schemes on Dribbble, but I thought I’d brainstorm 5 color schemes for web design from my perspective and share them on my blog to help kickstart other designers as they have helped kickstart me in my work doing Conversion Rate Optimization and Web Development. Here are my quick takes on bright, high-end, trusted, bold and natural color schemes.

Feel free to take and use. I’ve provided Hex colors in the design and in CSS for quick use.

Bright and Airy

 

Color Palette Ideas - Web Design - Airy, Accessible, Light, Hearted, Yellow, and dark grey blue

I’m  a huge fan of the black and white + 1 color scheme, and here with yellow there are different shades of yellow, but essentially the concept is the same. Keep it simple and add one color, albeit with variations. This gives a bit of class without getting to rambunctious, but still being bold and fresh.  This color scheme could go well on a lifestyle blog, a home-goods store, a product or service that was directed at women primarily perhaps but still had crossover appeal.  I feel like this color scheme smacks of the site Brain Pickings, and could be lovingly referred to as intellectual lemonade.

Use this web design color palette in CSS:


.med-yellow {color: #E6CE1D}
.light-yellow {color: #F4DD08}
.bright-yellow {color: #FDEC00}
.classy-grey {color: #403F45}

 

High End and Classy

 

Gold and black, Web Design UI / UX Inspiration , Color scheme Ideas, Design Seeds Websites like, Adobe Kuler, White Silver Gold Black and Grey

 

Gold always feels a bit luxurious in design, especially when paired with a deeper gold. Well look at that, I did a black and white + one color scheme again. Of course, it’s not always the case that one gets the chance to create a website without some kind of color scheme in mind, as companies often have brand standards and guidelines, but I like to test my hand and dream big as though I had complete control. Sometimes you have the opportunity to mix up new color combinations with even established brands, and I want my color-wielding muscles to be fit. I call this one ‘I make shit look expensive.’

Use this web design color palette in CSS:


.dark-gold {color: #8E793E}
.light-gold {color: #AD974F}
.intellectual-grey {color: #231F20}
.light-grey {color: #EAEAEA}

 

Trusted and Safe

 

Red and blue - web design ui / ux inspiration color schemes

Blue is the color of trust in web design and branding, as many studies on color psychology have un-earthed, and is also preferred by many people both men and women to most other colors. Thus it elicits trust, and can be a great fallback if color psychology is very important to your trust. I call this scheme, Always Hungry American.

Use this web design color palette in CSS:


.dark-blue {color: #213159}
.sky-blue {color: #3d6098}
.sexy-red {color: #f04b4c}
.fresh-grey {color: #e7e7e7}

 

Why are so many websites blue? Because we want to be seen as trustworthy! Not all blues are equal however, my websites blue was inspired by the dusty blue with a hint of green used by a Minneapolis artist, Jesse Draxler in some pieces of his.

 

Innovative and Fresh

Fresh and innovative , bold as fuck, design  color scheme ideas

 

I do love the gradient in this design. I’m using color burn in a gradient overlay over the top of the photograph in illustrator so that the shadows come through, but the original coloring doesn’t. I deem this scheme worthy of the name ‘Now & Later,’ don’t get it stuck in your teeth.

Use this web design color palette in CSS:


.purple-rain {color: #49205E}
.purple-plain {color: #805BA5}
.purple-stain {color: #BC519E}
.canary-yellow {color: #D9E254}

Natural and Earthy

 

Earthtones, web design inspiration, natural, earthy artisinal, handmade color scheme ideas

 

The browns and greens speak to the natural, and the original photograph comes out to play. The instagramy flavor of the photograph (lower contrast, and a light fade) gives a nice back-drop to some earth-tones. Simply put this scheme could be referred to as the dirty duck.

Use this web design color palette in CSS:


.rural-blue {color: #2e303e}
.earth-brown {color: #493932}
.mallard-green {color: #4f6339}
.homey-taupe {color: #ece8d3}

Thank you for reading my random color rant here, and checking out some ideas for web design color scheme inspiration. If you’re grateful or for fun, drop your favorite hex code in the comments below and give it a ridiculous or expressive name. :)


  •  
  •  
  •  
  •  
Free Web Design Audiobook
  • Eliezer Pujols

    It’s awesome!!!!

    • Tim Brown

      Thank you! :)

  • http://www.IkeashiaWorksInPajamas.com Ikeashia Barr

    Great Post and yes I love the Gold and black color scheme :-)

    • Tim Brown

      Appreciated :)

  • Abegail Louise Acosta

    I know it’s to late to comment but I just want to say that some palettes that you’ve mentioned are awesome. #ColorPalettes #WeMakeWebsite

    • Tim Brown

      I don’t know that it’s too late.. lol

      • Abegail Louise Acosta

        hahaha XD

  • Andrea Blakely

    I love that I saw this pinned on Pinterest by someone I didn’t know and went to a website of someone that I do know. Way to go Tim!

    • Tim Brown

      Thanks Andrea :) Hope you are well

Ready to get started?

Get a free consultation now