A Guide to Combining Colours & Colour Schemes For Great Web Design

GO DIRECTLY TO COLOR COMBINATIONS

Are you having problems thinking of new colour combinations? Do you wish that you could have a reference file for evaluating new colour combinations for your website? There are many helpful tools and websites out there that list good combination colours but wouldn’t you prefer to look at designs implementing these colours? I would. I have created about 45 different simple designs implementing workable colour combinations, and I will add to this list at regular intervals. So bookmark this page, and come back when you are in the process of designing a website. Designers may send to me hex numbers and I will create thumbnails ( like the ones below) from these colour combinations and add these to our list. An added benefit, Everone who adds a good colour combination to this list will have there website listed (only if you want to). If you would prefer to send to us your own thumbnail or a link to a website, you can do this instead. On the next page, you will find the designs created with workable colour combinations. Each picture includes hex numbers so that you can try them in your designs. Below these colour combinations, you will find a guide to choosing beautiful colour schemes for your website designs. Enjoy and feel free to comment on these designs colour combinations. Everybody lives with colours all around them, and everyone views their surroundings in a different light, as well as in different colours. Both men and women coordinate their clothing together according to colours and patterns, although some people do it MUCH better than others. If you have never seen anyone coordinate their clothes badly, then you are probably the one who chooses bad colour schemes for your outfits (sorry). If this is the case, either steer clear of the design or use the colour combinations used in the colour combining list above. Even for those of us who do a great job at combining colours within our designs, we all have those days where our brains just aren’t working right. When I am having one of those days, I usually go to CoolHomePages.com or other similar pages and find sites that implement great colour schemes. However, for the purposes of this article, I decided to collect these colour palettes into one list…as I did above. This might be helpful to you, but if it isn’t, below this article you will find a long list of other resources for combining colours. Even if you are a great web designer, every designer should implement colour scheming tools and inspiration files to help them on those ‘nothing is going right’ kind of days.

THE IMPORTANCE OF COLOR WITHIN YOUR WEBSITE’S DESIGN

Colour is very important in web design and can be used to add spice to your website, relay the mood of a page, as well as to emphasize sections of a site. If you think about it, as soon as you look at a website, you can normally guess within seconds what that site is all about. Just like we all are quick to judge other people by their appearance, and surroundings by the way they smell, look, and feel, we also judge a website by its colour scheme and style of design. We can usually tell almost immediately, whether a website is corporate, personal, whether it is for kids, teens, or just for adults, etc. Most of this information is perceived solely by taking in colour and design elements.

USE YOUR COLOR INTUITION TO CHOOSE APPROPRIATE COLORS FOR A WEBSITE’S TOPIC

We use colour intuition every time we design. It is very intuitive to ‘know’ what colours are appropriate for a specific website topic. When you sit down to start designing, you probably take a look at the blank Photoshop screen and know by pure perception which colours are off-limits to that specific design. For example, you wouldn’t use blue, red, yellow, and green for use on a website design for an insurance company. However, this colour scheme would work fabulously on a website for a preschool. On the other hand, You wouldn’t use black, grey, and brown for use on a preschool’s website, but this colour scheme would work wonderfully on an insurance company’s website. I didn’t have to tell you this, with the use of your colour intuition, you knew this without even being told.

USE COLOR TO EMPHASIZE IMPORTANT SECTIONS OF YOUR WEBSITE

As designers, it is our role to use colour and other design elements to draw a visitor’s eye to the most important part of the page. I started out my career as a fine artist, so I am going to put a different spin on your site’s page elements. Fine artists make compositional choices in order to guide the viewer’s eye to important components within their work. Web designers are artists too, and a good designer will see his page as a work of art. Try to imagine that your website is an art composition, in other words, that you will design your website’s page elements in a fashion that presents a pleasing flow to the user’s eyes. If it was not for search engines finding websites almost completely by text on the page, I would design my entire website completely within Photoshop as gifs, jpegs, and pngs. But since we are all forced to use tables, CSS, and text within our pages, sometimes web design isn’t a simple task and is much tougher than Print Design (although thank goodness we don’t have to put up with print bureaus and prepress). We aren’t going to discuss elements of composition today, but I will come back to it within a different blog entry. However, I will summarize a few things for you on-page elements and how a web surfer will scan a website element by element.

