Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

March 28 2012

00:00

Make Everyone Jealous with Green Themes, Palettes and Artworks

Soon you’ll make everyone green with envy by showing off your newfound knowledge of this month’s colour! Read on for some interesting bits of trivia, tips, puns and finally, as always, a showcase with a little something for everybody. Enough beating around the bush, let’s get to it!

Other color of the month you might enjoy:

December - Colour Chronicles: Bold Brown
January - Colour Chronicles: Brilliant Blue
February - Set Your Website on Fire with Red Themes, Photos, and Palettes

Basics


Green is a complementary colour that results from the combination of yellow and blue, taking on many of the latter’s characteristics while still retaining its own features and symbology. Interestingly, in many languages, the name itself has its roots in words describing growth, freshness, youth and grass, while others (at least historically) would not even have a separate term for it, instead including it in the words for blue and yellow, respectively.

Characteristics


Green is a tranquil and peaceful colour with soothing properties. The word which best captures its essence is “balance”; neither too warm, nor too cool, calming but still vibrant, easy yet not too easy to perceive. Although present in minerals (emeralds, for example), it is mostly an organic colour.

Studies suggest that the colour improves the ability to concentrate and aids in reading comprehension. In Denmark, during exams, the desks are covered with green tablecloths to help the students focus and to try to relieve some of the stress.

Although no longer accurate, the term “green room” comes from the fact that the waiting room was literally painted green. It was said to relax the performers’ eyes before they would have to face the lights on stage.

Symbolism


Naturally, it represents everything organic, especially the plant world. Now it has become the number one colour for the environment and causes dedicated to preserving or saving it; it has also extended to eco-friendly products and services (the term “green energy” comes to mind).

Going deeper into the topic, it is a symbol of life and fertility. This can come either from the more obvious source of green (plant life) or from water which can occasionally take on greenish shades. Through extension, it can be a symbol of new beginnings, just as tiny sprouts on dark soil let us know that spring is on its way. Saying that someone is “green” means that they are new or inexperienced.

featured-ladybug-martin-lougas

photo by Martin Lõugas

On the other hand, it can also represent the exact opposite: illness, death and decay. It is probably an analogy to the fact that anything green and visible on the human body is toxic, therefore a sign of sickness. Green mold is also a sign of decay.

There are also some figurative associations, such as luck or envy. A four leaf clover traditionally brings good luck and is presumably the source of the connection. The ancient Greeks believed that envy was caused by excessive bile which would normally give a person a pale green complexion.

Combinations


As mentioned in the previous article, its complementary is red and the theoretically ideal proportion is 50-50. However, the pair should be used in less vibrant shades and as accents rather than main elements in order to avoid a Christmas feeling. Another way would be to use orange instead of red.

For an earthy mood, brown is the obvious choice. Darker and less saturated versions of both give a more somber feeling; keeping the dark brown but coupling it with a vibrant (but not default RBG!) green allows you to place emphasis on elements without adding too much glare.

Blue and a more bluish green make for a nice watery combination, but like with red, a proper hierarchy should be used. Using just the two will make the visuals hard on the eyes and you definitely don’t want that! Both of them work great with dark grays and provide great contrast and emphasis.

Palettes


01. Botany Greens by julievonderropp

palette-01-botany-greens

02. Freshaliciousness by whoneycutt

palette-02-freshaliciousness

03. After Vacation by whoneycutt

palette-03-after-vacation

04. Peachy Green by books4me22000

palette-04-peachy-green

05. Lime Light and Shady by whoneycutt

palette-05-lime-light-and-shady

06. Elderberry by julievanderropp

palette-06-elderberry

07. Vintage Light by nlarroyo1

palette-07-vintage-light

08. Green Accent by reinderdevries

palette-08-green-accent

09. Lettuce carrots and cucumbers by mohdakram12

palette-09-lettuce-carrots-and-cucumbers

10. Turtle by rbb2008

palette-10-turtle

Web – WordPress themes


01. ECOBIZ (premium)

website-01-ecobiz

02. Debonair (premium)

website-02-debonair

03. Booster (premium)

website-03-booster

04. Delicious (premium)

website-04-delicious

05. efolio (premium)

website-05-efolio

06. Food Recipes (premium)

website-06-food-recipes

07. Optimize (premium)

website-07-optimize

08. Groovy Video (premium)

website-08-groovy-video

09. Maze Lime (free / must keep footer)

website-09-mazelime

10. Climex (free)

website-10-climex

Artwork – fantastic sceneries


01. Green Hills by I-NetGraFX

artwork-01-green-hills

02. Green Swamp by R-A-I-N-A-R-T

03. Green… by AlectorFencer

artwork-03-green

04. Deep green feelings by casio222

artwork-04-deep-green-feelings

05. Green Forest by UnidColor

artwork-05-green-forest

06. Nature lady by sakimichan

artwork-06-nature-lady

07. Ravnica Green by Fyreant

artwork-07-ravnica-green

08. A girl and a forest by Blinck

artwork-08-a-girl-and-a-forest

09. Crypto night by priteeboy

artwork-09-crypto-night

10. The Fortress by DesignSpartan

artwork-10-the-fortress

Reposted bysoupchick soupchick

March 15 2012

09:04

Explosions of Color: Inspired Collection of Bright and Colorful Vector Illustrations


  

With Spring on its way to so many, the landscapes will soon be blossoming with bright, vibrant colors. For those who are not wanting to wait for that seasonal colorful explosion, we have prepared a splash of brighter tones to help. With so many talented vector artists sharing their fine works across the web, we have turned out spotlight their way for an inspirational showcase that is sure to please.

So take a look through this bright and colorful collection of vector illustrations to get an inspirational recharge. With a range of subject matter and moods, these pieces’ expressive use of colors are sure to put a smile on your face and even potentially an idea or two in your mind.

Explosions of Color

Encomium: Lana Turner by jengartist

wooof – lonely wolf by maxtodie

Monster Avenue Doodle by reyexzyl

We Are Not Alone by GoshaDole

Foodie Babe J by CQcat

Tuti Suka Es Nong-Nong by fajardesign

Leisure Precipice by digitalsleaze

Blossom by iamkzee

Render Cecilia by sakucitah

Gal de los Muertos by SashaZombie

Distorted Reality by x-posion

Ponyville Flower Shop by RainbowRage12

Wild Pinetree and Friends by Mag1cWind0w

Ling-Liang by andyshade

Indonesia by morlock22

Principito by ALPHA11-11

Nature areaClosed

Caligrafia by lauliver

Summer Time by Cuccko

Park by jarist84

TERESHA X SALLY by silocult

Sound in my ear by Tomekkaz

Matilda by stigmatan

22 by TimurKhabirov

The spirit maya by AR-MANDO

Fruity-fruit by chibiorangebing2

Black Friday Collaborations Project by chicken1985

Ace in the Hole by Maglii

Rainbow pipe cloud by Giesji

Zosterops japonicus by 398hajime

Japan by morlock22

Memory by pikachu0221

punKgirl by Psycool

Chun lee street fighter Vector by brainwavedesigns

GoGo Girl by MidniteHearts

Passado-Presente-Futuro by ine5ita

Me… Oh Wait…! by iveinbox

~ combi ~ by bagusetiawan

Dave Koz by prie610

Little Vampire by Camilo-Otalora

(rb)

February 25 2012

10:00

Set Your Website on Fire with Red Themes, Photos, and Palettes

There are some things that you wouldn’t have thought of when using red, such as symbols or effects on our mood. After all, it’s just a colour, right? Red has quite a few qualities and associations; fiery, passionate and overall dynamic are just a few descriptive words that barely scratch the surface.

Prepare to go deeper into the subject and see just how it works!

Basics


Like its predecessor from the previous article, red is part of the primary triad, but it is also on the opposite side in a few senses. Unlike blue, its name is much less tolerant and only a few colours have the luxury of being included in the category. The exclusiveness is present at a biological level, as well: only one of the three types of receptor cells is truly sensitive to the wavelengths characterising red. If you really think about it, just slightly tinting something red will most probably warrant a different name.

Characteristics


Being a warm colour, it tends to be more invasive and will make a room appear to be smaller than it actually is, but when used well and in darker forms, it can lend itself to a cozier environment.

As mentioned, red is somewhat more difficult to perceive and this is because it has the highest of wavelengths. As its wavelength increases, it also nears the edge of what is called infrared, which cannot be perceived by the naked eye.

Colour therapy suggests that exposure to red raises the blood pressure, thus having an invigorating effect. Without going too much into the subject, Eastern philosophy associates red with the adrenal glands and, by extension, with the emotions produced by increased adrenaline.

Symbolism


Naturally, the things associated with it vary with every culture, but there are some general symbols with which we can all agree. In no particular order, these include heat, fire, passion, courage, danger, love and energy.

featured-rose-martin-lougas

photo by Martin Lougas

It is a very human colour which is why it has emotions associated to it. Demanding activities, whether mental or physical, and strong emotional responses imply increased blood flow therefore creating a very straightforward connection with red: blood.

Delving deeper into the human aspect, warmth and energy can be derived. Strangely, the general idea of flames being red has long been rooted, even though orange would be more appropriate. Perhaps it’s because it triggers much stronger feelings which are better represented by fire and we also tend to remember and associate extremes. Warmth and heat also suggest life, but from an inner perspective.

Red is a very powerful symbol for danger because of its immediate perception and adrenaline-related qualities. Stop signs and stop lights are examples of its daily uses. In part because of this, large quantities of bright red can be overbearing so it should be used sparingly.

Combinations


