DIY Design: Color Palettes

DIY Design: Color Palettes

Picking a color scheme for your website at first seems really easy, until you sit down to actually do it.  Being faced with millions of colors can create a paradox of choice - having too many choices actually makes it harder to choose.

Before you get started it's good to know that most site colors are based on what's called a hex code - a 6 digit value (numbers and letters) starting with a # that tells the code what color to display.  For example #bada55 will display this color .

So where do you begin on your color journey?

I like to start with inspiration.  I usually start by googling 'website color palettes' and finding a site like picmonkey.com/blog/website-color-schemes . This gives a great starting point and lets you see a variety of color schemes and how they are utilized in actual websites.  This one also provides you with the hex codes to use directly in your site.

 

There are also sites like colorhunt.co that have a seemingly endless amount of color palettes. They searchable by categories such as retro, dark, summer and pastel to make sure you can narrow down to the feeling you're looking to portray.

Are you inspired by a site you've seen, and want to know what colors they are using?

There are free tools like Color Picker that allow you to find out the hex code on any site you see on the internet.

Do you have a brand/logo color, but want to know what other colors would work well?

One of my favorite sites for color palettes is coolors.co.  This site not only has a bunch of existing color palettes for inspiration, they allow you to create your own color palette.

When you get to the site you can choose to explore popular palettes or generate your own.  When you choose to generate your own, they'll start you off with a random palette and you can simple press the space bar on your computer to change the palette.  Like a color?  You can lock that color and it will remain.  You can also add your own color and find colors that will look good with it.

 

 What about gradients?

Gradients can be a super fun edition to your website, and when done properly really give it fresh energy. 

My go to site is uigradients.com.  It provides a large variety of beautiful gradients and gives you the hex codes and you can download an image of the gradient as well.

Gradients are even more fun animated with the Banner with animated gradient Design Pack.