Color is an underrated design tool. When used correctly, it can make a website sing. When I was a beginner, I often used too many colors in my designs. My choices weren’t based on much - either trends at the time or whatever mood I was in. Eventually, I would fumble my way to create something nice, but it often took a while.
There’s a better way!
There are three ideas you can use that will make it easier to pick colors. They are: The concept of the site, the brand, and your personal preferences. If you can figure out these three things, choosing colors will be much easier. Let's explore each of them.
Does your site have a concept? It probably should. Here are some examples of sites with concepts: Preserve, Legwork, Si Le Soleil. Look at each example and try to figure out what the concept is (hint: answers at the bottom).
Having a concept can greatly narrow down your color options. If your concept is water-related, using lots of red probably won’t work well. Water & the color red live in different worlds.
Your colors should support your concept. Or at the very least, not conflict.
Let's say you’re doing a site for the Vietnam Veteran’s Memorial in Washington DC. That’s a very serious subject matter. The tone (or brand) of any war memorial is respectful and serious, so your color choices should be as well. Bright and happy colors would feel out of place, in the same way that someone selling balloons near the memorial would feel tacky. Blacks, whites, dark, and muted colors would be a better fit for a war memorial site, these colors would be "on brand".
Or maybe you're doing a site for a big company. In that case, they'll have a well-defined brand which will make picking colors easier. If you’re doing a site for Target, you would likely use a combination of red and white, because red is a large part of their brand. Or a site for Ikea would use their signature blue and yellow. There are some instances when the site experience you're creating will be so far removed from the brand that you can use other unrelated colors. But before doing this, make sure you clear it with your creative director or the client.
Doing a site for a small client? In this case, the brand won’t be well defined in a style guide. For small businesses, it’s much more important to find out what the owners like. Get examples of websites they admire and ask what they like about them.
Your instinct will be to push for colors you really like, but small businesses the owners live and breath the business so it’s just going to be a matter of what they like.
This is the last step. If you’ve decided on a concept and know what the brand represents. Now it's time to figure out what you like and measure it against your concept and the brand. You want things you like that ALSO work with your website's concept and brand. I like to find inspiration from sites like Mind Sparkle Mag. Say your concept is “handmade" like in the Preserve example above. What are some other sites that embody handmade? What colors do they use? Do they use a complimentary color scheme? Analogous? My guess is many of them will use a warm color palette with analogous colors because the concept of "handmade" is a very human notion.
When choosing icons for your site, it is important to make sure they're rendered in a similar style. When your icons live in the same world as your site's color palette, typography, and visual style, the entire site thing will communicate in the same voice. One of the best places to find icon libraries like this is at Icons 8.
Icons are meant to symbolize certain actions. They shouldn't be complex illustrations. The more complex, the longer it will take for the user to digest it. A great icon will use as few strokes as possible, and no more.
A good icon should clearly indicate what will happen when you click it. Some concepts are easier to illustrate than others. A house icon is fairly well recognizable and can be used as a home button. But what about something like the save icon? It's been decades since people used floppy drives. For that reason it's not ideal. However because it's so ubiquitous, a whole new generation of users who has never held a floppy disk in their hand has come to understand what the icon means. So to introduce a new visual icon is risky. I can't say what the right choice is, but it's important to keep these ideas in mind when choosing icons.