Given its overall effect, for a balanced result it’s best to either tone down a predominantly red design or use it in smaller quantities to bring more life. This mostly concerns bright shades; while darker tones can still be imposing, they are still more tolerable. It should be noted that it tends to conflict with strong cool colours and will warm up more passive colours like browns.

Its complementary is green and theoretically it should be used in a 50-50 proportion for a harmonious effect. In order to avoid a Christmas impression, their interaction should be kept at a minimum and a third colour should be introduced to keep them in check by dominating quantity-wise. Another solution is to use less bright variants.

As an attention-grabber, it works well on darker backgrounds such as dark grey, ash brown and even black. The contrast is effective even with darker or vintage tones of red. On the opposite side, it can be successfully used on white backgrounds in more minimal designs, but once again with a bit of caution.

Palettes


01. TOOL Remix by whoneycutt

palette-01-tool-remix

02. Sea Serpent in Horrible Peril by sethbenson

palette-02-sea-serpent-in-horrible-peril

03. Shark Attack by kristi

palette-03-shark-attack

04. Fire Dragon and Charthouse by mark

palette-04-fire-dragon-and-charthouse

05. Herzin by maya-kido

palette-05-herzin

06. Oil Flame by rickomoreira

palette-06-oil-flame

07. Vintage Poster by robertkubas

palette-07-vintage-poster

08. Court of the Crimson King by carle

palette-08-court-of-the-crimson-king

09. Water Cherries by spongebobgirl949

palette-09-water-cherries

10. War on Water by cgriffith

palette-10-war-on-water

Web – WordPress themes


01. Slick Red (free)

website-01-slick-red

02. Provocateur (premium)

website-02-provocateur

03. Redminton (premium)

website-03-redminton

04. ShapeShifter (premium)

website-04-shapeshifter

05. Titanium Folio (premium)

website-05-titanium-folio

06. Daily Journal (premium)

website-06-daily-journal

07. Bold (premium)

website-07-bold

08. CherryTruffle (premium)

website-08-cherry-truffle

09. Snapshot (free)

website-09-snapshot

10. Myriad (premium)

website-10-myriad

Artwork – macro photos


01. Red Delight by Bozack

artwork-01-red-delight

02. Abstract Red by StacyD

artwork-02-abstract-red

03. Shades of Red by eyedesign

artwork-03-shades-of-red

04. Blood Clot by PoisonedHamster

artwork-04-blood-clot

05. An Apple II by OnMostSurfaces

artwork-05-an-apple-2

06. Ladybug by wulfila

artwork-06-ladybug

07. Leaves on fire 3 by Dieffi

artwork-07-leaves-on-fire-3

08. Cherry Blossoms by heathersfeathers

artwork-08-cherry-blossoms

09. Red by i-shadow

artwork-09-red

10. Flaming Feathers by starlightspell

artwork-10-flaming-feathers

January 29 2012

21:00

Colour Chronicles: Brilliant Blue

Welcome back to another colourful article, this time dealing with last month’s favourite, chosen by you! Just as last time, it includes a showcase of websites, artwork and palettes, so there is a little something for everybody.

Basics


Blue is one of the three primary colours and as such is also part of the chromatic spectrum. It is a cool colour which covers a relatively wide area of the spectrum, ranging from cyan to a more violet tint. Of course you could always nitpick, but there is usually little doubt as to what all its different shades should be called; light or dark, greenish or not, you can still call it blue and get away with it.

Characteristics


According to its proper theory, blues are considered far colours, meaning that they seem to expand whatever shape they fill; a room, for example, will seem larger if painted blue, rather than yellow or orange.

It is easily perceivable by the human eye, given that blue colours present a wavelength between 440 and 490 nm. All three types of photosensitive cells respond to this range, albeit to varying degrees. On the other hand, the inclusive nature of the name means that some shades are (literally) easier on the eyes than others. Nevertheless, blue is a common sight in top favourites.

Symbolism


Although present in living beings (mushrooms and frogs, for instance), generally it has more inorganic and abstract associations.

One of these is the sky. Light tones give a sense of open space and freedom, an overall calming effect. Using light blue backgrounds in web design can make a site look friendlier, but large backgrounds have the risk of becoming dull. To avoid this, take inspiration from nature: the sky is much more appealing when the Sun creates a sort of gradient, rather than when it’s more or less one solid colour.

featured-trondheim-omgivelser-helene-rojas-nagel

"Trondheim omgivelser" by Helene Rojas Nagel

Next is the sea (or water in general). As a symbol of life and vitality, it also represents versatility; you can find it nearly everywhere, filling different shapes in different states. Although it is colourless in small quantities, in reality water has a slight blue tint that becomes more obvious in large quantities. While the image of a still body of water can be considered peaceful, remember that it can just as easily turn into a source of turbulence.

Blue is also a powerful corporate colour because of its association with stability and confidence. This is also why many IT companies prefer to use it in their visual identity, trying to combat the (to a certain degree) volatile nature of technology. Of course this all depends on the company’s philosophy, profile and desired image, but reliability seems to be the most wide-spread.

Some of the more negative associations are cold and melancholy. Less saturated shades remind of murky skies on cold days, while brighter shades closer to cyan have a frostier feel to them. Also, save for eye colours, the presence of blue on the human body is an indication of something wrong. This can be both physical and mental, hence the expression “feeling blue”.

Combinations


Bright, electric shades of blue create a fantastic effect when combined with dark, ash brown. Although it dominates and gives the overall composition a cool feel, at the same time it manages to generate energy. It works well with dark metallic colours as well.

Together with teal or mint green it creates a natural, watery scheme that is also very fresh and inviting. Of course, there must be some balance and hierarchy between the two colours; otherwise they will compete with each other if they have the same intensity.

Using blue for less important details in orange or yellow schemes can cool down the design and take away some of the glare. While traditionally, orange is blue’s complementary, combinations with yellow will have roughly the same effect.

Palettes


01. Complementary blue by tudor.girba

palette-01-complementary-blue

02. Swimming Sports by julievonderropp

palette-02-swimming-sports

03. Sunny Shores by twinklebunnytoes

palette-03-sunny-shores

04. Sea Foam by louisan

palette-04-sea-foam

05. Lilac Bathroom by nightzdragonz

palette-05-lilac-bathroom

06. Leviathan by matthepworth

palette-06-leviathan

07. Bleu Blanc Rouge by kuler

palette-07-bleu-blanc-rouge

08. blueberry pie by elsabartley

palette-08-blueberry-pie

09. Nautical Cruise by thecolorcat

palette-09-nautical-cruise

10. Giant Attack Robot by stevereed.m

palette-10-giant-attack-robot

Web – WordPress themes


01. Sealight (premium)

website-01-sealight

02. MyStream (premium)

website-02-mystream

03. Irresistible (free)

website-03-irresistible

04. MixBloo (free / must keep footer)

website-04-mixbloo

05. The Revival (free)

website-05-the-revival

06. Blue Earth (premium)

website-06-blue-earth

07. Feather (premium)

website-07-feather

08. SiliconApp (premium)

website-08-siliconapp

09. TheCorporation (premium)

website-09-thecorporation

10. Envision (premium)

website-10-envision

Artwork – animals


01. Sea turtle by Ruth-Tay

artwork-01-sea-turtle

02. The Safe Place by ShadowUmbre

artwork-02-the-safe-place

03. Hyacinth Macaw by doormouse1960

artwork-03-hyacinth-macaw

04. La fable de la girafe by AquaSixio

artwork-04-la-fable-de-la-girafe

05. Snowy Owl by markkarvon

artwork-05-snowy-owl

06. White Fang 2 by Ginseng-fox

artwork-06-white-fang-2

07. Out of Blue by kerembeyit

artwork-07-out-of-blue

08. Bubbles by trenchmaker

artwork-08-bubbles

09. The Emperor by D-NA

artwork-09-the-emperor

10. Into the blue by orcasaurus

artwork-10-into-the-blue

December 05 2011

10:00

Colour Chronicles: Bold Brown – Poll And Giveaway!

This is the first in a series of monthly articles about the colour of your choice. I’ve taken the liberty of choosing the first one myself, but from now on, it’s you who get to pick via a simple poll system. Since this is the first of the series, we have decided to select two random lucky winners from our poll and give them something really good!

Without further ado, let us talk about this month’s selection: brown.

Basics


To start off, brown is not a colour in itself, rather it is a range of composites. It can be obtained in a variety of ways which can all result in many shades, depending on the quantities used. In essence, it is a mixture of the three primary colours that has a low level of cyan, but it can also be red, orange, yellow or rose with varying quantities of black and white.
This means that there are a huge number of colours that all fall under the collective name brown, so for this reason it is usually preferred to call them by their dominant aspect, for example red-brown or orange-brown.
Human perception causes browns to be perceived as such depending on their surroundings. In fact, they are just low-intensity shades of the aforementioned colours, but when placed in high-contrast environments, they are seen differently.

Characteristics


Although they stem from warm colours, the lack of brightness makes empirically categorizing browns a bit tricky, as it also depends on what they are associated with. Theoretically, they are warm, but as a rule of thumb, the more saturated they are with their base (red, orange or yellow), the warmer they are. Adding black or white makes it a cooler shade, but it stays warm. Unsaturated shades are considered near neutrals.

They are best used as a supporting elements given their capacity to enhance others. Dark shades of brown are excellent as replacements for black, as they emit the same rock-solid stability, but are not so overwhelming or imposing. This can also reduce the sharpness of the contrast and make reading text much easier and relaxing.

Symbolism


It is a natural colour, organic and inorganic, with ties to earth, wood and even animals (think of fur). In general it brings the feeling of stability and order, as well as security and homeyness.

wood

photo by Martin Lougas

