Sunday 25 April 2010

Silk-Dyed Eggs {aka TIE-Dyed!}

apparently silk ties have another purpose- they can be used to create amazingly beautiful easter eggs! i found a great tutorial on our best bites that walks you through the process.


Silk Dyed Easter Eggs
Tutorial by www.ourbestbites.com

Materials and Tools

-Raw Eggs
-Glass or enamel pot (but pretty much any non-aluminum pot will be fine)
-Silk ties, blouses, or boxers, cut into pieces large enough to cover an egg
-An old white sheet, or pillowcase, or tablecloth, or random fabric, cut into pieces to cover silk-wrapped eggs
-Twist ties or string
-4 tablespoons of white vinegar
-Warm water
-Vegetable oil
-Paper towels
-Tongs or spoon

1. Remove seaming from ties and any lining on the inside. You just want a piece of the silk. Cut silk into a square (or a piece) large enough to wrap around a raw egg.

2. Wrap an egg with a piece of silk, making sure the printed side of the material is facing the egg. Silk can still be used if it doesn't fit perfectly around egg. Just try to make as much smooth contact with the fabric to the egg as you can. The pattern will transfer better if it is right up against the egg. Any part that is folded or wrinkled will leave kind of a tie-dyed pattern (which is a good thing, it’s pretty that way) Secure with twist-tie or string.

3. Place the silk-wrapped egg in a piece of white sheet, pillowcase, or old tablecloth and secure tightly with another twist-tie or string.

4. Place the egg(s) in the pot. Fill pot with water to cover eggs completely. Then, add the 1/4 C of white vinegar.

5. Bring water to a boil, turn heat down, and simmer for 20-25 minutes.

6. Remove eggs from water with tongs or spoon and let cool on a pile of paper towels or in a colander.

7. When eggs are cool enough to handle, you can remove the fabric.

8. To add a little bit of lustre to your eggs, put a dab of vegetable oil on a paper towel and rub onto the egg.

wednes-diy



wednes-diy

Thursday 22 April 2010

http://marketplace.hgtv.com/

http://www.hgtv.com/home-improvement/index.html

Monday 19 April 2010

video

http://vkontakte.ru/club1381963

...Luxury life...

=== Благополучие
=== Удовольствие
=== Здоровье
=== Свобода
=== Целеустремленность
=== Дружелюбие
=== Уверенность
=== Мудрость
=== Безопасность
=== Комфорт
=== Честность
=== Любовь
=== Благоденствие
=== Состоятельность
=== Легкость
=== Здоровый образ жизни
=== Успех
=== Смелость
=== Решительность
=== Благородство
=== Сообразительность
=== Роскошь
=== Изобилие
=== Богатство
=== Радость
=== Ответственность
=== Организованность
=== Счастье
=== Наслаждение
=== Гармония
=== Умиротворение
=== Доброжелательность
=== Известность
=== Уважение
=== Смех
=== Веселье
=== Вкусно
=== Удовлетворение
=== Приятно
=== Красота
=== Процветание
=== Предприимчивость
=== Качество
=== Уют
=== Порядочность
=== Благодарность

Paul Anka - Put your head on my shoulder

Color Part 1: Accuracy

Â

Color accuracy in graphic design is very hard to achieve, but it is also one of the most important aspects of design. So how do you make sure that you give your clients the most accurate color samples? This design will go into this color accuracy question and give you some of the answers.

Color Part 1: Accuracy
by Erin Ferree

Color is one of the most difficult parts of a design to show accurately to a client. Color perception can be affected by many factors, including:

Human perception:

~~Â The way each person sees color can vary, depending on the structure of the individual’s eye. This is particularly true in the range of the color blue. Colorblindness is another factor in an individual’s perception of color, which can be either very slight (and almost unnoticeable to an individual) or quite severe.Â
~~Â Â Colors can also impact each other when placed side by side - either through reflection or as a visual illusion. To demonstrate this, hold a piece of bright-colored paper or object next to a white piece of paper near a sunny window. The white paper will take on some of the color, to become a pastel shade of the bright color.

