4 Quick Tips For Using Colors in Web Design

Do websites look nice when they use all the colors of the rainbow? Probably not. How can you use colors in web design that actually looks good? Using colors properly can give your web designs that professional and clean look. Here are a few simple tips that will help you choose the right colors and use them properly in web design.

Tip #1: Use one base color

That one color can be used to build your whole color scheme so most likely, its better to use one base color. You can use two ways to choose a base color, by getting “inspired” by visiting sites like flatuicolors or you can use dribbble’s color search feature. I also recently found colorhunt to be a good tool as well.

Tip #2: Use color to draw attention

This is what I call the accent color. This color can be used for things like call-to-action buttons to anything that needs to stand out on a web page. However, it should only be used once or twice since using it all over the web page will make it, well, not an accent color right?

Your accent color must complement or go well together with your base color. You can find a complementary color or colors that go well together by visiting paletton.com. You simply put your color’s hex code in the Base RGB field and press each of the color structures (the circle buttons with dots in them) to get different results. This will give you colors that match well with your base color.

Tip #3: Never use black

Pure black should be avoided. Black tend to overpower the other colors you tend you use because it is not a natural color. Its better to use a subtlety lighter black, dark gray for example. Check the header used here. It’s black but its opacity is turned down a little which makes it appear not pure black. Ian Storm Taylor’s article- Design Tip: Never Use Black gives a very detailed reason why you should never use black.

Tip #4: Use Neutral Colors

Although I said you shouldn’t use a whole rainbow of colors in your color scheme, you can include neutral colors such as your light and dark gray as well as white for things such as text. You can use different shades of gray for differentiation.

Colors and Emotions

Before I conclude, I want to leave you with some colors and emotions they spark.

Red: Power, passion, strength, excitement

Orange: Cheerfulness, creativity, friendliness

Yellow: Happiness

You can find more at Color Psychology: The Psychological Effects of Colors.

A tip from Smashing Magazine: A Simple Web Developer’s Color Guide More energetic brands tend to use lighter colors while more serious, corporate brands use darker colors.