It could also be said that browns are more human. Skin tones can, more or less, fall into the spectrum and brown eyes and hair are some of the most common physical traits worldwide. There has also been a study that noted a possible connection between brown eyes and facial features which give the perception of dominance.

However, through extension, natural can also signify roughness, and stability can turn into stubbornness. When used excessively, they can make things dull and lifeless, although, ironically, brown can be a symbol of life. Tan or beige without a counterbalance reminds most people of stretches of arid sun-scorched ground.

When representing life, vitality or fertility, inspiration should be taken from nature itself. Earth (soil) alone does not mean life, but it provides the means for it to flourish. Trees protect themselves through dark (or sometimes light), thick bark, hiding their more vital parts. This all means that it should be given, as mentioned previously, a supporting role when aiming for a natural effect.

Combinations


Taking note of the previous points, when combining browns with other colours, they serve as catalysts while still keeping their warmth, but also taking some characteristics from the shade it supports. This leads to surprising and interesting overall effects.

For an earthy and natural effect, green is the best option, although the result can be quite different depending on the shade. With bright green, it will give your design energy and make it more eye-catching, but minty green will result in a cool and vintage look. On the topic of vintage, less saturated browns and pastels are the best options.

Dark brown will definitely make yellow pop, probably not as much as pure black, but the softer and less aggressive contrast makes it much more pleasant to look at.

Light shades (cream, beige, etc.) make pink appear much more feminine, and purple more royal or noble if you will. They are also good substitutes for white in most situations.

Palettes


01. Moss Rose by robertnbrown

palette-01-moss-rose

02. Boerne by aschroeder

palette-02-boerne

03. Red & Brown by shiz0-media

palette-03-red-and-brown

04. Sunny Day by koralute

palette-04-sunny-day

05. Herbs and Spice by whoneycutt

palette-05-herbs-and-spices

06. India Brown by jakob

palette-06-india-brown

07. Elegant brown by aakash.bits

palette-07-elegant-brown

08. Touches of color by jennifer

palette-08-touches-of-color

09. Chocolate coffee by njayendra

palette-09-chocolate-coffee

10. Coconuts and bananas by riopelle

palette-10-coconuts-and-bananas

Web – WordPress themes


01. Ermak Adora (premium)

website-01-ermak-adora

02. Nesnel (premium)

website-02-nesnel

03. Ecoblog (free)

website-03-ecoblog

04. Businezz (free)

website-04-businezz

05. Games Mania (free)

website-05-games-mania

06. Brown Mag (free)

website-06-brown-mag

07. Music Concert (free / $20 to remove footer links)

website-07-music-concert

08. Fullscreen (premium)

website-08-fullscreen

09. Rutheniumify (free)

website-09-rutheniumify

10. Buro (premium)

website-10-buro

Artwork – landscapes


01. Mountains 2 by jamajurabaev

artwork-01-mountains-2

02. Desert Mountains by I-NetGraFX

artwork-02-desert-mountains

03. Autumn by fxEVo

artwork-03-autumn

04. Lake by Raphael-Lacoste

artwork-04-lake

05. Regrowth by ehaft

artwork-05-regrowth

06. Dust by Apocalypse-tr

artwork-06-dust

07. Desert Storm by blepfo

artwork-07-desert-storm

08. Chasing New Arcs of Skies by harmonious-madness

artwork-08-chasing-new-arcs-of-skies

09. The Approaching Storm by cerona

artwork-09-the-approaching-storm

10. Isn’t that pretty? by Raphael-Lacoste

artwork-10-isnt-that-pretty

The Giveaway


We’re giving away two books about colors that will definitely help anyone whether they’re new to design, or consider themselves to be an expert, understand colors better! How do you win these cool items? Simply by answering our poll below. If this is a success, we will be giving away more cool items next month!

Color Design Workbook: A Real-World Guide To Using Color In Graphic Design

by Adams Morioka and Terry Stone

Color, Messages and Meanings: A Pantone Color Resource

by Leatrice Eiseman

Poll for December


So which should be next month’s colour? Pick your favourite below and get the chance to win the items above! Two winners will be randomly selected.

November 16 2011

10:00

A Basic Guide To Choosing Colors For The Mobile Web

The rules for mobile design and mobile SEO aren’t completely different from the rules applicable to desktop sites but it is all the minor differences that make a designer’s life hard. These differences are present in all aspects of mobile design and the process of choosing the colors for your mobile site isn’t an exception.

Reuse Your Desktop Color Palette

When I say that the process of choosing the colors for your mobile site is different, don’t take it that it has nothing to do with the standard process you know from desktop sites. In fact, you seldom have to start from scratch but instead reuse your desktop color palette. This might seem like a lazy approach but in fact it is much superior in almost every aspect to choosing your colors from scratch.

For instance, if you want to ensure consistency between your mobile site and its desktop counterpart, the best you can do is use a stripped down version of the color palette of your desktop site. All you have to do is remove the colors for the site components you won’t be using on your mobile site, make sure that they display well on your target mobile devices (you might need to replace some of the colors, if they are too fancy to use on a mobile or if the contrast is unsafely low), and you are ready to go.

However, it is also totally acceptable to start your mobile site from scratch rather than make it a stripped down version of your main site. The most common case for this is when your mobile site has a very different functionality from your desktop site. Of course, even in this case you can use a modified version of the color palette from your main site but if due to various reasons this is not possible, you need to create your separate mobile color scheme.

In any case, when you choose the colors for your mobile website, the technical limitations of mobile devices are a very important consideration to keep in mind.

Keep in Mind the Technical Limitations of Mobile Devices

Mobile devices get more and more powerful day by day but still in terms of technical abilities, they are far behind contemporary PC displays. For instance, mobiles with monochrome displays are almost history, though you can occasionally find people who use them. You might laugh at the idea to design with these devices in mind but the USE_OF_COLOR Human Test (“Browse the page in a monochrome environment.”) by the W3C recommends them as the ultimate test of how readable your colors are. This is not an exaggeration because some of the technical limitations of mobiles (and the environment you use them in) basically take away from you many of the advanced color options desktop displays award you with.

Image from Wikipedia

Color Depth Dictates Fewer Colors

One of the main characteristics of mobiles to take into account is their color depth. Technology is improving rapidly but still even the best models today have relatively low color depth. Low color depth, such as 8 or 16 bits means that a device is capable of displaying 256 and 65,536 shades of red, green, and blue, respectively, which is far from enough.

It is true that mobile displays are constantly increasing their color depth but there is still a lot of room for improvement. For instance, this article (though a bit old) gives an idea of what color depths some of the major brands on the market today offer. For a more detailed look at color depth, check this white paper.

Therefore, if you want to make the colors of your mobile site user-friendly, use as few colors as possible. It is better to stick to main colors and avoid the use of fancy ones because the risk of them not being displayed properly is higher. Additionally, because of the small mobile screens, you simply don’t have much space for lots of tiny squares all in different colors, which further forces you to use a palette with fewer colors.

Brightness and Contrast Settings Demand High Contrast Schemes

In addition to color depth limitations, you also need to consider brightness and contrast settings. The levels you see on specifications might sound decent but they can be misleading because they don’t take (and can’t take) into account the actual viewing environment. For instance, a very common use of a mobile is in the brightness of daylight, when the perceived brightness and contrast are much lower than the ones stated by the manufacturer. You can’t make your visitors browse your site only in the dark of the night to see it in its full glory, right?

What is more, many users keep the brightness and contrast settings low on purpose to conserve energy. All these mean that your site will be viewed with less brightness and contrast. To counterbalance, you need to use really high contrast color schemes. You can use a contrast analyzer to check how you fare.

Be Careful with Gradients and Background Images

If you use a lot of gradients in your designs (as I do), you need to be even more careful. Gradients are cool, but really only on a desktop. On a mobile, a user can see gradients even when they are not present – he or she just needs to bend the device a little, and voila, here is a gradient that you didn’t include in your design. Of course, this doesn’t mean you must kick gradients completely out of your mobile repertoire but if you minimize their use, this won’t be a mistake.

Backgrounds pose a similar problem. The same background might be perfectly legible on a desktop but on a mobile it might be impossible to read the text. It is your task to make sure this doesn’t happen.

Don’t Rely on Colors to Convey Meaning

Even with desktop design, it is not good to rely on colors to convey information – every usability expert will tell you this. However, this is true for mobile designs and even W3C has included it in its Mobile Web Best Practices.

Time to Get the Color Scheme Ready

Image by Wikipedia

When you get to the very task of choosing the color scheme for your mobile site, you need to take into account the meaning of colors and the right color combinations to use. Even if you plan to reuse your desktop color palette, it won’t hurt to see if a better alternative is available and try using a color scheme generator. These also help when you are stuck and have no idea which colors to use, or if you simply want to speed the process. You might not like every scheme the generator offers you but often the suggestions are at least decent and with some minor modifications (i.e. replace the colors in the scheme you don’t like with other colors you find more suitable), you are done.

Examples of Mobile Sites – Great, Good, Bad, and So-So

1. Weather Underground - a great site with clean design visible on any screen

2. Craigslist- boring to look at but really useful, very minimal, as the site itself, doesn’t waste my bandwidth with useless imagery.

3. Gmail – clean and easy to use.

4. Flickr – if they didn’t use the colors from the main site, the contrast could have been better but still it is OK.

5. Walmart – clean interface, though the text color is a bit light.

6. McDonald’s – the logo is rather pale, occupies a lot of space on the screen, but when you scroll down, things get better.

7. Digg – rather pale, difficult to read.

8. Bloomberg – again, could have had more contrast but not bad as a whole.

9. US magazine – the colors don’t have enough contrast, blurred and hard to read.

10. AztekWeb – gradient + low contrast + scrolling + light text on a dark background, though it probably could have been worse.