WHAT ELEMENTS OF WEBSITE DESIGN WILL CATCH A SITE VISITOR’S EYES? WHAT PATHWAY WILL EYES NATURALLY FIXATE? WHAT DIRECTION WILL THEIR EYES FOLLOW?

(1) Eyes naturally being scanning left to right

(2) When viewing a website, a visitor’s eyes most often fixate first on the upper left portion of the screen. Viewers often fixate on the point for a few seconds before moving their eyes to the right and then down the page.

(3)Dominant, noticeable headlines tend to draw the visitor’s eyes first upon entering the website (especially when they are in the upper left, and most of the time when they are in the upper right.)

(4) I don’t recommend this one because it is annoying … If you want to force your visitors to read, then the smaller type encourages a more focused reading/viewing behaviour and larger type encourage a light scanning result.

(5) Website readers often read blurbs and headlines, however, they tend to only read the first one-third of the blurb. Unfortunately, you only have less than a second to grab the reader’s attention on these headlines.

(6) Website visitors often will scan down to the bottom of the page to see if something catches their eyes.

(7) Website navigation works best on the top of the page…so try to use navigational features on the top of your page instead of on the side or on the bottom of the page.

(8) Images of beautiful, clean faces, causes the visitor’s eyes to fixate on this image.

(9) If you display articles on your website, then try to use a short paragraph structure. Web surfers prefer short paragraphs as opposed to longer ones. And it is no surprise that we all tend to like one column formats as opposed to a newspaper format of several columns.

(10) Details and Depth within elements of design are noticed before items lacking depth.

(11) The bigger a graphic or image, the longer the user will fixate on it.

(12) Eyes always lock on the most noticeable aspect of a website, for example, colour within a grey-toned website.

(13) Ads tend to do better on the top left portion of the site. This is no surprise considering that this is the first place people look when opening a webpage.

(14) Placing ads next to popular content increases an ad’s success.

(15) Bigger banner ads did better than smaller, less noticeable ads.

(16) Text ads do better than banner ads because users tend to mistake the text ad for a link to content within your site.

IMPORTANT RULES FOR USING COLORS WITHIN YOUR WEBSITE’S DESIGN

One of the best aspects of the internet is the wide array of different pleasing designs that you are lucky enough to witness. However, for every beautiful site that you visit, there are at least a hundred more badly designed sites. Everyone has access to a beautiful web-safe colour palette, however, it is amazing how badly some people can implement these tools. The intention of this article is to make sure that we all use this colour palette in the correct way so I can possibly get to old age with my vision still intact.

FOR THE LOVE OF G_D, PLEASE DON’T COMBINE THOSE COLORS TOGETHER

Have you ever gone to a webpage and almost puked?! Well, you aren’t alone, I’ve been there, done that. We all have the same colours in our arsenal, however, the way that some people combine them makes me want to start a new law forcing new designers to be issued colour permits. I tease you, of course, however following some rules can help you sort out what combinations look good and what colours should never be combined. Yellow alone is such a beautiful colour, and so is green purple, blue, and red. However, you put them all together on one site, and something might go wrong. What many novice designers don’t realize is that more isn’t always better. Colour simplicity is very often overlooked as an important aspect of good web design. However, remember the last garishly bad website you witnessed and you will recall a probable overuse of colours. What some might think is ‘hot’, ‘fancy’, ‘cool’, is really just obnoxiously ugly.

HOW DO COLORS BEHAVE WHEN THEY GET TOGETHER