Home computer and printing technology:Â

~~Â The average computer monitor will show slightly differing colors depending on how the computer is set up, the type of monitor (for example, flat-panel LCD monitors tend to show colors as more blue), how the brightness/contrast is adjusted, and many other factors.Â

~~Â Inkjet and home laser printers, while great for convenience, often do not have the color range that professional printing machines do. This is most obvious in the case of bright colors, especially dark or complex colors (colors made up of cyan, magenta, yellow, and black (CMYK) all mixed together), and in the tones of blue, aqua, and purple.

Web color vs. printed color:Â

~~Â The color of your logo and/or any other graphic elements on your website may be different than the colors on your printed materials - this has to do with the color palette that websites use in their graphics (see the article RGB vs. CMYK color), with the color palettes that the web browsers use (see web-safe color, below), and with your and your clients’ monitor calibration.Â

~~Â Web-safe colors are available, meaning that the colors will look the same regardless of a viewers’ monitor type - provided that their brightness and contrast settings are set to the same levels. There are millions if printable colors and only 216 web-safe colors, thus we advise treating website colors differently than printed colors, and we suggest that you choose both a web-color palette as well as a printing- color palette for your business identity.

Professional printing technology:Â

~~Â Colors can vary between printing processes. If some of your materials are printed with a four-color digital or traditional printing process and others are printed using the Pantone color system, some of the colors may not match owing to the differences in the processes.

~~Â Colors can also vary between presses or digital printers, depending on their setup or calibration, so if you print materials at different times or on different machines, they could appear different. In many aspects of your graphic design, such as your company logo, you want to ensure that your colors are as accurate and consistent as possible across different media, printing processes, and monitor displays. You also want to strive for as much color control as possible among the different elements of your brand that you have printed when using different printing processes. This is done by comparing your Pantone color choices to their four-color equivalents, for example, to ensure that the two are as close to matching as possible.

There are also a few ways that we can minimize or overcome these inaccuracies and misrepresentations:Â

~~Â Using colors available through the Pantone Matching System (PMS colors). Printers mix these colors to the exact specifications shown in the Pantone books, so you know exactly what the colors will look like on the finished product. However, this printing method only allows for printing in one, two, or three colors and can be more expensive than some of the four-color, digital printing methods available today. However, many digital press shops offer only onw or a few types of smooth, white paper. Press printing with Pantone colors allows you to choose from a wider range of textures and colors of paper, which then adds a new color element to your materials that includes the color of the paper itself.

~~Knowing how your corporate colors will translate. The Pantone system also offers a set of books that show how the Pantone colors will translate to CMYK - an important factor to consider if you will be printing some of your materials in two or three colors and other materials in four-color (full color). With these books, you can easily see how your chosen Pantone color will translate to CMYK, so that you can print your materials in the most economical way.

~~Â Home or commercial laser printers will often show an approximation of the final color. When color matching is somewhat important, but not essential to the success of the project, we suggest proofing your colors on a good-quality color laser printer. The printouts from these printers will simulate four-color (CMYK) press results, though they won’t match exactly, due to the differences in their calibration versus that of professional printers.Â

~~ For four-color (CMYK) printing where the accuracy of color is essential, many printers can produce “match proofs” - proofs that show very accurate color. These proofs will cost about $100 for a letter-sized page. This process will also will extend the production timeline of your printing job by several days for production and approval, but the proofs will give you an accurate representation of the color of your final job.

These tips should help you achieve good color consistency, and to get the results that you expect from your color.

Here are more articles about color accuracy in graphic design.

Here is our index page for color topics

Here is a list of even more color articles.

Visit our index of graphic design topics and articles. [tags]colors, color, color and design, color accuracy, printing, printers, graphic design[/tags]
Erin Ferree is a brand identity and marketing design strategist who creates big visibility for small businesses. Through her customized marketing and brand identity packages, Erin helps her clients design effective websites that help them extend their brands, bring in new clients and make sales. http://www.elf-design.com