If you are familiar with color theory and if you have experience in designing desktop sites, you won’t find it difficult to come up with good color schemes for your mobile site. In fact, thanks to the specifics of mobile sites and the fact that all equal you need fewer colors, you might find it easier to design mobile color schemes than desktop ones.

November 07 2011

20:40

Tips And Tricks: Increase The Realism Of Your Vector Images In Adobe Illustrator


  

Over the years, Adobe Illustrator has become one of the top applications for creating vector illustrations. There is almost nothing you can’t make in Illustrator. It is a powerful tool for creating vectors for all kind of logos, websites, icons, business cards, print materials, etc. One of the best features of the vector format is its ability to scale up or down to any size without any loss in quality (unlike raster illustrations).

But let’s not forget that Adobe Illustrator is complex software. Despite all of its advantages, Illustrator demands a lot of skill, work, time and patience. The software will not generate effects automatically; excellent effects are the result of trying and testing different settings. Trial and error is an effective method in achieving the desired result. Creating realistic vector illustrations in Adobe Illustrator can be fun, but it can also give you a headache if you can tell something’s missing from an illustration but don’t know how to get it.

Here is a list of things to consider when creating stunning vector illustrations:

  • Perspective,
  • Smooth lines,
  • Colors,
  • Edge highlights,
  • Reflections,
  • Shadows.

Stick To Perspective

When it comes to drawing realistic vector illustrations, perspective is paramount in importance. If you ignore perspective, the illustration will look flat and distorted and lack depth.

The most important aspects of perspective are size and distance. The farther away an object is, the smaller it will appear, and vice versa. By increasing and decreasing size in this way, you can achieve good depth in your illustrations.

There are a several methods of drawing perspective.

Perspective Grid

One very useful way is to use a perspective grid, which is a new feature in Illustrator CS5. Establishing a horizon and the vanishing point is part of this. The perspective grid in Illustrator is an editable tool, so it can be adapted to suit one’s purpose. You can change the perspective simply by dragging the corner nodes of the grid. You can make the vanishing point longer or shorter and change the number of boxes in the grid. Being able to adapt the working environment to your needs will make it easy for you to do advanced drawings.

Extrude and Bevel

Some people have trouble seeing and presenting perspective in the first place. In this case, I would recommend “Extrude and Bevel,” which is a convenient tool for creating 3-D objects. You can set a value for “Perspective” in the “Extrude and Bevel” options box (either type in a value or drag the slider over). Expanding an object will make it editable. Because the Extrude and Bevel effect gives you an object with many parts and anchor points, it is highly recommended that you use that object as the reference for tracing with the Pen tool (P). This way, you’ll create clean and simple vector illustrations without any unwanted parts or any anchor points that are an obstacle in the printing process.

If you have imagination and some skill, you will be able to draw an illustration based on an estimation of perspective. Of course, this method is not quite precise.

But adding perspective alone is obviously not enough to create stunning artwork.

Using The Pen Tool For Smoother Lines

Creating shapes in Illustrator shouldn’t be complicated. To draw paths and curves, either use the Pen tool (P) or simply combine objects with Pathfinder features such as “Unite,” “Minus Front,” “Subtract,” “Intersect,” etc. Because the paths contain numerous anchor points, you will have to adjust them to create smooth lines. Anchor points are highly editable and can be adjusted with a few excellent tools. You can change the position of the path just by editing one anchor point. This takes a lot of practice; you’ll need a steady hand and patience.

Live tracing is one effective way to create vector illustrations. Try to complete a drawing with as few anchor points as possible; avoid adding anchor points at shorter intervals just to maintain the smoothness. To get smooth lines, make sure that the handle of the anchor point forms a tangent on the curve (i.e. inner or outer tangent). You can always add or remove anchor points by going to the “Add Anchor Point” (+) and “Delete Anchor Point” tools (-).

“Convert Anchor Point” (Shift + C) allows you to make changes on the anchor points themselves. With this amazing tool, you will be able to change the angle of the handle, thus enabling you to change the path of the lines. Whereas adjusting just one side of the handle will result in an angular shape.

Coloring

This part of the creative process is quite fun, but still demanding. Choosing the right colors can be a challenge. First, you have to determine what style you want. Gentle and pastel colors might work for retro illustrations, which would be rather simple and two-dimensional.

If you want to get photo-realistic, you might want more vivid colors. Good contrast can make the artwork stunning. If you don’t know how to mix and match colors, Adobe has a great website with color swatches and beautiful combinations.

There is also a swatch library in Adobe Illustrator, where you can find a lot of useful swatches and even create your own and save for future projects.

Gradients

When it comes to coloring, applying linear and radial gradients is the best way to show light sources and to give depth to your artwork. Establishing the position and angle of the light source is the first step in the coloring process. Shadows and highlights should be added according to the source of the light. Dark colors will simulate shadows and shade, while light colors will create highlights.

Besides creating shadows and highlights, gradients are the great way to simulate shape. Using color, you can give volume to an object or character. Use as many colors as you’d like to build a gradient, but just blend them well; otherwise, you’ll end up with harsh color transitions. If you tend to blend colors effectively, then try out the different “Blending Modes,” such as “Multiply,” “Overlay,” “Screen” and “Light.”

Linear gradients are mostly used to present a plane. Radial gradients are suited to ovals and round shapes.

Transitions between colors in gradients can be smooth or sharp. Smooth transitions are convenient for representing shade, shapes and forms. Sharp transitions are good for simulating gold, steel, chrome and other metals (i.e. for representing the reflection of light on these metals).

Gradient Mesh Tool

Because gradients are limited to linear and radial shapes, we sometimes have to find ways to use gradients in unconventional ways. Creating a gradient for an irregular shape is complex, because it involves blending colors between uneven forms with the use of linear and radial gradients. This can be a lot of work, but the Gradient Mesh tool is handy for this purpose.

The Gradient Mesh tool is a powerful tool that enables you to split up any part of an object by adding editable points and applying solid colors to those points. This way, you are able to create a gradient that follows the actual shape of the illustration.

While gradients make illustrations more realistic, there is always room for improvement. A great illustration is made up of many well-integrated details. Mixing and matching colors and shapes is not easy, but it does lead to a beautiful result.

Highlighting The Edges

When you are done with the gradients, your illustration should be ready for some nice edges. There are a few ways to create them. If your illustration has straight edges, the best way to highlight them is with the Pen tool (P). This enables you to create simple shapes that can be blended (via gradients) with the rest of the illustration. Or you can create a sharp white edge and turn it into the reflection using a low-opacity setting. Either way, you will be emphasizing the shape of the object.

Creating a highlight for curves is not much different. The most important thing is to make the shape of the highlight follow the shape of the object. The Pathfinder panel has a lot of features for creating curved highlights; doing it with the Pen tool alone would be tricky.

Reflections

Besides edge highlights and shade, light sources can create many reflections and shadows. Take a good look around you and you’ll see all kinds of reflections: on glass, plastic, wood, metal, clay, even in liquid. Reflections come in various forms. The most important thing, again, is to follow the shape of the object. For those skilled with the Pen tool, curved highlights shouldn’t be a problem. If you are unsure how to draw highlights with the Pen tool, try combining different shapes in the Pathfinder panel.

Even though the most common color for reflections is white, with reduced opacity, try out different color combinations.

Highlights are useful for showing off the material of an object. With a careful color combination and reflections in the right places, you can simulate the look of a surface quite well. The result is a nice illustration with a glossy surface.

The Final Touch: Shadows

The main purpose of a shadow is to create an illusion of three-dimensionality. Without shadows, the illustration is not really complete. The shadow “defines” the illustration in a way. Like reflections, shadows are created by the influence of light sources. The intensity or softness of the shadow depends on the distance between the object and the light source. A light source above an object will cover almost the entire object. Uncovered parts of the object will cast shadows on surfaces below and on objects nearby.

You can create a shadow with a solid color (for a sharp shadow) or with a linear or radial gradient (for a soft shadow).

If your object is complex, the best way to create a shadow that follows the entire shape of the object is to use the Blending tool.

There is one rule about the Blending tool, and that is to create two objects or paths with the exact same number of anchor points. This way, you ensure that every anchor point on one object (or path) has a corresponding anchor point on the other object (or path). The result will be a shadow with nice color transition.

Summary

Although there are just six rules to follow, there is the danger of too much detail. Try not to exaggerate the details, or else the illustration could look messy and overcrowded.

Light is your greatest ally. It will lead you through the whole creation process, connecting the different parts of the illustration and making them come alive.

Just keep the illustration simple and clean to minimize mistakes.

(al)(rb)

August 09 2010

21:00

100 Delightful and Pleasing Color Palettes and Swatches

Colors are one of the most valuable things in the life of everybody, wherever you go you like find yourself surrounded in combination of different colors and shades. Colors can have huge impact on someone’s mood and nerves; it can evoke you feelings and emotions. Same as colors, color palettes also play an important role in everyone’s life because if the color combination is not good enough to delight people then there is no use of using colors, so it is important that you take advantage of color palettes and chose best and suitable color combination for your projects. Today we have collected 100 Delightful and Pleasing Color Palettes making it easy for you to get an idea of the color combination you need.

1. 200fruits of passion

200fruits of passion

2. A Dream in Color

A Dream in Color

3. Adrift in Dreams

Adrift in Dreams

4. Arabic Taste of Life

Arabic Taste of Life

5. Cheer up emo kid

cheer up emo kid

6. Chocolate Creams

Chocolate Creams

7. Clairedelune

clairedelune

8. (◕〝◕)

(◕〝◕)

9. Color Swatches

Color_Swatches_Set_1_by_Rawox

10. Complementary Colour Swatches

