fbpx

5 Web Design Color Palettes – Web UI Inspiration

By
Updated October 16, 2015
9 Comments
5
Fresh and innovative , bold as fuck, design color scheme ideas

5 Web Design Color Palettes – Web UI Inspiration


Tim Brown

Tim Brown is the owner of Hook Agency, and strategic marketer focused primarily on driving traffic and leads for small businesses and construction companies.

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. 🙂

  •  
  •  
  •  
  •  

Related Posts


Tim Brown

Tim Brown is the owner of Hook Agency, and strategic marketer focused primarily on driving traffic and leads for small businesses and construction companies.

Free Marketing Audiobook

Leave a Reply

9 Comments on "5 Web Design Color Palettes – Web UI Inspiration"

Notify of
avatar
Sort by:   newest | oldest | most voted
Andrea Blakely
Guest

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
Guest

Thanks Andrea 🙂 Hope you are well

Abegail Louise Acosta
Guest
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
Guest

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

Abegail Louise Acosta
Guest
Abegail Louise Acosta

hahaha XD

Ikeashia Barr
Guest

Great Post and yes I love the Gold and black color scheme 🙂

Tim Brown
Guest

Appreciated 🙂

Eliezer Pujols
Guest

It’s awesome!!!!

Tim Brown
Guest

Thank you! 🙂

Ready to Get Started?

Get a free consultation now