Color Theory in Graphic Design & Web Design - How to Combine Colors & Choose Color Schemes - Part III

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

55+ Color Tools for Color Palettes, Color Combinations, Color Schemes & More for Graphic Designers & Web Designers



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. :-) 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 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 color 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 colors, you can instead use a table’s 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 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.

primary colors red blue and yellowAn example of Primary Color Schemes

SECONDARY COLORS

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

Secondary Colors are Orange Green and Purple and are created by mixing the primary colors togetherAn example of secondary colors schemes in design example

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.

Tertiary Colors are next to eachother on the color wheel such as yellow orange red-orange red-purple blue-purple, blue-green and yellow-greenAn example of tertiary colors design

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

an example of monochromatic colors scheme design

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.

Analogous Color Schemes include 3 colors next to eachother on color wheelAn example of analogous colors schemes implemented in a design

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.

Complementary Color Schemes including 2 colors that are opposite of eachother on the color wheelan example of hte use of complementary colors in a completed design

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.

Split Complementary Color Schemes on the Color Wheel inludes 3 colors, one color with 2 adjacent colorsan example of split complementary colors as used in a completed design

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.

Triadic Colors are colors that are separated by 3 colors on the color wheel so they are 120 degrees apart from eachotherAn example of triadic colors schemes as used in a design element

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.

sony's corporate logo design

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.

Example Color Schemes for a Sample Samsung Web Design Project for their Corporate website in Monochromatic Color Schem, Analagous Color Combinations, Complementar, and Triadic Color Schemes

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 .

Here are some examples of corporate color schemes on corporate websites

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.

55+ Color Tools for Color Palettes, Color Combinations, Color Schemes & More for Graphic Designers & Web Designers - Part II



55+ Color Tools for Color Palettes, Color Combinations, Color Schemes & More for Graphic Designers & Web Designers