Complementary_Colour_Swatches

11. Complementary Color SwatchesII

Complementary_Color_SwatchesII_by_DigitalPhenom

12. Conspicuous Creep

Conspicuous Creep

13. Curiosity Killed

Curiosity Killed

14. Deep Skyblues

Deep_Skyblues

15. Devastating loss

devastating loss

16. Dig My Olive Branch

Dig My Olive Branch

17. Dream magnet

dream magnet

18. Entrapped InAPalette

Entrapped InAPalette

19. Free Hugs

Free Hugs

20. Fresh cut day

fresh cut day

21. Funny Like the Moon

Funny Like the Moon

22. Gemtone sea & shore

gemtone sea & shore

23. Gentle Waves

Gentle Waves

24. Giant Goldfish

Giant Goldfish

25. Good Friends

Good Friends

26. Green and Blue swatch set

Green_and_Blue_swatch_set_by_Kip0130.png

27. 28X Dusty Petrol

28x dusty

28. Pistachio

pistachio

29. Salamander

slamander

30. Dolores

dolores

31. Oddend

oddend

32. Orange on gray

orange on gray

33. Orange on olive

orange on olive

34. Neutral Blue

neutral blue

35. Granny Smith Apple

granny smith

36. Cherry Cheesecake

cheery cheescake

37. Tech Office

tech office

38. Bordeaux

bordeaus

39. Garden Swimming Pool

garden swiming pool

40. Herbs and spices

herbs and spices

41. Watermelon

watermelon

42. 1944Mustang

1944mustang

43. Japanese Garden

Japanese garden

44. Hymn For My Soul

Hymn for my soul

45. I demand a pancake

i demand a pancake

46. Inside this moment

inside this moment

47. Japanese Bath

Japanese Bath

48. Japanese Art

Japanese Art

49. Let them eat cake

let them eat cake

50. Love Flowers

Love Flowers

51. Lucky bubble gum

lucky bubble gum

52. Maddening Caravan

Maddening Caravan

53. maybe i’m colorblind

maybe i'm colorblind

54. Ocean Five

Ocean Five

55. Pineapples

Pineapples

56. Pluck of

pluck off

57. PollockPollock

PollockPollock

58. Praise Certain Frogs

Praise Certain Frogs

59. PS Color Swatches 1

PS_Color_Swatches_1_by_gfxgurl

60. Rosewood

Rosewood

61. Serenity is . . .

Serenity is . . .

62. She Is French, Yes?

She Is French, Yes

63. Skin Palettes V.3

Skin_Palettes_V_3___Download_by_ctJemm

64. smoked ~ she choked

smoked ~ she choked

65. Some starry night

some starry night

66. Still be friends?

still be friends

67. Storming Psychedelia

Storming Psychedelia

68. Strawberry Mousse

Strawberry Mousse

69. t r a n c e

t r a n c e

70. Tech light

tech light

71. Terra?

terra

72. The Firebird

The Firebird

73. The First Raindrop

The First Raindrop

74. Thought Provoking

thought provoking

75. Thumbelina

Thumbelina

76. Very

Very

77. Vintage Modern

Vintage Modern

78. w o r d l e s s

w o r d l e s s .

79. You are beautiful

you are beautiful

80. You will be free

you will be free

81. Mellon ball surprise

mellon ball surprise

82. Newly Risen Moon

Newly Risen Moon

83. Summer Fun

summer fun

84. Life in the 50’s

life in the 50s

85. The Sweet Life

the sweet life

86. Red and smooth

red and smooth

87. Firenze

firenze

88. Aspirin C

aspirin c

89. Circus III

circus III

90. Haiti Relief

haiti

91. Sea Wolf

sea wolf

92. Quiet Cry

quite cry

93. Zen and Tea

zen and tea

94. Feel

feel

95. Stained glass light

Stained glass light

96. Japanese girl

japanese girl

97. Nebula

Nebula

98. Across the mirror

across the mirror

99. Lingonberry Jazz

Lingonberry Jazz

100. Jam

jam

Which is your favorite? Tell us in comments :)

June 20 2010

10:00

Get Inspired: 35+ Warm VS Cool Color Website Designs

A website resembles the identity of a company, a certain community, or even a person. Thousands of websites live out there on the internet these days, and their number increase every single second. Many of us realize how important a website can be, therefore the design for every website has to be unique, and more importantly has to have the right feel to it.

As a designer, we know how to play around with illustrations, typeface, and colors. I’m not going to get in too deep with illustrations or typeface, in this post but color. Some people classify websites from dark to bright website designs. Others classify them into minimalist and content heavy designs. But now let’s see website designs in the new perspective, in warm and cool colors.

Warm Color Website Designs

Hues from red through yellow, browns and tans are categorized as warm color. Other than keeping the same color of an identity on the website scheme, this warm color gives a few associations like energy, cheerful, fun, fresh, active, playful and happiness. This color scheme fits very well on sport related website, a website with kids or the youth as their audience, alcohol drinks website, or other website which wants to welcome their readers with warm feelings.

1. Some Web by Fedrick

2. Zuzanka Kindergarten by Neilan

3. Yabazz Website by Ee Venn Soh

4.Airport Taxi

5. Termobravo by Pawel Linard

6. Canvas Card Website by Ryan Barlin

7. A RemStroy by IndieStudio

8. Balparmak by Gdnz

9. Fanta by Diogo Parrinha

10. Canderel by Cenk Yilmaz

11. Telecine by Letícia Motta

12. Johnnie Wallker Red Label by Sasha Nilov

13. Imago by JK89

14. Fat Duo Brasil by Baia Studio

15. Bubbaloo Tuboo Connect by Carolina Janovik

16. Kizlar Cognac

17. Vigonne Producoes – Site (2008) by Diogo Montes

Cool Color Website Designs

The cool color are hues from blue green through blue violet, and most grays. The feel of which you will achieve by using this color are relaxing, calm, and focus. Though in certain cases like blue and green could also give you the fresh feel as it is associated with water, sky, and the green grass. In most cases, companies often use this color scheme and applied it on their website design, others applied it to create calm atmosphere for their visitor.

18. WordPress – IcePress Theme by Detrans

19. Sense-design ver 1 by Webdesigner1921

20. Eye for Art by ECP-Pro

21. Personal Portfolio 2.0 by Jonaska

22. Yakovae by Osec

23. EPSON: Exceed Your Vision by Warbiee

24. Ave by MehrD64

25. 2NdFriend

26. Skype

27. Pocari Sweat by Foxstep

28. Twitter Alerts

29. Sanimix by Marcel Pirosca

30. C&C by Igor Barazzetti

31. Carlsberg

32. Our Green Trail by Chad Portas

33. Citrus Marketing Website by Elshafto

34. Tree Nursery by OakmE

35. Intrace Portfolio by MrZielko

36. Beauty Sallon

37. Wonderland Photography by Zee7

Let us know which one get your attention and what feel does it give you when you’re looking at it. And if you have other warm or cool color website designs which you would like to share with us, tell us in the comment section.

April 01 2010

06:00

Empathizing Color Psychology in Web Design

The way different colors influence our mood, state of soul and body is really exciting. Most of us do not realize how it works and only a few probably pay attention. Though the influence of the colors may be some what overestimated, we can obviously feel it in some situations (imagine yourself in a dark red room or in the room in the sky colors). Today we’ll be speaking about color perception and color psychology in website design, the way different brands use colors and what’s their message.

The colors are divided into two basic groups – colors in the red area of the color spectrum known as warm colors (red, orange and yellow) and colors in the blue area known as cool colors (blue, purple and green). The warm colors evoke emotions ranging from feelings of warmth, comfort and coziness (the fire burning in the rainy cold evening) to anger and aggression. Cool colors are as a rule described as calm and tranquil but can also be associated with sadness (being in blues) or indifference.

In the ancient times people believed that colors can cure from different diseases. This science was called chemotherapy, and some of the basics were as following:

  • Red increases blood circulation and thus stimulates the body and mind
  • Yellow stimulates the nerves and purifies the body
  • Orange increases your energy
  • Blue treats pain
  • Indigo alleviates skin problems

Though the majority of psychologists take color therapy sceptically big brands don’t seem to agree with that. They create huge marketing campaigns based on the way we perceive the colors and make people buy. Below is the table with the colors and emotions/feelings they are widely associated with. Let’s try to analyze the websites of some world-known companies and see how they implement color techniques.

Color Emotions Black Symbol of menace or evil, popular as an indicator of power. Associated with death and mourning, unhappiness, sexuality, formality, and sophistication. White Purity or innocence. Cold, bland, and sterile. Red Evokes strong emotions, associated with love, warmth, and comfort. Still considered an intense and angry color that creates feelings of excitement, intensity, sexuality. Blue A favorite color for many people and the color most preferred by men. Gives the feelings of calmness or serenity. Described as peaceful, tranquil, secure, and orderly. Green Symbolizes nature and the natural world. Represents tranquility, good luck, health, and jealousy. Symbol of fertility, has a calming effect and relieves stress. Yellow Cheery and warm, but can also create feelings of frustration and anger. Most fatiguing to the eye (that’s why you’ll rarely see a bright yellow website or a room painted with yellow with the exception of playrooms for kids) yet most attention-getting color (so great color for important details or calls to action- remember the yellow stop/caution color). Purple Royalty and wealth, wisdom and spirituality, sex and relationships, exotic and special. Brown (all of us love wooden backgrounds). Natural color that evokes a sense of strength and reliability, warmth, comfort, and security. Orange (banner color of the counter-culture). Blatant and vulgar color, makes you feel excitement, enthusiasm, and warmth. As a combination of red and yellow it’s often used to draw attention. Pink Associated with love, romance, youth, freshness and may have a calming effect. Pink effect depends on the type of pink (strong, light, deep etc).

