Examples of Color Schemes and Color Combinations Within Designs

[dreamcon]

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.

[petermoses]

always try to use three colors in your website, not more than that

[lilly1236]

you have a lot of khowledge all r very informative ..I appreciate your post..keep it up

[madhusmita]

Thanks for sharing the tips.Colors are one of the important part of the web designing.When we are designing the site, the font and color used in it should look professional.Its attracts the visitors.As the web site represents the company, it can work for the customer review of your work.

[dianna]

thanks fo r sharing that hopefully u also khnow about that
lol

[dianna]

The Color Pink

When the passion and highly energized aggressiveness of red is diluted with the purity and innocence of white, the resulting pink becomes the color of tender love and romance. It also represents friendship, particularly among women and girls. Although other countries may have additional and different meanings, generally speaking, pink is known as the universal color of love. The softening of powerful red with the fullness of white has a way of neutralizing disorder and dissipating violence. For this reason, some prisons deliberately paint their holding rooms a gentle shade of pink. Studies have shown that this color tends to have a calming effect on riled emotions and promotes relaxation and contentment. Some research has suggested that, in large quantities, pink may actually cause physical weakness or loss of touch with reality. This psychology explains the occasional re-painting of a visiting team’s locker rooms in a soft shade of pink. Male weight-lifters do seem to be weakened in a pink environment; however, women weight-lifters say they feel energized by those same pink walls.

In the United States, pink has always been associated with the feminine gender. It is perceived as the sweeter, less violent side of red. In fact, the playful side of this color is seen in American traditions such as pink flamingoes, bubble gum and cotton candy. Sugary pastries are more popular when packaged in pink boxes or decorated with pink icing. On a more serious note, a recognizable pink ribbon is also the internationally known symbol of the fight against breast cancer and the hope of a cure. Each year, on Mother’s Day, Major League Baseball teams use pink baseball bats to show their support. Delta Air Lines has painted one of its Boeing 767-400ER aircraft pink for the same reason.

Several well known companies have chosen pink as their brand color. Mary Kay Cosmetics bought its first pink Cadillac in 1968. Victoria’s Secret, a women’s lingerie store, uses both soft pink and shocking pink in its displays. Owens Corning Insulation is pink, as is the T-Mobile “Magenta T.” Even Pepto-Bismol, with its characteristic pink coloring, is clearly identifiable on the store shelf.

[netshet]

Choosing the Right Colors for Men's Suits and Ties
Since the color of your suit is the first opportunity to make a positive impression, choosing the right shade for the right occasion could mean the difference between making a positive or negative impact. The general rule that the larger the clothing item the more conservative the color choice holds true for both men and women. If you rarely need a suit, a black, charcoal-gray or navy-blue one will always be a safe choice. On the other hand, if you wear suits regularly, you will probably want one of each and a variation on brown as well. These are the primary business colors that work best in the executive world. Adding accessories such as colorful ties allows you to insert your personality whenever the situation is appropriate.

Black suits are classic and very formal. They can also be depressing. Save yours for evening or formal-wear occasions or funerals. They are always in fashion and indicate the height of sophistication and elegance but feel out of place in the regular, everyday business world. You might appear to be usurping your boss’s authority if your black suit outranks his gray or navy choice.

Young men, however, can add the appearance of maturity when they choose a well-tailored, charcoal-gray suit. This is a very professional look and, depending upon the undertones of the suit, it can easily be paired with brown or black. Navy blue has become more and more popular in recent years. Although it can be perceived as a bit more casual, it still presents itself as stylish and responsible. Older men may find navy blue to be a bit more youthful and attractive for that purpose. Adding pinstripes to any of these solid colors will make them only slightly less formal.

[Jaseneettyhab]

http://super.jetforum.ru/memberlist.php?...ile&u=4896
http://www.myyamok.com/board/index.php?a...e;u=762835
http://parkerdigital.net/forums/YaBB.pl?...sessurbrit
http://www.parrscollectables.co.uk/parrs...file&u=459
http://forum.vista-driver.org/index.php?showuser=130438

[sofia20]

Very informative.
Glad you shared this to us here. Keep it up!

[websitebuildersperth]

useful and informative article has been shared