A Guide to Combining Colors

8/9/2019 A Guide to Combining Colors

1/18

A Guide to Combining Colors & Color Schemes for Great Web Design

A GUIDE TO TOP COLOR COMBINATIONS IN WEB DESIGN Examples of Color Schemes and Color

Combinations Within Designs

(I recommend reading the Color Combinations Article Here Instead as The Formatting On Our Blog Is

Messed Up)

GO DIRECTLY TO COLOR COMBINATIONS

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 wouldnt 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 ourlist. 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 isthe 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 arent 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 listas I did

above. This might be helpful to you, but if it isnt, 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 WEBSITES 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


2/18

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 WEBSITES 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 wouldnt 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 wouldnt use black, grey, and brown for use on a preschools website, but this color scheme

would work wonderfully on an insurance companys website. I didnt 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 visitors eye to the mostimportant part of the page. I started out my career as a fine artist, so I am going to put a different spin

on your sites page elements. Fine artists make compositional choices in order to guide the viewers 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 websites page elements in a fashion that presents a pleasing flow to the users

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 isnt a simple task, and is

much tougher than Print Design (although thank goodness we dont have to put up with print bureaus

and prepress). We arent going to discuss elements of composition today, but I will come back to itwithin 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 VISITORS 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 visitors 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 visitors 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 dont 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.


3/18

(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 readers 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 pageso 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 visitors 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 ads 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 WEBSITES 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 DONT COMBINE THOSE COLORS TOGETHER

Have you ever gone to a webpage and almost puked?! Well, you arent alone, Ive 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


4/18

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 dont realize is that more isnt 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 dont 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/%7Eflanglab/. If you

think that this websites 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 wouldnt say this if I wasnt 99.9999% sure that every single person who reads this article intuitively

will know that this websites design was lousy. We all know what a beautiful website looks like, it is just


5/18

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 doesnt 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. Consider using black and white, or colors that are at

the opposite ends of the color saturation pole. A white background with black text is considered the

best possible format for website and printed copy. Maybe Im 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 dont 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 color as you want in the surrounding parts of the page, as long as it doesnt take away from the

contrast of the text. This doesnt mean that you have to take up the entire page with these colors, you

can instead use a tables background color as white (or other color) and leave the rest of the page the

colors that you had intended.

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

dont 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.

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

WORRYING ABOUT USING THEM

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 dont 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


6/18

palettes (8-bit system). I can assure you that most computers havent 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 youre 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.


7/18

SECONDARY COLORS

Secondary colors are green, orange, and purple. These 3 pigments are created by combining the 3

primary colors together.


8/18

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


9/18


10/18

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.


11/18

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


12/18

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 varitionare 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.


13/18

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 circles edges and get less intense (saturated) asthe 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 aa 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.


14/18

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 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, lets pretend that Sony 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 dont 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 Sony Logo.

If you dont 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. Dont forget to use

tints and shades as well.


15/18

Now this process doesnt have to focus on the logo. You can instead focus on a photograph, graphic, or

an important ad. Just remember your websites composition and to draw your visitors 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 dont 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 dont 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 dont allow for any variations on their color set. Every large company

should have many variations of their logo and color schemes, but if they dont, you will just have to

follow their rules and be as creative as they alow you to be. With pages and pages of regulations, dos

and donts, it is enough to cause your head to spin. If you arent 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 .


16/18

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 importantinstructions 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 Stylesheetyou can type whatever you want between the /* and the */ . These

comment tags mean that you can type whatever you want and the browser wont 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:

*/


17/18

(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 MadeyUpName

*/

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 dont 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 addinformation 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 custompalettes 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.

SOME TOOLS FOR MATCHING COLORS COLOR COMBINATIONS AND COLOR SCHEMES

Color Scheme Generator- I think this is the best color combination tool on the net. It really gives you a

lot of different options and all the colors that they pick look wonderful together.

Color Blender Tool Pick a color value format, input two valid CSS color values in the format you

chose, and pick the number of midpoints youd like to see. The palette will show the colors you inputas well as the requested number of midpoint colors, and the values of those colors.

Color Contrast Tool Another great tool. Checkpoint 2.2 of the WAI guidelines requires that colour

combinations created between foreground and background colours provide sufficient contrast when

viewed by someone with colour deficits or when viewed on a black and white screen

Visibones Color Lab An interesting color picker and combination tool online that is very helpful.


18/18

I like Your Colors Tool This tool will tell you what colors any page on the net uses. Type the URL of a

page below and submit it to see what colors it uses.tool tells you the colors used on any web page.

Pantone and HexidecimalColour Conversion Chart If you are designing a website that needs to use

the same colors as a branded image, then you will love this tool. The chart suggests digital

(hexadecimal) equivalents for standard Pantone ink colours. This is not an official Pantone list of hexequivalents, and is not intended as a definitive guide.

Advanced Javascript Color Picker A visual way to select RGB color for form inputs on a web page.

You can choose colors from a palette of web colors, named colors or by using a RGB color slider.

Color Combinations Here are some Color combinations that will help you in designing on the web.

The Color combinations are displayed along with hexadecimal color code so that you can pick the

color quickly.

Color Combo If you would like to view all of your colors side by side, then this might be for you. A 4

panel, scrolling, side-by-side color combination viewer.

Color Library Tried and tested color combinations that are listed on this great site.

Web Color Schemes Here are a lot of great color schemes taken from a variety of sources.

Lynda Weinmans Browser-Safe Colors Organized By Hue- A large list of browser safe colors organized

by hue.

Lynda Weinmans Website Tips For Designers: Browser-Safe Colors Organized By Value (Lights and

Darks) A large list of browser safe colors organized by value.

Visibones Swatch Collections VisiBone swatch collections are available for the following fine

graphics packages available free for BBEdit, Canvas, Fireworks, Flash MX, GIMP, GoLive, HomeSite, CF

Studio, Illustrator, ImageReady, Paintshop Pro, Photoshop, Painter, and TopStyle.

Documents

A Guide to Combining Colors