Now when we know what colors mean and what feelings they evoke, let’s try to make a simple analysis of the color schemes used by 20 world-known brands on their corporate websites. That’s really exciting and you start taking things differently.

1. Coca-Cola


Primary color is red on a white and light gray background for better visibility and contrast. The red is supposed to create the feeling of excitement and energy. “Open happiness” text in the main menu corresponds to the color perception.

Though the white is probably used to make an accent on red, as a cold color it’s supposed to give the feeling of coolness “For refreshing ideas” as they say in the moto. An excellent job!

2. McDonalds


Though the McDonalds restaurant colors we are used to are yellow and red (to cause children excitement, a bit of irritation and craziness), the website looks pretty formal in black and white. And no wonder, being visited by parents who would like to know what their kids eat and how fat is that, black and white is the perfect solution to make the website look strict, formal, informative, clean and somewhat sterile.

Now imagine it would be mainly in yellow and red (causing excitement and the most fatiguing to the eye)- that would make parents mad. Frustrated parents = Less money

3. M&M’s


The M&M’s colors that we usually see in the TV/bigboard ads are yellow and red (double excitement). The website itself is a mix of all possible colors, from light blue on the background to dark-blue, purple, green, yellow, orange, red in the banners and header area. The M&M’s guys are extremely smart, everyone can choose a candy to his liking :) There’s one problem though- the website looks very clumsy and kinda created from pieces that do not match.

4. Colgate


Red, white and blue- the colors of world-famous 3-colored toothpaste and the only colors used on the website (even mother and kid on the photo in the header area are dressed in red and white on the blue sky background!). Red for energy and happiness, white for shine and sterility, blue for cold freshness of stream water and confidence. Though I like the toothpaste, the website color scheme is not pleasant to my eyes. The abundance of bright red makes me feel uncomfortable and makes it almost not possible for me to focus on the texts and information.

5. Nestle


Nestle slogan says “Good Food, Good Life” and the white-gray-blue color-scheme makes you feel calm, secure and in some way sure that’s everything is gonna be okay. You will remember this feeling subliminally and buying something produced by Nestle next time you’ll be thinking “somehow I know this is a reliable company producing good products, I might have read this somewhere”. Another great example how marketing is closely connected with the color perception.

6. Nescafe


A product of Nestle company, Nescafe website is however designed in deep plum colors- a mix of red associated with the cozy warmth, energy and power and purple- making you feel so special, exclusive and unique. I love this color scheme, it’s not so annoying as red and not so exquisite as purple, it makes you feel special yet very comfy.

7. Cadbury


A website made of all shades of purple. I guess it is supposed to say that Cadbury products are very special, but it makes me feel playful for some reason. That’s an interesting approach, while the chocolate is usually associated with energy (like Snikers) or sex (dark black chocolate) the playful approach definitely makes the brand stand out from the crowd. Or am I the only one taking it like this?

8. Nokia


Blue, green, gray, white and a little bit of pink. Blue for serenity, green for tranquility and nature, gray to nicely mix blue and green, white for clarity, pink is probably to attract girls :) The website is designed in the colors to make you feel sure of the quality, yet they stay away from the standard blue-gray-white color scheme.

Green is knows to relieve stress and will have a calming effect on somewhat frustrated with daily heap of things to do business people who have come to check for the updates.

9. Kodak


Though the Kodak products are usually associated with yellow (yeah, they catch the attention) the website is designed in the classic gray-white-blue color scheme, so pleasant to the eye and allowing to focus on texts and information. You feel that you will get all the info that you need in a clear way, yet you do not feel too formal, just professional approach to things.

10. Gillette


Blue is the color most preferred by men and guys at Gillette perfectly know this. “The Best a man can get”- the favorite men color and a bit of red and orange on promotions to catch attention. They know what you like guys and they know how to sell their products to you.

11. Marlboro


Red, black and gray- power, sophistication, sexuality and strong emotions- features of a “real” man. However if you visit philipmorrisusa you will notice that the company corporate website is designed in blue color scheme- peaceful, tranquil, secure. That’s an excellent example how the colors work, if you still don’t believe it, let’s move forward.

12. Ikea


The header of the website is designed in bright colors- yellow, yellowish-green and sky-buy – which makes your feel somewhat excited (and willing to buy something?). The photos used in flash animation are bright as well which makes you even more excited. The website body is pretty simple- black and blue text on a white background to give you full access to the information.

The special offers page has a huge red banner on top and you can’t keep your eyes from it! That same moment your brain keeps reading “special offers” over and over again … and Ikea has you.

13. Budweiser


Same as the Marlboro the Budweiser website main promotional page is designed in red and black colors, meaning “Hey Dude- drink Budweiser and you’ll be a “Man”. The inside pages all have different backgrounds- white, red, black, gray. I don’t think that there’s some separate marketing campaign behind this but rather a non-standard design approach (though most of the pages still remain in red).

14. L’oreal


Not much to say about L’oreal website- being designed in all possible shades of purple it makes you feel really special. With L’oreal products you’ll be sexy, stylish, sure of yourself, and really-really special.

15. Kellogg’s


Since 1906 people have known Kellogg as a company they can rely on for great-tasting, high-quality foods. All the website speaks of fun and excitement (lots of yellow and red) and the smiling families on the photos in the header area make you feel even happier. Yeah, your kids gonna love Kellogg’s they are so fun and cool! Even the text on the website speaks about it “We’re excited to offer fun promotions related to our products.” It’s fun, fun, fun!

16. Gucci


Natural light brown colors make you think of the Gucci products as very natural (and in some meaning they are since they are made from leather). Similar to L’oreal, the website is designed in a single color where different shades are used to make accents. Though I’m against killing animals for fur and leather, I like Gucci website, it’s so exquisite and natural.

17. Heinz


The website home page has a huge photo used as the background, and you can see the sky, the field and tasty tomatoes- simple yet effective. The background of the website inside pages changes from page to page: brown which resembles of land, blue which resembles the sky and the gray like the sky before the rain. Heinz guys are using colors very effectively, since the core of their product is what they grow (or buy from third party) they use all the natural colors and photos to show that the product is the essence of what beautiful nature gives us.

18. Converse


While the converse products are available in all possible colors, the website is designed in grunge style and colors resembling the pavement and old jeans. The accent here is made not on the colors but the audience which should be attracted by the according design style, hand-drawn elements and the seeming carelessness.

19. Kleenex


Kleenex is another great example of the website designed in the natural blue/green colorscheme (to make you feel confident the product is natural and reliable) with the orange elements to grab attention. It’s pretty interesting that I have never paid attention earlier how many of big corporate websites are using this same colorscheme and still don’t resemble each other. Probably that’s because we do perceive the colors in some other way than just knowing and recognizing what color is that, I think that we see it as an integral part of some system.

20. Duracell


Duracell website is designed in 3 main colors and their shades: black, orange and green. Black- to make more contrast for the orange and to add some formality and solidity. Orange- power, energy, joy. Green is natural and works great with the orange. “Smart power” as they say in the product, and the whole website makes you feel as if Duracell products are just what you need, the batteries are powerful and you can rely on them in any situation. BTW, I do buy Duracell :)

What colors do you use in website design? What are your favorite colors? Waiting on your comments guys!

February 08 2010

12:52

Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Smashing-magazine-advertisement in Color Theory for Designer, Part 3: Creating Your Own Color Palettes
 in Color Theory for Designer, Part 3: Creating Your Own Color Palettes  in Color Theory for Designer, Part 3: Creating Your Own Color Palettes  in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

In the previous two parts of this series on color theory, we talked mostly about the meanings behind colors and color terminology. While this information is important, I’m sure a lot of people were wondering when we were going to get into the nitty-gritty of actually creating some color schemes.

Well, that’s where Part 3 comes in. Here we’ll be talking about methods for creating your own color schemes, from scratch. We’ll cover the traditional color scheme patterns (monochrome, analogous, complementary, etc.) as well as how to create custom schemes that aren’t based strictly on any one pattern. By the end of this article, you’ll have the tools and skills to start creating beautiful color palettes for your own design projects. The best way to improve your skills is to practice, so why not set yourself a goal of creating a new color scheme every day.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.]

A Quick Review

Let’s start with a quick review of what was covered in parts 1 and 2. In part 1, we talked about how all colors have inherent meanings, which can vary depending on the country or culture. These meanings have a direct impact on the way your visitors perceive your site, even if it’s just subconsciously. The colors you choose can either work for or against the brand identity you’re trying to create.

Indiacolors in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

In part 2, we covered color terminology: hue (what color something is, like blue or red); chroma (how pure a color is, the lack of white, black or gray added to it); saturation (the strength or weakness of a color); value (how light or dark a color is); tone (created by adding gray to a pure hue); shade (created by adding black to a pure hue); and tint (created by adding white to a hue). These are important terms to know as we move forward and create our own color schemes.

Traditional Color Scheme Types

There are a number of predefined color scheme standards that make creating new schemes easier, especially for beginners. Below are the traditional schemes, with a few examples for each.

Colorwheel in Color Theory for Designer, Part 3: Creating Your Own Color Palettes
The basic, twelve-spoke color wheel is an important tool in creating color schemes.

Monochromatic

Monochromatic color schemes are made up of different tones, shades and tints within a specific hue. These are the simplest color schemes to create, as they’re all taken from the same hue, making it harder to create a jarring or ugly scheme (though both are still possible).

Examples:

Here are three examples of monochrome color schemes. For the most part with these schemes, the first color (if we look at this from left to right) would likely be used for headlines. The second color would be used for body text or possibly the background. The third color would likely be used for the background (or body text if color #2 was used as the background). And the last two colors would be used as accents or within graphics.

Monochrome-blue in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Monochrome-berry in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Monochrome-gold in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Analogous

Analogous color schemes are the next easiest to create. Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Generally, analogous color schemes all have the same chroma level, but by using tones, shades and tints we can add interest to these schemes and adapt them to our needs for designing websites.

Examples:

Analogous-traditional in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

This is a traditional analogous color scheme, and while it’s visually appealing, there isn’t enough contrast between the colors for an effective website design.

Analogous-modified in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Here’s a color scheme with the same hues as the one above, but with the chroma adjusted to give more variety. It’s now much more suitable for use in a website.

Analogous-tradpink in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Another example of a traditional analogous scheme.

Analogous-modpink in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

And the above theme modified for use in a website design.

Complementary

Complementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades. A word of warning, though: using colors that are exact opposites with the same chroma and/or value right next to each other can be very jarring visually (they’ll appear to actually vibrate along their border in the most severe uses). This is best avoided (either by leaving white space between them or by adding another, transitional color between them).

Examples:

Comp-purplegreen in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

A wide range of tints, shades, and tones makes this a very versatile color scheme.

Comp-redgreen in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Another complementary color scheme with a wide range of chromas.

Comp-orangeblue in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Don’t forget that beige and brown are really tints and shades of orange.

Split Complementary

Split complementary schemes are almost as easy as the complementary scheme. In this scheme, instead of using colors that are opposites, you use colors on either side of the hue opposite your base hue.

Examples:

Split-yellowgreen in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

A scheme where yellow-green is the base hue. It’s important to have enough difference in chroma and value between the colors you select for this type of scheme.

Split-red in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Another palette with a wide range of chromas.

Triadic

Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes.

Examples:

Triad-berry in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Using a very pale or dark version of one color in the triad, along with two shades/tones/tints of the other two colors makes the single color almost work as a neutral within the scheme.

Triad-red in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Alternately, using one very bright hue with paired muted hues makes the single bright hue stand out more.

Double-Complementary (Tetradic)

Tetradic color schemes are probably the most difficult schemes to pull off effectively.

Examples:

Tetradic-red in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

A rather unimpressive tetradic color scheme. The best way to use a scheme like this is to use one color as the primary color in a design and the others just as accents.

Tetradic-pastel in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Tetradic color schemes can work well for creating color schemes with similar chromas and values. Just add a neutral (such as dark gray or black) for text and accents.

Tetradic-dark in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

It works just as well for darker color schemes.

Custom

Custom color schemes are the hardest to create. Instead of following the predefined color schemes discussed above, a custom scheme isn’t based on any formal rules. Keep in mind things like chroma, value, and saturation when creating these kinds of color schemes.

Examples:

Industrygiant in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

The colors here all have similar chroma and saturation levels.

Palisadespark in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Again, using colors with similar chroma and saturation is effective and creates a sense of cohesion across a color scheme.

50schristmas in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Using one color with a high chroma among other colors with lower chromas is another effective method (the higher chroma color can act as an accent).

Creating a Color Scheme

Creating your own color schemes can be a bit intimidating. But it’s not as complicated as many people think. And there are quite a few tricks you can employ to create great color palettes right from the start.

Danceofcolors in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

We’ve been over the different types of color schemes above. Now, let’s try creating a few of our own. There are plenty of tools online that will help you create a color scheme, but let’s forget about those for now and just use Photoshop.

Lets try breaking away from the color scheme types already mentioned, and create some custom schemes. While it’s important to know the ways that different colors interact and how traditional schemes are created, for most design projects you’ll likely create custom schemes that don’t strictly adhere to any predefined patterns.

So, for the purposes of our project here, we’ll create three color schemes each for two different websites. Our hypothetical clients are a modern architecture design blog and a high-end women’s clothing retailer who specializes in Victorian-influenced apparel.

We’ll start with a basic monochromatic scheme, just to get a feel for each. While I mentioned that traditional color scheme patterns aren’t used as often in design, monochomatic color schemes are the exception to that rule. You’ll likely find yourself using monochromatic schemes on a fairly regular basis.

Apparel-mono in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

For our apparel store, here’s a traditional monochromatic scheme, with white added in as a neutral.

Design-mono in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

For our design blog, we’ve gone with a color scheme made up of shades and tints of gray.

Apparel-one in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

This is almost an analogous color scheme, but we’ve left out one color. It’s made up of shades of purple and reddish-purple. These two colors fall next to each other on the color wheel, and work well together, especially when they’re used in different values and saturation levels.

Design-one in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Adding a couple shades of red to the gray color scheme adds a lot of visual interest and the potential for creating extra emphasis on certain parts within your designs.

Apparel-two in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Here, we’ve gotten rid of the purple hues and switched over to a burgundy. Again this is next to the reddish-purple on the color wheel. We’ve also added in a very pale yellow tone, which sits opposite purple on the color wheel. This serves as our neutral, and looks more like an off-white color when compared to our other hues.

Design-two in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

While this color scheme at first glance looks like another standard gray and red palette, if you look more closely you’ll see that the grays are actually tones of blue. Blue and red make up two thirds of a tetradic color scheme, but work just fine together without yellow, especially when the red is kept pure but the blue is toned down to the point of almost being gray.

Why Shades, Tones, and Tints Are Important

As you can see from the color schemes above, using tints, tones, and shades in your color schemes is vital. Pure hues all have similar values and saturation levels. This leads to a color scheme that is both overwhelming and boring at the same time.

Colorblotchedpaper in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

When you mix in tones, shades, and tints, you expand the basic 12-spoke color wheel into an infinite number of colors for use in your designs. One of the simplest ways to create a professional looking color scheme is to take a few tones, tints, and shades of a given color (avoiding the pure hue), and then add in another pure hue (or close to pure) that’s at least three spaces away on the color wheel (part of a tetradic, triatic, or split-complementary color scheme) as an accent color. This adds visual interest to your color scheme while still retaining a sense of balance.

Adding in Some Neutrals

Neutrals are another important part of creating a color scheme. Gray, black, white, brown, tan, and off-white are generally considered neutral colors. Browns, tans, and off-whites tend to make color schemes feel warmer (as they’re really all just tones, shades, and tints of orange and yellow). Gray will take on a warm or cool impression depending on surrounding colors. Black and white can also look either warm or cool depending on the surrounding colors.

Neutralcolors in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Black and white are the easiest neutrals to add into just about any color scheme. To add a bit more visual interest, though, considering using a very light or very dark shade of gray in place of white or black.

Adding browns, tans, and off-white hues are a bit trickier, but with some practice you’ll find adding them gets easier. For browns, consider using a very dark, chocolate brown in place of black. A pale off-white can be used in place of white or light gray in many cases. And tan can be used in place of gray, as well (create a tone by adding some gray to make it even easier).

Using Photos for Color Schemes

One of my personal favorite ways to create a color scheme is to use a photograph. There are automated tools online that can do this automatically for you (Adobe Kuler is one of them, and my personal favorite), or you can do it in Photoshop yourself.

Using Adobe Kuler, you can either browse or search for photos on Flickr, or you can upload your own image. If you’re stumped for what colors you want to use in a website design, try searching for related words on Flickr. Sometimes this can result in finding color schemes that you might not have thought of on your own.

Let’s try this method out, both ways (using Kuler and Photoshop). Find a photo you like on Flickr, one that you think evokes the feeling of the design you want to create. I chose this one:

Poppy in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Here’s the original color scheme that Kuler gives us when using this image:

Poppy-kuler-original in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

One of the coolest features Kuler has for creating color schemes from images is their “Select a Mood” option. Included here are Colorful, Bright, Muted, Deep, and Dark. These are the schemes we get when using each of those moods with the same photo:

Poppy-kuler-colorful in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Colorful

Poppy-kuler-bright in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Bright

Poppy-kuler-muted in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Muted

Poppy-kuler-deep in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Deep

Poppy-kuler-dark in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Dark

Now, let’s create a color scheme in Photoshop using the same image. This is a bit less scientific than the way Kuler does it. I usually just pick a color with the eyedropper tool, and then keep clicking on different spots in the image until I find other colors that go with it. Here are the results (this took less than five minutes to do in Photoshop, so it’s not as time-intensive as it sounds):

Poppy-photoshop in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Creating color schemes from images in Photoshop is easiest with images that are relatively monochromatic to begin with. With more colorful images, it gets trickier.

Let’s try another one, something more colorful this time. Here’s the original image we’ll work with:

Sari in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

And here are the five color schemes that Kuler gives us from this image:

Sari-kuler-colorful in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Colorful

Sari-kuler-bright in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Bright

Sari-kuler-muted in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Muted

Sari-kuler-deep in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Deep

Sari-kuler-dark in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Dark

And here’s what I came up with in Photoshop using the same image:

Sari-photoshop in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

As you can see, the Photoshop version I came up with is completely different than what Kuler came up with, but all of the schemes above are visually appealing. The Photoshop version here took a bit longer than the one above, partly because of the diversity of colors present in the image.

The Easiest Color Schemes

We’ve touched on this a bit before, but adding a bright accent color into an otherwise-neutral palette is one of the easiest color schemes to create. It’s also one of the most striking, visually. If you’re unsure of your skills in regard to creating custom schemes, try starting out with these types of palettes.

Here are a few examples to give you an idea of what I’m talking about:

Easiest-red in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Easiest-chartreuse in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Easiest-pink in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Easiest-lightblue in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Easiest-blue in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

You can see here how using browns instead of grays makes the entire scheme look warmer, even with the blue accent color.

You can use tones of any color instead of gray or brown in this type of scheme, just keep it very close to the gray end of the spectrum for the most fool-proof results. As a general rule, cool grays and pure grays are best for more modern designs. For traditional designs, warmer grays and browns often work better.

How Many Colors?

You’ll notice that throughout this post we’ve used color schemes with five separate colors. Five is a good number that gives plenty of options for illustrating the concepts here, and it’s a workable number in a design. But feel free to have more or fewer colors in your own schemes.

Coloredpencils in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

A lot of websites might only use three colors in their designs. Others use only two. And some might use eight or ten (which is a lot trickier than using fewer colors). Experiment and use as many or as few colors as you need to for your design. But you may want to start with a palette of five colors, and then add or subtract as you see fit and as you progress through the design process.

The easiest way to add a color is to start with one of the predefined, traditional color schemes and then work out from there. That at least gives you a bit of direction as far as which other colors to consider.

10 Sites With Great Color Schemes

To give you more inspiration, here are ten websites that have excellent color schemes. Some of the schemes below might look a bit odd at first glance but seeing how they’re actually used shows the wide range of possibilities color schemes can present.

Wentings Cycle & Mountain Shop

Wentings in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Wentings-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Trivuong.com

Trivuong in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Trivuong-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Oscar Barber

Oscarbarber in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Oscarbarber-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

North East Peace III Partnership

Northeastpeace in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Northeastpeace-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

mbA Architects

Mbaarchitects in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Mbaarchitects-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Studio 13

Studio13 in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Studio13-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Joy Project

Joyproject in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Joyproject-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Morphix Blog

Morphixblog in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Morphixblog-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

El Designo

Eldesigno in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Eldesigno-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

LemonStand

Lemonstand in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Lemonstand-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Conclusion

We’ve really only just touched on color theory in this series. There are specialists out there who have literally spent years refining their ability to choose colors that are appropriate to any situation.

The best way to learn to create beautiful color schemes is to practice. Create a scheme on a daily basis. You can use automated tools to do this at first (like Kuler’s tool for creating schemes from images), or just open up Photoshop and start. If you see a particularly beautiful or striking color in your daily life, try creating a scheme around it. And take advantage of all the sites out there that let you upload your color schemes and organize them for later reference. This makes all those color schemes more practical and easier to use in the future.

Further Resources

Here are some additional resources that should help you in creating your own color schemes, as well as some links with more information about traditional color schemes.

  • 10 Super Useful Tools for Choosing the Right Color Palette
    A round-up from Web Design Ledger that covers ten great tools for finding and creating color palettes.
  • 100 Random Colors 2.0
    This page will load 100 random colors, with hex codes. It’s a great place to check if you’re looking for color inspiration.
  • Classic Color Schemes
    This article from Color Wheel Pro covers all the traditional color schemes in detail, with examples.
  • ColorMunki
    Another color scheming tool. Their library colors tab is particularly useful for finding and creating monochromatic color schemes.
  • ColorSchemer
    A color scheme gallery and tool with a free online version.
  • ColourLovers
    A community for color and design that includes a huge gallery of color palettes, search functionality as well as tools to create your own color palettes.

© Cameron Chapman for Smashing Magazine, 2010. | Permalink | 48 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: colors

Tags: Design colors

February 02 2010

13:57

Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Smashing-magazine-advertisement in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
 in Color Theory For Designers, Part 2: Understanding Concepts And Terminology  in Color Theory For Designers, Part 2: Understanding Concepts And Terminology  in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

If you’re going to use color effectively in your designs, you’ll need to know some color concepts and color theory terminology. A thorough working knowledge of concepts like chroma, value and saturation is key to creating your own awesome color schemes. In Part 1: The Meaning of Color of our color theory series, we covered the meanings of different colors. Here, we’ll go over the basics of what affects a given color, such as adding gray, white or black to the pure hue, and its effect on a design, with examples of course.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Hue

Hue is the most basic of color terms and basically denotes an object’s color. When we say “blue,” “green” or “red,” we’re talking about hue. The hues you use in your designs convey important messages to your website’s visitors. Read part 1 of this article for the meanings conveyed by various hues.

Examples

Happytwitmas in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The primary hue of the background and some of the typography on the Happy Twitmas website is bright red.

Chapolito in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Using a lot of pure hues together can add a fun and playful look to a design, as done in the header and elsewhere on this website.

Estilorama in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Pure red is a very popular hue in Web design.

Mix in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Mix uses a number of pure hues in its header and logo.

Steveottenad in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Green in its purer forms is seen less often and so stands out more than some other colors.

Chroma

Chroma refers to the purity of a color. A hue with high chroma has no black, white or gray in it. Adding white, black or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.

In design, avoid using hues that have a very similar chroma. Opt instead for hues with chromas that are the same or a few steps away from each other.

Examples

Moviestills in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Cyan has a high chroma and so really stands out against black and white.

Canalconnection in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Another website with a high chroma blue, though it includes some tints and shades with somewhat lower chromas.

Philippdoms in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Combining high and low saturation in the same hue can make for a sophisticated and elegant design.

Fruehjahr in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Colors with very high chroma are best used in moderation, as done here.

Panelfly in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Differences in chroma can make for a visually pleasing gradient.

Saturation

Saturation refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.

In design, colors with similar saturation levels make for more cohesive-looking designs. As with chroma, colors with similar but not identical saturations can have a jarring effect on visitors.

Examples

Sifrvault in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The saturation levels of many of the different hues used here are similar, adding a sense of unity to the overall design.

Rainbeaumars in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Combining colors with similar muted saturation levels creates a soft design, which is emphasized by the watercolor effects.

Disfrutasanjuan in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Hues with lower saturation levels aren’t necessarily lighter, as shown here.

Craftsale in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
An excellent example of how using a hue with a high saturation against a background with low saturation can make the former really stand out.

Sunrisesoya in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Aother example of how low saturation colors make nearby high saturation colors really stand out.

Value

Value could also be called “lightness.” It refers to how light or dark a color is. Ligher colors have higher values. For example, orange has a higher value than navy blue or dark purple. Black has the lowest value of any hue, and white the highest.

When applying color values to your designs, favor colors with different values, especially ones with high chroma. High contrast values generally result in more aesthetically pleasing designs.

Examples

Creativespark in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The high value of the yellow used here really stands out against the lower-value black and gray.

Oysterdesign in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
This website combines blue hues with two different values. Because the different values have enough contrast, the overall look is visually appealing.

Copimaj in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Combining colors with similar values makes for an energetic and lively background (which is enhanced by the design itself).

Whoseview in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The red here has a lower value than the light blue, which itself has a lower value than the white.

Colourpixel in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The human eye can pick up differences in value even among such similar hues.

Tones

Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues.

Tones are sometimes easier to use in designs. Tones with more gray can lend a certain vintage feel to websites. Depending on the hues, they can also add a sophisticated or elegant look.

Examples

Lakesideheritage in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Tones can give websites a sophisticated look while adding some vintage and antique flair.

Brightkite in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
This website combines blues in a variety of tones, shades and tints.

Mmuller in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Tones can be intensified by adding gray around them, as done here.

Redvelvetart in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The tones used in the navigation and background design here give this website a vintage, hand-made feel.

Mergeweb in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
A great example of how a pure hue can really stand out against a background of tones.

Metalab in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Some colors that we might consider gray are actually tones of other colors. In this case, the background is a blue tone but with a lot of gray added.

Shades

A shade is created when black is added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but shade only applies to hues made darker by the addition of black.

In design, very dark shades are sometimes used instead of black and can serve as neutrals. Combining shades with tints is best to avoid too dark and heavy a look.

Examples

Jonathanmoore in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Jonathan Moore’s website has a variety of different shades of purple in the background (and a couple of tints in other parts).

Vuumedia in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Using different shades together works well, as long as sufficient contrast between them is maintained.

Alilot in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
An effective combination of shades and tints, particularly in the header.

Skipvine in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Another background design that has shades (and a few tints) in a textured gradient.

Stuffandnonsense in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Combining shades within textures adds interest to this website.

Tints

A tint is formed when white is added to a hue, lightening it. Very light tints are sometimes called pastels, but any pure hue with white added to it is a tint.

Tints are often used to create feminine or lighter designs. Pastel tints are especially used to make designs more feminine. They also work well in vintage designs and are popular on websites targeted at parents of babies and toddlers.

Examples

Caiocardoso in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Caio Cardoso’s website has a variety of green tints in the background and in other elements.

Fernandosilanes1 in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The blue tint on Fernando Silanes’s website creates a soft and sophisticated look.

Duboutdesyeux in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Blue tints are popular for sky and nature motifs.

Smallwhitebear in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Tints are also popular in watercolor-based designs.

Iamgarth in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Tints combined together make for a sophisticated gradient.

Conclusion

While you don’t necessarily have to remember all of these technical terms, you should be familiar with the actual concepts, especially if you want to master part 3 of this series (in which we create our own color schemes). To that end, here’s a cheat sheet to jog your memory:

  • Hue is color (blue, green, red, etc.).
  • Chroma is the purity of a color (a high chroma has no added black, white or gray).
  • Saturation refers to how strong or weak a color is (high saturation being strong).
  • Value refers to how light or dark a color is (light having a high value).
  • Tones are created by adding gray to a color, making it duller than the original.
  • Shades are created by adding black to a color, making it darker than the original.
  • Tints are created by adding white to a color, making it lighter than the original.

Further Resources

(al)


© Cameron Chapman for Smashing Magazine, 2010. | Permalink | 25 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: colors

Tags: Design colors

January 06 2010

15:00

January 05 2010

07:06

January 04 2010

18:48
15:09
13:07

December 30 2009

17:54

December 29 2009

17:15

December 28 2009

17:15
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl