Color Theory in Graphic Design & Web Design - How to Combine Colors & Choose Color Schemes - Part III
A GUIDE TO TOP COLOR COMBINATIONS IN WEB DESIGNExamples of Color Schemes and Color Combinations Within Designs
|
|
Are you having problems thinking of new color combinations? Do you wish that you could have a reference file for evaluating new color combinations for your website? There area many helpful tools and websites out there that list good combination colors but wouldn’t you prefer to look at designs implementing these colors? I would. I have created about 45 different simple designs implementing workable color 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 color combinations and add these to our list. An added benefit, Everone who adds a good color combination to this list will have there website listed (only if you want to). If you would prefer to send to us your own thumnail or a link to a website, you can do this instead.
On the next page, you will find the designs created with workable color combinations. Each picture includes hex numbers so that you can try them in your designs. Below these color combinations you will find a guide to choosing beautiful color schemes for your website designs. Enjoy and feel free to comment on these designs color combinations.
Everybody lives with colors all around them, and everyone views their surroundings in a different light, as well as in different colors. Both men and women coordinate their clothing together according to colors 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 color schemes for your outfits (sorry). If this is the case, either steer clear of design or use the color combinations used in the color combining list above. Even for those of us who do a great job at combining colors 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 color schemes. However, for the purposes of this article, I decided to collect these color 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 colors. Even if you are a great web designer, every designer should implement color 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
Color 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 color 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 color and design elements.
USE YOUR COLOR INTUITION TO CHOOSE APPROPRIATE COLORS FOR A WEBSITE’S TOPIC
We use color intuition every time we design. It is very intuitive to ‘know’ what colors 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 colors 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 color 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 color scheme would work wonderfully on an insurance company’s website. I didn’t have to tell you this, with the use of your color 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 color 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 smaller type encourages a more focused reading / viewing behavior and larger type encourages 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 short paragraph structure. Web surfers prefer short paragraphs opposed to longer ones. And it is no surprise that we all tend to like one column formats 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 color 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 color palette, however, it is amazing at how badly some people can implement these tools. The intention of this article is to make sure that we all use this color 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 colors 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 color permits. I tease you, of course, however following some rules can help you sort out what combinations look good and what colors should never be combined. Yellow alone is such a beautiful color, 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. Color 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 colors. 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 colors is that they are rarely seen alone. You need to visualize them in the context of being surrounded within the boundaries of other colors. When colors are along side other colors, the colors will all change appearance. It sounds crazy, but it is true. A light block of color 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 colors 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 colors within the spectrum. Can you see how the orange square appears darker when surrounded by lighter colors? It should also appear that the orange box appears lighter when surrounded by darker colors. Try it with other colors.
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 colors, 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/~flanglab/. 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 enroll 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 because 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 colors is essential in website design. Otherwise, your website visitors will exit your page without a proper visit. How rude. 
STAY CONSISTENT IN YOUR COLOR SCHEME THROUGHOUT THE SITE
Use of colors within your website should stay consistent. Otherwise, if you use colors 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 colors will allow web surfers to feel more at ease and in control of their navigation. This color standardization will keep your users from feeling panicked with every click.
WEB-SAFE COLORS ARE DEAD MY FRIEND: WHY YOU SHOULD STOP WORRYING ABOUT BROWSER-SAFE COLORS
Web-safe colors are colors 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 colors, 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 color palette was created for computer systems that use a 256 color palettes (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 color palette is ‘dead’ and that unless you are designing websites for a school that still uses 10 year old computer monitors, just use whatever colors that you want to use.
HOW DO YOU KNOW WHAT THE HEXADECIMAL EQUIVALENT IS OF A CMYK OR RGB COLOR?
When you’re adding colors to your website with HTML or Dreamweaver, you will need to know the hexadecimal values (hex code) of each color. This Hex code is the way that your browser interprets which colors to use within your website. These are the codes that define colors on the web. In print you use Process and Spot colors (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 of 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 color 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
Color theory is a set of principles used in order to create harmonious color combinations. With the use of color theory, you can combine colors together perfectly every time. Color representations can be visually represented by the color wheel, as seen below. If you follow the principles of the Color Theory, then the following colors 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
Primary colors are red, blue, and yellow. These 3 pigments are colors that can not be mixed or created by any combinations of other colors. All other colors are derived from these 3 colors.
 |  |
SECONDARY COLORS
Secondary colors are green, orange, and purple. These 3 pigments are created by combining the 3 primary colors together.
 |  |
TERTIARY COLOR SCHEME
The Tertiary colors are Yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green. Tertiary colors are colors that are created by mixing a unequal amounts of two primary color with a secondary color.literally third colour, colors 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 color of yellowish green.
 |  |
MONOCHROMATIC COLOR SCHEME
A monochromatic color scheme uses various darker shades, grayer tones, variations of lightness and saturation, as well as paler tints of a single color. In addition, the one color is often paired with white or another neutral. This color scheme is very elegant and has a very clean effect. A good example of Monochromatic color schemes are paint swatch cards. If you look at the color 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 center of the cirle 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 color, 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 colors are two colors that are opposite each other on the color wheel, such as purple-yellow and red-green. When you mix too complementary colors you produce a greyish color. If you put two complementary colors side-by-side, the complementary colors intensify each other. This scheme works best in situations where you need high-contrast compositions. You see complementary color 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 color and the two colors adjacent to its complementary. This provides high contrast without the strong tension of the complementary scheme.
 |  |
TRIADIC COLOR SCHEMES
A Triadic color scheme uses colors that are found by choosing three colors that are each separated by 120 degrees on the color wheel. The primary (red, blue, and yellow) and secondary (purple, orange, green) colors are examples of triadic colors.
 |  |
COLOR TERMS THAT YOU NEED TO KNOW & UTILIZE
Every color available to us without any varition 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 grays 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 in your website design.
HUE:
A hue is a pure color with no black or white added. A hue is the feature of a color that allows it to be identified as the color that it is, for example red, blue, yellow, green, purple, etc.
PURE HUE (NATURAL HUE):
A pure hue is the base color at its full intensity level, in other words, no shading, tinting, or tones have been added to the color yet.
SHADES:
Shades are the relative darkness of a color. You create a shade of a color by darkening the pure hue with black.
TINTS:
Tints are the relative lightness of a color. You create a tint of a color by lightening the pure hue with white.
INTENSITY (Also Known as SATURATION or CHROMATICITY)
Intensity describes the identifiable hue component of a color. 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 gray color has no hue and is considered achromatic with 0% saturation.
In the picture above, the colors are at 100% saturation
at the circle’s edges and get less intense (saturated) as
the colors get closer to the center 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 color added.
VALUE / LUMINANCE:
Basically, value is a a measurement of how close to black or white a given color 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 color wheel below, you will see that this whell is full of different color values. The outer band is the natural hue meaning that it is the original color. 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 color knowledge but nothing to do with it. Lets take a look at an example that you might find useful within your every day design projects. Look below at the corporate Samsung 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, lets pretend that Samsung hired you to design their website and that your first assignment is to come up with a usable color scheme. Lets use some of the color theory principles that we learned earlier in this article. Without looking at my example below, why don’t you try coming up with a color 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 Samsung 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 colors. 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 stray from their ‘locked in’ colors. Although it is a great idea to keep to a specific corporate identity and color scheme, some large establishments go overboard and don’t allow for any variations on their color set. Every large company should have many variations of their logo and color schemes, but if they don’t, you will just have to follow their rules and be as creative as they alow 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 colors, you might be allowed to use tints, and hues, and monochromatic or analogous color schemes. Take a look at how the designer for Coke.com handled their color 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
So here is an example of commenting your color codes in CSS:
If you are unaware of CSS comment rules, a few tips might help you. CSS comments can span multiple lines. These comments can also incude 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 color palettes within Adobe Photoshop.
To save your custom color palettes in Photoshop, select Save Swatches from the palette options menu. In the Save dialog 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 color 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 color intuition and your knowledge of color theory, the sky is the limit. Have fun and be creative.
No comments:
Post a Comment