Every designer will find these free online color tools to be useful. Whether you are a Graphic Designer, Web Designer, Fashion Designer, Interior Designer, Landscape Designer, or any other sort of Designer, color combinations are essential to your career. Although, we all have a unique sense of what colors go together, many of us tend to use the same color schemes over and over again because they are safe. What these color tools do, in my opinion, is help us find new beautiful color schemes that we haven’t tried to use before. Look below to find a huge list of online color tools and utilities to find new color schemes for your layouts and designs. Don’t forget to read Part I of our color article series … How to Choose Colors and Color Schemes … Part II of our color article series … 55+ Color Tools for Color Palettes, Color Combinations, Color Schemes & More for Graphic Designers & Web Designers… Part III of our color article series … Using Color Theory to Create Beautiful Color Combinations… and Part IV of our color article series …  Examples of Great Color Schemes and Color Combinations

  1. 100 Random Colors 2.0 - This nifty little web color application is primarily a random color generator that’s intended to help graphic designers and web designers like you to truly get out of your “creative block.”
  2. Accessibility Color Wheel - The Accessibility Color Wheel is an interactive page with a very visual display of how color blind people view different foreground and background combinations on a website. This color wheel tool works by choosing a foreground color, and then pointing the mouse over the wheel or the grey stripe, and then clicking. Then click the “Background” button and choose a background color the same way. If OK becomes visible, then the color combination is good for accessibility.
  3. Color Blender - The Color Blender is a free online tool for color matching and palette design. To get started, just choose a color using the color picker, and a 6-color matching palette blend will be automatically calculated. You can then tweak individual colors of your blend. Blends can be saved for future use or you can just choose to load a random color blend for those color creative blocks.
  4. Color Cell - This is an experimental website about colors. Colorcell wants to find the most popular color combinations. You can create your own COLORCELL by choosing up to four of your favorite colors. Your cell is living in a virtual livingspace with cells from other users. There is space for 100 cells. Everybody can select their favorite cells once a day. Each day, the daily selections of each cell get converted into fitnesspoints. Cells that seem to be likeable will become stronger and cells that didn’t get selected often enough will become weaker.
  5. Color Combos - This site was built to help web developers and web designers quickly select and test website color combinations. The heart of the site is the Combo Tester, which allows web developers to see how different color combinations work together on the screen. If you are looking for color combination ideas, check out the Combo Library. The library contains hundreds of color swatches, along with their color hex values. You can also use the website color grabbing tool or the search tool to get a quick start.
  6. Colour Contrast Checker - The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast “when viewed by someone having color deficits or when viewed on a black and white screen”[W3C]. The tool will indicate that the colours pass the test if both the colour difference and the brightness difference exceed their threshold. It will indicate that it sort of passes if only one of the two values exceed their threshold. And finally, it’ll fail to pass if neither value exceeds its threshold.
  7. ColorDB Color Database - You will love this amazing color tool. Click on the Color Wheel and a plethora of color information appears for this color that you just chose. Some of these things are variations of this color, color harmonies for this color, colors that are close, a color map for this color, as well as other information such as CMYK, RGB, HLS, and much more. You will love this.
  8. Color Hunter - Color Hunter is a place to find and make color palettes created from images. To find color palettes on Color Hunter, enter a search term in the box at the top of the page. You can search by tag or hex color code or image URL. If you have an image, you can upload it and get a color palette based on the colors in the image.
  9. Color Inspirator - With the Color Inspirator, you can tell the site how many colors that you would like to work with, click the “mix” button and receive your color palette suggestions.
  10. Color Jack - ColorJack is an online Color Scheme Generator used by Graphic Designers, Interior Decorators, and many other people from around the world. The front page is almost completely covered with square color swatches. Just hover your mouse over one of the swatches to see color schemes that go well with that particular color. Color Jack also has a great Sphere Color Picker - tool that you might find useful.
  11. Color Lab by Visibone - You will love the tools that Visibone offers for graphic designers and web designers. This specific webmaster’s color tool is the 216-color palette Color scheme picker for web designers called Color Lab. You can see all of the web-safe colors on the left. Pick a color by clicking on the color that you think that you want. After you click, you will be able to see your choices on the right with hex and decimal codes and all of the text and background color combinations.
  12. Colour Lovers - COLOURloversâ„¢ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color - whether for ad campaigns, product design, or in architectural specification - a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.
  13. Color Mix - By dithering 2 or 3 browser safe colors, it is possible to make over 10 million different color combinations. ColorMix provides a quick and easy way to combine 216 hex values, reference the possibilities, and download new combinations. After you create a color that you would like to use, just click “Make Swatch” and ColorMix will prepare a gif time of that new color for download. The tile can be used as a background or fill.
  14. Color Mixers - ColorMatch Remix is based upon the ColorMatch tool by Kim Jensen. Unfortunately, while useful, it only worked in Internet Explorer. Color Mixers has more features and more colors, and to top it off you can export the color tables, and a database of colors.
  15. Color Scheme Generator 2.0 - A useful generator of color schemes and palettes to create good-looking and well balanced and harmonic web pages.
  16. Color Schemer - Excellent tool for helping you design your graphic design materials or your websites. Color Schemer Online helps you pick the right color options, Generates RGB/HEX color schemes, and allows you to easily explore various color schemes.
  17. Color SynthAxis - A very cool web-based color palette that is very useful for easy color scheming. However, it is only easy after you take the tutorial that is listed on this site. Color synthAxis is a free online tool designed to simplify the nightmare of color scheme selection. It looks complex, but after a few minutes you won’t be able to live without it. There are a lot of features in this color tool that you won’t find in other online color tools”¦check it out.
  18. Color Toy 2.0 - ColorToy 2.0 is a Flash based color scheme generator and picker. It generates complementary color schemes based on your inputted color values or randomly, which is much more fun. This fun tool generates complementary color schemes based on your inputted color values or randomly. Which of way sounds more fun to you?
  19. ColourMod - ColourMod comes in many different versions. Each version is tailored to fit your specific needs and desires. From color conversions on your desktop, to color picking on the web, there is something for you.
  20. Color Vision - 1 in 12 people have some sort of color deficiency. When you’re designing for the web, this means that 1 in 12 people might not be able to see your site. That’s a lot of people. This tool helps you simulate the appearance of our site’s colors for people with different color visions. Select text and background colors from the palette below, then choose a color vision mode.
  21. Color Schemer Studio - ColorSchemer Studio is a professional color matching application for anyone from hobbyists to advanced professionals. Work with a dynamic visual color wheel, instantly explore harmony relationships and even let ColorSchemer Studio intelligently suggest color schemes for you!(This software isn’t free)
  22. Color Wizard - The Color Wizard is a color matching application for anyone who wants to create designs with great looking colors. The Color Wizard returns a set of hue, saturation and tint/shade variations of your color, as well as suggests color schemets to you, based on your color’s complementary color, split complementary colors, analogous colors and other variations. The color wizard also has a randomize function that lets you generate color schemes you might not have thought of on your own.
  23. Colr Dot Org - What a great idea!! Load your own image into the site or get a random image from Flickr and this site will give you the color scheme for that picture. How great is that? They also have a tool in which you can enter the URL of a website, and you can get the color schemes from that. You can also browse through other users recent color schemes, which is also very useful.
  24. CopySense Design and Color Utilities - On this page you will find many useful color tools and utilities to use while creating beautiful designs. Some of these color tools include (1) Colourway - Compare colors - web safe, Windows-based, and custom colors. (2) Colourband - Generate a graduated “band of color” that resizes with changes in screen resolution and browser window size. (3) Colourband Text - Generate HTML text in graduated color. (4) Colour Increments -Precise and easy color comparison and alteration. (5) RGB Converter - Convert RGB color codes from hexadecimal to decimal, and vice versa. A color box is present for verification.
  25. Create a Website Color Scheme 2 - Use this free tool to study the relationships between colors. You can actually use it to choose the color scheme of your own website. Be sure to read the help section for a better understanding.
  26. Daily Color Scheme - Daily Color Scheme is a web site all about colors. This site servers a new color combination scheme every single day of the year, to keep the designers head fueled with inspirational and usable color schemes.
  27. December.com Color Shades - The December Color Shades Chart shows a list of colors and, for each color, three other colors based on the original color but with higher light values. You can use this chart to set up beautiful color schemes. This chart lists the colors from the color codes chart that have some saturation. (Grey, white, and black have no saturation.)
  28. DeGraeve Color Palette Generator - A great tool to use for either graphic design or web design uses. All you need to do is type in the url of an image that you think has a great color palette, and then this color tool spits out the web hex colors. If you aren’t a web designer, you can still use these numbers by entering them into Photoshop to get the CMYK or RGB alternatives.
  29. DHTML Goodies Color Schemer - Find the matching colors for your web site. Click on an element on the page(example the menu) to select it. Then select a color and click on the color from the color schemer to assign it to the selected web element.
  30. Easy RGB - There are several free color tools that you, as a graphic designer or web designer, will find very useful. These online color tools include (1) a Color Matching tool - Match your computer generated RGB values to color cards, paint lines, inks, fandecks and more. (2) a Color Harmonies tool - Search for colors complements to your RGB values. Create color harmonies, combinations and themes. (3) a Search a Tint tool - Search popular color collections for specific color codes or names. Once selected the desired color, find the closest match in competitors’ fandecks and color cards, create harmonies or get chromatic data. (4) a Color Calculator tool - Convert color data to different color spaces. RGB to CIEL*ab, CMY to XYZ and much more…Looking for color math or space conversion formulas? Click here for some practical examples. (5) a Color Calibration tool - You can now calibrate our server (based on your system characteristics) to improve your EasyRGB color experience. Linux, UNIX, Mac, laptop, LCD users can now get a much better quality in color presentation. (6) PC Software - EasyRGB-PC is a Windows based application that performs all the major functions of this site without the need to be on-line all the time. Low cost chromameters interfaces are also available.
  31. Eye Dropper Color Mixer - The tool uses fetches a pixel’s hex color value. You can use any image that you like. This is a very hand tool if you are trying to match an image’s background color to your design’s background color. You can now get a perfect color match.
  32. Etsy - A fun way to choose colors…check it out to see what I mean.
  33. Flickr Colr Pickr - This is a free color tool on Flickr. You can click on the color of your choice or use the slider instead. This color tool will then find images that match the colors you chose. This is a great tool for finding pictures that will match well with your graphic design or web design projects.
  34. Forret Color Conversion - This is a page that will help you convert colors between RGB, CMYK and HSV color spaces.
  35. GenoPal Online - GenoPal always proposes colors that are eye-pleasing. GenoPal colors are based on how your eye explores color - they are naturally harmonious. GenoPal does not have all the unnecessary bells and whistles. It’s so simple, your eye can select the right color without distraction. You can create, save and share your own palettes. Also comes with over 30 pre-loaded palettes. GenoPal lets you work in RGB, CMYK, HSB & HEX. Get colors from everywhere. You’d be surprised what GenoPal’s magnifier can find in your desktop.
  36. GrayBit - GrayBit is an online accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the page’s perceived contrast.
  37. Infohound Color Schemer - This color schemer is a simple tool to help you experiment with various color schemes for your next web or print project. Click around within the shaded box to set the saturation and brightness, or within the rainbow to set the hue. You can also enter a particular value directly into one of the boxes. Matching colors will be automatically chosen. You can click on one to set it as the primary color.
  38. Jeff Minard’s Color Palette Generator - Another great tool that would be useful to either graphic designers or web designers. All you need to do is upload your chosen image and then this color tool spits out the web hex colors. If you aren’t a web designer, you can still use these numbers by entering them into Photoshop to get the CMYK or RGB alternatives.
  39. Jemima’s 4096 Color Wheel - A simple free online color tool to use to find web safe / web smart colors.
  40. JRM Color Palette Generator Tool - Upload an image to the JRM site and then this neat tool will give you a color palette as well as the Hex codes.
  41. Juicy Studio Colour Contrast Analyser - The Web Content Accessibility require that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits, or when viewed on a black and white screen. This online color tool is provided to allow you to check the contrast of two colors using the W3C’s color contrast algorithm by specifying the colors directly.
  42. Kolur - Kolur is a simple and enjoyable way to browse color palettes. Designs displayed in the Kolur gallery go beyond the generic 3 colored dots, and attempt to portray the possibilities in palettes. This handy tool makes palette piracy easy and fun.
  43. Kuler - A community site for creating, sharing, and downloading color palettes for use in themes and applications (as kuler APIs) “” great for inspiration, brainstorming. Need the most current Flash player.
  44. Limitless Innovations Color Exploration Tools - 6 great color tools that are free to use online, including (1) a tool to check the ability to read text in four foreground and background combinations. (2) a tool to explore colors near a specific color. (3) a tool to mix varying amounts of all combinations of red, green and blue with a specific color. (4) a tool to finely-tune your color choice by hue, saturation or lightness, or make instant sets of coordinated colors. (5) a tool to blend a color with its complement and up to six other colors by creating the intermediary colors. (6) a summary of different color schemes. An example of each scheme is shown using the current color.
  45. Online Color Chart Picker - This online color chart provides HTML color codes (HEX, Smart and Web Safe) in a very accessible format. First, click on the color wheel to select a color and angle and then a full color palette of selected colors will be displayed on the right. The color palette located on the right is structured in a way that color gains saturation from left to right and brightness from bottom to top. The color box on the far right side of the screen displays the current color under the cursor and its HEX color value.
  46. Pantone to RGB Color Converter - Select Pantone Matching System® Colors from within your favorite application with Pantone colorist. Version 2.0 features the latest sRGB, Adobe® RGB (1998) and HTML values for the coated, uncoated and matte libraries. Plus, pick the perfect color scheme at InspireME, a dynamic Web utility feature of Pantone colorist.
  47. Pic2Color - Pictures contain colors that represent a particular mood which now can be applied with just a single click. Just load your photo or illustration into Pic2Color to get the color scheme information. Pic2color is a patent-pending color re-scheming technology based on how the eye perceives color. This technology is set to revolutionize the creation of color schemes for graphics.
  48. Redalt’s I Like Your Colors - An insanely cool color tool. All you do is type in the URL of a website that you like and the color palette of that site will appear for you to take and copy. Great idea for a color tool.
  49. Sessions.edu Color Calculator - With the Sessions.edu Color Calculator, you can identify color harmonies faster than with any color wheel or chart. Use it to select a color scheme for a corporate identity or design project. Rotate shapes on the color wheel to identify harmonious color schemes. Adjust saturation and lightness. Save RGB, CMYK, or HTML color values, then send them to a colleague or client.
  50. SitePro Central Color Schemer Chooser - Choose the best HTML color combinations with this free tool. Use the Color Schemer Chooser is an easy to use color finder that generates HTML codes. You choose a starting color and it sets up a scheme, such as an analogous or contrasting color scheme. A full suggested palette is provided (bottom left), with hex numbers.
  51. SlayerOffice Color Palette Creator - The Color Pallete Creator is an excellent tool to make new colors from combinations of different colors. This tool will create 10 shades of the base color at varying degrees of opacity. The top row emulates opacity over a white background, the bottom over black, or other colors of your liking.
  52. The Man in Blue Technicolor - This is a great and innovative color tool for web designers. First, you start by selecting color components. All elements on the mock web page can be colored, including section background and text color. The mock web page can then be “auto-painted” using the current main color and its variants. You can “promote” a variant color to be the main color by double-clicking on one of the color squares. This moves the variant to the main color and produces automatic variants for it. Then after doing all of this, you can get color codes. This cool color tool supplies the value as a decimal RGB component color, followed by the more web-traditional hexadecimal value.
  53. Triplecode Munsell Palette - Most color models (such as RGB, HSV, and web color palettes) are based on mathematical formulas which have little to do with how the human eye sees colors. The Munsell system is different because it is based on how people perceive colors. The Munsell Palette software on this page is based on software Triplecode that principal David Young encountered while a student at the MIT Media Lab. The updated version here uses the same Munsell data, but can be used on any computer that supports the Flash plugin.
  54. Unsafe Color Match Tool - Unsafe?? Yes, colors are in 30° hue steps, so in principle all possible 24-bit colors can be generated.
  55. Web 2.0 Color Palette - Organised into 3 distinct colour groups - neutrals, muted tones and bold colours, you may recognize a few of the shades from some of your favourite Web2.0 sites. Now you can quickly and easily assemble your own colour scheme - simply choose any number of bold or muted colours, then add as many neutrals as you see fit - you’ll have a Web2.0 masterpiece in no time at all!
  56. Web Color Visualizer - With this color tool, you can visualize different colors. You click on one of these color swatches and the background then changes to that color. After that, you then just hover your mouse over top of the color swatches and the text will then change colors so that you can see what color text looks good on your chosen background color.

Don’t forget to read Part I of our color article series … How to Choose Colors and Color Schemes.

Here are other Online Blogs with Similar Articles and Resources

1o Tools to Help You Select a Web 2.0 Color Palette

Online Color Generators from Smashing Magazine

30 Color Scheme Tools and Websites for Designers

Colour Tools

Color Tools for Web Designers

10 Free Color Tools for Web Designers

The Best Free Colour Tools & Sites Online

Choosing Colors and Color Schemes - The Ultimate List

Top 20 Colorand Theming Resources for Web Designers

Top 10 Resources to the Perfect Colors for Web Designers

Online Color Resources for Designers