In fact, One thing about colours is that they are rarely seen alone. You need to visualize them in the context of being surrounded within the boundaries of other colours. When colours are alongside other colours, the colours will all change the appearance. It sounds crazy, but it is true. A light block of colour near a dark area will appear lighter than it actually is, and the dark one will appear darker. It is important for web designers to consider the way that colours behave when around each other, so please keep this in mind so that you don’t wreak havoc on your visitors’ eyes.

Take a look at the same orange square and how it looks within the boundaries of other colours within the spectrum. Can you see how the orange square appears darker when surrounded by lighter colours? It should also appear that the orange box appears lighter when surrounded by darker colours. Try it with other colours.

COLORS USED WITHIN GRAPHICS, BACKGROUNDS, & PAGE ELEMENTS ARE MEANT TO ENHANCE THE LOOK OF THE PAGE, NOT TO TAKE OVER THE PAGE

There is nothing I hate more about bad website design than over usage of colours, graphics, and animations. You all know the type of website, but just in case you have been lucky enough to pass by websites such as this, here is an example of such a website – http://www.neiu.edu/%7Eflanglab/. If you think that this website’s design is amazing and you want to find out how you too can design this way, please immediately enrol yourself in a design course or find another career other than design. Of course, I wouldn’t say this if I wasn’t 99.9999% sure that every single person who reads this article intuitively will know that this website’s design was lousy. We all ‘know’ what a beautiful website looks like, it is just getting from a blank screen to a well-designed website that is difficult. Just beware of over usage of graphics and images and you will be at least one step towards a well-designed website. One of the problems of using too many graphics is that a high percentage of people will just leave your website before even reading the content. You want visitors to leave your website thinking about the great article they read or the wonderful products that you sell, rather than the user leaving irritated with the look of your site. Nobody wants to stay and linger on a site that is badly designed. Another reason to minimize the number or size of the graphics on your site is that the more images you add, the slower the loading time of your website will be. If your webpage doesn’t load within a few seconds, you can say ‘good-bye’ to that visitor.

MAKE SURE THAT THE TEXT COLOR ON YOUR WEBSITE CONTRASTS ENOUGH WITH THE BACKGROUND COLOR

I hate when I have to squint to read text. I have bad eyes as it is, and trying to read yellow text on a purple background is like taking a hammer and slamming it over my head. Knowing how to pick contrasting background & text colours is essential in website design. Otherwise, your website visitors will exit your page without a proper visit. How rude. Consider using black and white, or colours that are at the opposite ends of the colour saturation pole. A white background with black text is considered the best possible format for website and printed copy. Maybe I’m getting old, but I am sure that we have all read an article online and landed up with a huge migraine headache because the yellow text on blue background was too much for our eyes to take. If you don’t want to use black and white for text, then after laying out the page, ask yourself, “Does this text Contrast Well With the Background?!” Use as much colour as you want in the surrounding parts of the page, as long as it doesn’t take away from the contrast of the text. This doesn’t mean that you have to take up the entire page with these colours, you can instead use a table’s background colour as white (or another color) and leave the rest of the page the colours that you had intended.

STAY CONSISTENT IN YOUR COLOR SCHEME THROUGHOUT THE SITE

The use of colours within your website should stay consistent. Otherwise, if you use colours that are completely different on every page, how will your visitors know that they are still on your website? Also, if you ever want your visitors to recognize your website, having a consistent look and feel is important. Reinforcing brand recognition and earning familiarity amongst web surfers is a tough thing to do, so don’t make it any tougher on yourself. A consistent and steady usage of colours will allow web surfers to feel more at ease and in control of their navigation. This colour standardization will keep your users from feeling panicked with every click.

A SHORT LESSON ON WEB-SAFE COLORS (BROWSER-SAFE COLORS) AND WHY YOU SHOULD STOP WORRYING ABOUT USING THEM

Web-safe colours are colours that will appear approximately the same on all platforms. However, before I go on, I would like to comment that I don’t go out of my way to use web-safe colours, mostly because 99% of the users who visit my websites visually see the same thing everyone else is seeing and without any problems. The web-safe colour palette was created for computer systems that use a 256 colour palette (8-bit system). I can assure you that most computers haven’t used this small of a palette for probably 10 years now. I would just assume that the web-safe colour palette is ‘dead’ and that unless you are designing websites for a school that still uses 10-year-old computer monitors, just use whatever colours that you want to use.

HOW DO YOU KNOW WHAT THE HEXADECIMAL EQUIVALENT IS OF A CMYK OR RGB COLOR?

When you’re adding colours to your website with HTML or Dreamweaver, you will need to know the hexadecimal values (hex code) of each colour. This Hex code is the way that your browser interprets which colours to use within your website. These are the codes that define colours on the web. In print you use Process and Spot colours (CMYK), Your Screen uses RGB, and your browser uses Hex Codes (also RGB). A bit of information that you will most likely not care about is that the Hex code is made up of groups of 3 hexadecimal numbers. The first number is red, the second green, and the third group is blue. Each hexadecimal number is an RGB triplet. 00 is the lowest hue, and FF is the highest. There are thousands of colour codes that you can create and if you are ever bored enough, I am sure that compiling these codes can pass the time quite well.

BASICS OF COLOR THEORY

Colour theory is a set of principles used in order to create harmonious colour combinations. With the use of colour theory, you can combine colours together perfectly every time. Colour representations can be visually represented by the colour wheel, as seen below. If you follow the principles of the Color Theory, then the following colours are harmonious:

(1) 2 Colors Opposite of Each other on the Color Wheel are harmonious.

(2) Any 3 Colors Equally Spaced Around the Color Wheel Forming a Triangle are harmonious.

(3) Any 4 Colors Forming a Rectangle, Each Opposite of Each other on the Color Wheel are harmonious.

COLOR SCHEMES USING THE COLOR WHEEL THEORY

PRIMARY COLORS

The primary colours are red, blue, and yellow. These 3 pigments are colours that can not be mixed or created by any combinations of other colours. All other colours are derived from these 3 colours.

SECONDARY COLORS

Secondary colours are green, orange, and purple. These 3 pigments are created by combining the 3 primary colours together.

TERTIARY COLOR SCHEME

The Tertiary colours are Yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green. Tertiary colours are colours that are created by mixing an unequal amount of two primary color with a secondary colour. literally third colour, colours that are created by mixing unequal amounts of two primary colours. An example of this would be to mix two parts of yellow and one part of blue together to form the tertiary colour of yellowish-green.

MONOCHROMATIC COLOR SCHEME

A monochromatic colour scheme uses various darker shades, greyer tones, variations of lightness and saturation, as well as paler tints of a single colour. In addition, the one colour is often paired with white or another neutral. This colour scheme is very elegant and has a very clean effect. A good example of Monochromatic colour schemes are paint swatch cards. If you look at the colour wheel below, you will see that the middle band is the natural hue and as you go out towards the edges, the bands get lighter (more tinted), and as you go towards the centre of the circle the bands get darker (more shaded).

ANALOGOUS COLOR SCHEME

The analogous color scheme uses 3 colors which are side-by-side on the 12 part color wheel. The middle color is considered the ruling color. So for example, in a green, blue, purple color scheme, blue would be the ruling color. One colour, the ruling color, is used as the dominant color while the other two colors are used to enrich the scheme. A few examples of analogous colors are:

– green, yellow-green, and yellow

– aqua, blue, and indigo

– purple, violet, and red.

COMPLEMENTARY COLOR SCHEME

Complementary colours are two colours that are opposite each other on the colour wheel, such as purple-yellow and red-green. When you mix two complementary colours you produce a greyish colour. If you put two complementary colours side-by-side, the complementary colours intensify each other. This scheme works best in situations where you need high-contrast compositions. You see complementary colour schemes in nature all of the time, such as red flowers with green leaves, peppers, exotic fish, birds, snakes, and many more.

SPLIT COMPLEMENTARY COLOR SCHEME

The split complementary scheme is a variation of the standard complementary scheme. It uses a colour and the two colours adjacent to its complementary. This provides high contrast without the strong tension of the complementary scheme.

TRIADIC COLOR SCHEMES

A Triadic colour scheme uses colours that are found by choosing three colours that are each separated by 120 degrees on the colour wheel. The primary (red, blue, and yellow) and secondary (purple, orange, green) colours are examples of triadic colours.

COLOR TERMS THAT YOU NEED TO KNOW & UTILIZE

Every colour available to us without any variation are called natural hues. Each of these natural hues can have a variation in tint, shade, or tone. The way that these variations come about are by combining natural hues with black, white, and all the greys in between. Even though many of you probably use the following terms on a regular basis, some of you might not know exactly what they mean or how they can help you with your website design.

HUE:

A hue is a pure colour with no black or white added. A hue is the feature of a colour that allows it to be identified as the colour that it is, for example red, blue, yellow, green, purple, etc.

PURE HUE (NATURAL HUE):

A pure hue is the base colour at its full intensity level, in other words, no shading, tinting, or tones have been added to the colour yet.

SHADES:

Shades are the relative darkness of a colour. You create a shade of a colour by darkening the pure hue with black.

TINTS:

Tints are the relative lightness of a colour. You create a tint of a colour by lightening the pure hue with white.

INTENSITY (Also Known as SATURATION or CHROMATICITY)

Intensity describes the identifiable hue component of a colour. A blue with RGB numbers Red – 0, Green – 255, and Blue – 0 (0,255,0) is considered 100% saturated and is intense, high in chromaticity, and completely saturated. A grey colour has no hue and is considered achromatic with 0% saturation.

In the picture above, the colours are at 100% saturation
at the circle’s edges and get less intense (saturated) as
the colours get closer to the centre of the circle.

TONE:

A tone is a hue that has had grey added to it. A tone can also be a hue with a large percentage of its complementary colour added.

VALUE / LUMINANCE:

Basically, value is a measurement of how close to black or white a given colour is. In other words, value is a measurement of how much light is being reflected from a hue. Those hues with a high content of white have a higher luminance or value. If you look at the colour wheel below, you will see that this well is full of different colour values. The outer band is the natural hue meaning that it is the original colour. The 2nd band is a tint of the original hue and has a higher content of white or luminance than the original hue. The inner bands are shaded versions of the natural hue and are closer to black than the original hue.

AN EXAMPLE OF OUR COLOR THEORY PUT INTO USE:

Now you might feel as if you have all of this newly learned colour knowledge but nothing to do with it. Let’s take a look at an example that you might find useful within your everyday design projects. Look below at the corporate Sony logo.

I am sure that you are all familiar with this corporate identity and that you all own something with this very logo on it. Now, let’s pretend that Sony hired you to design their website and that your first assignment is to come up with a usable colour scheme. Let’s use some of the colour theory principles that we learned earlier in this article. Without looking at my example below, why don’t you try coming up with a colour scheme for the Sony corporate website in the following formats:

(1) Monochromatic Color Scheme

(2) Analogous Color Scheme

(3) Complementary Color Scheme

(4) Triadic Color Scheme for the Sony Logo.

If you don’t remember what all of those terms mean, look above at the definitions and the visual examples that I provided with each term. This should guide you in the right direction. Don’t forget to use tints and shades as well.

Now, this process doesn’t have to focus on the logo. You can instead focus on a photograph, graphic, or an important ad. Just remember your website’s composition and to draw your visitor’s eyes to the most important sections of the page. Take a look at this website. The first thing that pops up on the screen is that red and white logo on the grey background. It is very obvious in this example, but it looks really good. Then the backdrop comes up and your eye scans down to the motorcycle. Wow! I don’t even like motorcycles, but I love this page.

