A Web Designer's Guide To Color

Websites are obviously an extremely visual way of communicating with people, and color plays a very large part in that communication process. Web designers who really understand the power of color can create online properties which are visually compelling in a way that other designers just can't seem to match.

The guide we've put together here will lead you on a journey of discovery through color, and what it means for your web design efforts. Enjoy!

Color Defined

Our entire world is driven by color. It affects our mood, both positively and negatively. Color can even have an impact on your appetite. Oddly enough what we see as color is nothing more than light being reflected from different objects and being picked up and filtered by the human eye.

But what is color actually made from and how do we interpret it in web or graphic design?

Hues

These are the purest of all colors, and there are 12 of them in total. This number is made up of three primary colors, three secondary colors and six other colors. These 12 colors form the basis of every other color in the spectrum, so can be used on their own, or mixed together to create any other color you might need.

Tints

Although it might sound like a complex design concept, a tint is nothing more than an original color with white added to it. This then obviously lightens the color itself, which some people will refer to as a pastel. Tints/pastels can have a calming effect on the person viewing them, and are generally useful in all aspects of design because they're easy on the eye.

Shades

A shade is the mirror opposite to a tint in that it's any color which has black added to it, in order to darken that color. Any software color wheel allows you to choose darker shades of color, which then vary all the way to pure black itself. Shades/darker colors have their place in web design, but can often be misused and make any website feel "saturated" in color - they can also be very difficult for the eye to focus on for long periods of time.

Tone

A tone is one of the primary colors/hues with both white and black added to it. Obviously the combination of white and black means you're adding the color gray to any background or image, which is part of a process most professional graphic designers use with images to make them more appealing to the eye, and to add additional visual context to them.

More to Read:

• The Absolute Beginner's Guide to Black in Web Design
• 8 Tips For Choosing Perfect Images For Your Website
• Elements of Visual Storytelling: What Does Your Site Say?
• The Pros and Cons of Using a Full-Screen Background Image

Saturation

This is basically how any color behaves under different lighting conditions, which impacts interior design more than it does web design. In web design "saturation" simply refers to how vivid a given color is, and heavily color-saturated images, or design elements, should be using sparingly - you'll just give people a headache otherwise.

Intensity

How bright or dull any given image is can be measured in "intensity". Very intense colors such as red can be stimulating to the mind and body, whereas a less intense color like blue or green will have a more calming effect on people viewing them. Color intensity really comes into play when you work with the psychology of colors, and just how much they can affect your viewing audience.

So now you understand what colors are actually made from, and the basics of how they function within web design, what does this actually mean to you?

Well firstly color is a key component of how you communicate with site visitors, and this is even more important when you're designing websites for your clients. We've lost count of how many times we've seen designers take the easy route of filling entire screens with very dark shades of color for a background, and then brighter tints in the foreground. All this does is create the effect of "glare" on the human eye, and makes visitors want to click away to any other website except yours.

Color, when used effectively, can and does have a major impact on the user experience (UX), and this is why you need to pay so much attention to it. If you're in any doubt as to how important color is in web design just take a look at sites like Google, or any major e-commerce site, for example - every color element is there for a specific reason. Failing that look at a tin of Coca Cola and you'll notice that it's almost entirely minimalist (2 colors), but works incredibly well to sell their brand.

If you've yet to master the proper use of color in web design then now is a good time to start. The sites created by other professional web designers are great reference points.