A Basic Introduction to Color Palettes | Part One

Color plays an incredibly important role in any web design and it’s crucial to think carefully when picking which shades you want to use in your own creations. Of course your color choices will instantly affect the mood and the feel of your site and will create various associations – through color you can communicate whether your business is fun, youthful, serious, elegant or anything in between. At the same time though, your color combinations will dictate whether your design works well as a whole, as well as just how legible your site is and where visitors are going to be drawn when they first land on one of your pages.

Color theory then is a whole school of design, so you really can’t just pick a color and start splashing it on the page. Keep reading then to learn a little more about color theory, about how to leverage the power of color and about how to choose your color palettes.

Primary and Secondary Colors

The first thing to consider is your use of primary and secondary colors. Primary colors are yellow, blue and red, while secondary colors are purple, orange and green. Note that all the secondary colors are created by mixing any two of the primary colors. To create green for example you simply would mix yellow and blue, while orange is obviously a combination of yellow and red.

These primary and secondary colors are often shown on a color wheel for simplicity. Here is some more guidance on finding your way around a color wheel.

Complementary Colors

Another consideration is that you then have complementary colors. These are color combinations that work well with one another and that are situated on the opposite side of the color wheel. These are also the colors that don’t mix to form a new color. Purple’s complementary color is yellow, while red’s complementary color is green.

RGB and CNYK

Next come ‘color spaces’. These are ‘RGB’ and ‘CMYK’, which are ‘Red Green Blue’ and ‘Cyan, Magenta, Yellow Black’. RGB is used normally in photography, while graphic designers working with print will be more likely to use CMYK. Also note that red, green and blue combine and form white, with white being what’s left behind if all the values are set to zero. CMYK is the opposite – all the colors combine to form black and you will get white if you dial them all back down.

This isn’t something you’re likely to need on a regular basis, but it’s useful to know if you’re ever interested in learning more about color theory.

Color Values

Earlier I mentioned turning down the ‘values’ of colors. This is important to think about, as it is how you will likely control the various different color elements on your page. When working in Photoshop for instance, you will be able to individually control the RGB color values by entering numbers. This is essentially how you ‘mix your paint’, with the numbers representing how much of each color you want to use. These go from 0 up to 255.

As we mentioned, if R, G and B are all set to 0, you get black. If you set G and B at zero and turn up R to 50 then you would get a light red (pinkish in appearance). If you then turned the B up to 70, you would get violet color.

So those are the basics when it comes to understanding colors and color theory. Next time we’ll start looking at how you can put this theory into action and create your own palettes of colors that work together.