CORPORATE COLOR SCHEMES AND DESIGNING FOR BIG COMPANIES

Most websites on the net are for small companies, hobbyists, and individuals. You should feel lucky that this is the case considering that most of these websites don’t have any recognizable brand yet. Designing for a large, established company or corporations can be difficult. When you are designing a website for a corporation, large company, or similar establishment, you will need to handle working with branded images and colours. In cases like this, sometimes it is hard to be as creative as you would like to be because there are too many rules and regulations to follow. Most large companies and corporations have a recognizable brand that must be adhered to and few strays from their ‘locked in’ colours. Although it is a great idea to keep to a specific corporate identity and colour scheme, some large establishments go overboard and don’t allow for any variations on their colour set. Every large company should have many variations of their logo and colour schemes, but if they don’t, you will just have to follow their rules and be as creative as they allow you to be. With pages and pages of regulations, do’s and don’ts, it is enough to cause your head to spin. If you aren’t allowed to stray from specific colours, you might be allowed to use tints, and hues, and monochromatic or analogous colour schemes. Take a look at how the designer for Coke.com handled their colour restrictions … http://www.coke.com/flashIndex1.html.

Above you will find examples of corporate color schemes.
Other than FedEx Kinkos, most of these websites use
subdued colors, such as blues, dark reds, grays, and black.
Since FedEx Kinkos is known for printing colorful materials,
they can get away with having a colorful, less subdued, color scheme.

IT IS A GOOD IDEA TO KEEP YOUR COLOR USAGE LISTS IN CSS

It is a good idea to keep a color-usage reference list on your websites, especially if you are designing a website for a client. As the website gets redesigned, sometimes on a regular basis, a color palette will be needed. Although it is very simple to just use the Photoshop eyedropper tool to find out what colors were used, it is good etiquette to code it into your css, just as you would comment important instructions within your PHP code. Commenting your color schemes into your style sheets is an excellent way of maintaining your custom palette. As further production takes place on the website, other team members or new web designers will be able to source colors correctly without making unnecessary mistakes. If you are unsure of how to comment text into your CSS code, place something like the below text into your CSS Stylesheet…you can type whatever you want between the ‘/*’ and the ‘*/’ . These comment tags mean that you can type whatever you want and the browser won’t try to read it. In fact, if you want to comment other important information in your CSS code, go right ahead. Place this within your HTML Head tags:

(1) Use a starting

(2) Add the first part of your CSS comment
/*

(3) Write the color schemes that you want to comment

(4) Close the CSS comment:
*/

(5) Use a closing

So here is an example of commenting your color codes in CSS:

/*
Background Color is #FD7303
Background Table Color is #FEC14C
Text Color is # FC4C04
Table Text Color is #000000
Edited on Jan 01, 2005 by Madey UpName
*/

If you are unaware of CSS comment rules, a few tips might help you. CSS comments can span multiple lines. These comments can also include CSS elements that you don’t want to be seen by the web document but that you want to save for others on your team to see. You might also want to add information such as the date that the file was last updated, your name, copyright information, and other important instructions. All you need is a text editor, Dreamweaver, GoLive, etc.

SAVE YOUR COLOR PALETTES IN PHOTOSHOP

It is also a great time-saver to save your colour palettes within Adobe Photoshop.

To save your custom colour palettes in Photoshop, select Save Swatches from the palette options menu. In the Save dialogue box, browse to the location where you want to save the swatches, enter a name for them, and then click Save. In order to load your colour swatches/palette back up, select Load Swatches from the Photoshop options menu. This will allow you to save and load your own custom palettes on any computer with Photoshop installed. We have come to the end of this article. I hope that you learned a lot and that you put what you learned into practice. With your great colour intuition and your knowledge of colour theory, the sky is the limit. Have fun and be creative.