Good color combinations are undoubtedly the essential means to touch the emotions of your website visitors. It is a non-verbal communication and creates a physical and emotional reaction of the viewers. Colors are able to set the right tone and carry a necessary message for visitors. Colors can calm or excite, arouse plenty of feelings and stimulate to actions. Color is extremely powerful.

When choosing a color scheme for a website, it is important to do it right, guided by the main principles of the color theory and of course, follow professional advices. In this article I intended to cover the most important aspects of color, the main principles of combining colors, its meaning in web design as well as symbolic meaning. Also, you will see some good examples of well designed websites divided according to the prevailing color as well as get familiar with some useful tips from professional designers as to using colors effectively when creating a website.

So, let’s start discovering the magic of color…


Table of Contents:

  1. Color Theory: The Main Principles. Learning To Create a Good Color Combinations
  2. Guide to Choosing Color Combinations When Building Sites For Clients
  3. Is There A Science To Picking Colors That Work Well in Web Design?
  4. Color Calibration for Your Devices
  5. How to Create a Perfect White Web Design? Tips and Inspiration
  6. Injecting Personality in Your Web Designs

Color Theory: The Main Principles. Learning To Create a Good Color Combinations

The people, who are not closely familiar with the web design main principles, choose colors for their websites according to their own taste and end up with the colors that just look good in combination with each other. It is great if you have a good eye and you feel intuitively what color scheme to choose for a website. But of course, all men can’t be good at it. So, for all those who are not sure what colors to combine for the website, I would recommend to learn the basics of color theory – it is very clear and easy to understand.


One of the most useful issues to start with is the Color Wheel.

A little bit of history: The color wheel was invented by Isaak Newton in 1666. He took the bar of colors created by the passage of light through a prism and transformed it into a segmented circle, where the size of each segment differed according to his calculations of its wavelength and of its corresponding width in the spectrum.

The color wheel is an indispensable attribute of many designers and artists all over the world. This great tool is a perfect proof of the theory that the ingenious is always simple. The color wheel allows you to pick the colors that are harmonious together. The wheel consists of 6 basic colors: red, orange, yellow, green, blue and purple. In addition to the basic colors, we have extra colors (mixes of the basic).

So, to find a right harmonious color scheme, you need to use any two colors opposite each other on the color wheel, any three colors equally spaced around the color wheel forming a triangle or any of four colors that form a rectangle (two pairs of colors opposite each other). Color schemes remain harmonious regardless of the rotation angle.

Primary Colors

There are three primary colors: Red (#ff0000 in HTML or #f00 in CSS), Yellow (#ffff00 in HTML or #ff0 in CSS) and Blue (#0000ff in HTML or #00f in CSS). We cannot get them by mixing any other color. The other extra colors can be formed by combining of these three colors. If you mix two of the primary colors, you will have a secondary color.

Secondary colors

There are also three of them: Orange (#ff9900 in HTML or #f90 in CSS), Green (#00ff00 in HTML or #0f0 in CSS) and Purple (#ff00ff in HTML or #f0f in CSS). You can get them by mixing red and yellow (orange), yellow and blue (green) and blue and red (purple).

Tertiary colors

To get one of tertiary colors you need to mix one primary color and one secondary color together. The opportunities for tertiary colors are endless.

Complementary colors

Complementary colors are the ones that are located directly across each other on the color wheel: red and green, blue and orange, purple and yellow. In combination with each other they compose a striking contrast. Such color combinations are usually used for standing out some elements on the website. For example, if you have an orange background and some blue elements on it, the blue items will be almost blinding.

Analogous colors

These colors are located next to each other on the color wheel. They usually look extremely good together, but absolutely quiet. Use such color combinations when you need your visitors to feel comfortable while looking at your website pages.

There are plenty of color groups that refer to various aspects of color, i.e. warm colors, cool colors, neutral colors to name a few.

Colors in different cultures: symbolism

When choosing a color scheme for your website, you should obligatory take into account the fact that this or that color may have different meanings in different cultures. The cultural aspect for color symbolism can be very strong, so you need to be aware of how your audience views the colors. If you understand what you are saying with your website color scheme, you will avoid a huge mistake.

Let’s find out what some colors mean in different cultures:


Red

• China: the color of brides, Good luck, celebration, summoning
• Cherokees: triumph, success
• India: purity
• South Africa: mourning color
• Eastern: worn by brides, joy (in combination with white)
• Western: excitement, love, passion, stop
• USA : christmas (with green), Valentine’s day (with white)
• Hebrew : sacrifice, sin
• Japan : life
• Christian : sacrifice, passion, love
• Feng Shui : Yang, Fire, good luck, respect, protection, vitality, money, recognition


Blue

• European : soothing, “something blue” bridal tradition
• Cherokees : defeat, trouble
• Iran : mourning, color of heaven and spirituality
• China : immortality
• Colombia : soap
• Hinduism : the color of Krishna
• Judaism : holiness
• Christianity : Christ’s color
• Catholicism : color of Mary’s robe
• Middle East : protection
• Worldwide : ‘safe’ color
• Feng Shui : Yin, water, calm, love, healing, relaxation, peace, trust, adventure, exploration
• Western: Sadness, depression, conservative, bridal tradition, corporate, “something blue”


Yellow
• European : happiness, hope, joy, cowardice, hazards, weakness
• Asia : imperial, sacred
• China : royalty, nourishing
• Egypt : mourning
• Japan : courage
• India : merchants
• Buddhism : wisdom
• Feng Shui : Yang, Earth, auspicious, sunbeams, warmth, motion

Orange
• European : autumn, harvest, creativity
• Netherlands : favorite color (House of Orange)
• Ireland : protestants (religious)
• USA : halloween (with black), cheap goods
• Hinduism : saffron (peachy orange) is a sacred color
• Feng Shui : Yang, Earth, purpose, strengthens concentration

Brown
• Colombia : discourages sales
• Australian Aboriginals : color of the land, ceremonial ochre
• Feng Shui : Yang, Earth, industry, grounded

Green
• China : exorcism, green hats indicate a man’s wife is cheating on him
• Japan : life
• Islam : hope – the cloak of the prophet was thought to be green, virtue – only those of perfect faith can wear green
• Ireland: symbol of the entire country, Catholics
• European/USA : spring, new birth, go, safe, environmental awareness, Saint Patrick’s Day, Christmas (with red)
• USA : money
• Western: spring, new birth, go, Saint Patrick’s Day, Christmas (with red)
• India: Islam
• Feng Shui : Yin, Wood, growing energy, refreshing, nurturing, balancing, harmony normalize, healing, health, peaceful, calming

Purple
• Thailand : mourning (widows)
• European : royalty
• Catholicism : death, mourning, crucifixion
• Feng Shui : Yin, physical and mental healing, spiritual awareness

White
• European : marriage, angels, doctors, hospitals, peace
• Japan : mourning, white carnation symbolizes death
• China: mourning, death,
• India : unhappiness
• Eastern : funerals
• Feng Shui : Yang, metal, death, ghosts, mourning, ancestal spirits, poise, confidence

Black
• European : mourning, funerals, death, rebellion, cool, restfulness
• China : color for young boys
• Thailand : bad luck, evil, unhappiness,
• Judaism : unhappiness, bad luck, evil
• Australian Aboriginals : color of the people, ceremonial ochre
• Feng Shui : Yin, water, money, career success, income, stability, emotional protection, power, bruises, evil

The meaning of colors. A varicolored showcase

A visitor’s immediate opinion as to you and your offers is formed right after he sees your website for the first time. And this immediate opinion is formed not because your offer is brilliant or your products are great… When your web page appears to the visitor, the colors you have used go to work on the subconscious of your visitors. It happens because we all react on colors intuitively and psychologically. If the color scheme is chosen right for grabbing your audience’s attention, a huge part of work has already been done.

Let’s see what feelings each color can evoke as well as look at some ready-made website solutions selected as examples for each color.

Red

is mostly associated with boldness, excitement and desire. Red is the color of love, strength, power, energy, leadership and excitement. It is a strong color, and you should be aware of some its negative associations, i.e. danger, alarms, traffic lights, etc.

Blue

means patience, peace, tranquility, trustworthiness, love, stability. It is one of the most beloved colors, especially by men. It is associated with stability and depth, professionalism, trust and honor.

A Stunning Blue Color Scheme for a Blog

Yellow

is the color that mostly associated with liveliness. It is energetic and gives the feeling of happiness. Also, it associates with curiosity, amusement, joy, intelligence, brightness, caution, etc.

A Yellow Website Brighter than Sunshine

Orange

means cheerfulness and creativity. It can be associated with friendliness, confidence, playfulness, courage, steadfastness, etc.

An Attractive and Friendly Orange Solution

Purple

traditionally associates with power, nobility and wealth. Wisdom, royalty, independence, nobility, luxury, ambition, dignity, magic and mystery.

A Mysterious Design in Purple

Green

is the color of harmony, nature, healing, life, food and health. Also, it is often associated with money.

A Stylish and Well Balanced Green Design

Brown

is the color of relaxation and confidence. Brown means earthiness, nature, durability, tribal, comfort, reliability, etc. It can be thought of sophisticated, solid and conventional.

An Excellent Brown Colored Portfolio

Grey

gives the sense of seriousness, conservatism and traditionalism. It can provoke the feeling purity and innocence. It can be associated with security, reliability, intelligence, modesty, dignity, maturity, solid, practical, old age, sadness, quality, boring, practicality, professional, durability, quiet, gloominess. In combination with orange, grey looks fantastic and awakens the sense of perfection.

A Creative Portfolio in Grey

Pink

expresses tenderness, romance, femininity, truth, passivity, good will, emotional healing, care, peace, calming, affection, emotional maturity, nurturing, sweet tasting, sweet smelling, ethereal, delicacy, etc.

A Wonderful Pink Web Solution

Black

is a stylish and elegant color associated with power, sophistication, formality, health, etc. Black is an excellent technical color and helps to add some mystery to your design. But if you don’t want your website provoke depressing feelings, avoid using black over a large area. On the other hand, if you make a black background, it can enhance perspective and depth. Black is great to use for art and photography websites to help other colors to vibrate.

A Black Colored Business 3D Solution

White

White is associated with purity, simplicity, fresh, goodness, innocence easy, cleanliness, etc. This color is great to use for a background or accent color, because it highlights other colors.

A Clean White Web Design

Conclusion: some useful tips

As a conclusion, there are some useful pieces of advice that will help you in choosing a good color scheme for your website. These little tips are widely used by professional web designers.

1. If you wish your text content to be easily readable, choose contrasting colors. It is important to make contrast between the text and background.
2. Use less colors. Don’t make your website to look like a circus. For the best impact you can use one color on headlines and another color (the complementary one) for the text.
3. Use enough colors. Use less, but enough. If you use too little colors, you risk to make your website boring. Or use little colors but just use other means to underline the elements in that case.
4. If you need to attract the visitor’s eye, use intense colors. But be careful, as If the color scheme is too intense, it attracts the eye in too many directions, and the techniques will lose its effectiveness.
5. Derive inspiration from nature: you can find really great complementary color schemes.

Useful related links:

That’s all for now. We hope you will find this article useful and look forward to your comments.

Now let’s get more in depth of choosing the right color combination.


Guide to Choosing Color Combinations When Building Sites For Clients

Every graphic designer knows that choosing the color combinations is among the most important parts of the design making process, on print or on the web. There is no universal color combination that will please all types of clients. For some designers, it is a matter of trial and error. But trial and error means you wasting plenty of precious time. Time is an important commodity in the graphic designer’s fast paced world. Through proper research, sense of style and good common sense, you can eliminate the long time of experimentation.


Understanding the Color Wheel

Before anything, it’s important to know the basics of the Color Wheel first. Every designer should by now have familiarized the color wheel by heart.

White light is a combination of all the colors of the spectrum, divided into three basic groups: red, blue and yellow. From these three colors, you can combine every color imaginable to the human eye. To be able to create aesthetically pleasing color combinations, you have to know how the color wheel first. I’ll try explaining it to you without being too technical.

Monochromatic

For the monochromatic color scheme, it makes use of one color of different shades. For example, you use the following color combination for a web site:

The main color here is green, plus a lighter (50% white) green and a darker (50% black) green. Using monochromatic color combinations add a professional and sophisticated. It’s no fuss and straight to the point–thus it can get boring and monotonous (they have the same prefix, so…).

Complementary

The most interesting color combinations are those that show contrast and interest. This is by combining colors that are located opposite each other in the color wheel. They are bold, visually interesting and appealing. Just be sure to combine colors that look great together for your client’s company. Some combinations may look too gaudy–stay away from that.

Analogous

The analogous color scheme combines colors next to each other on the color wheel. They’re like the monochromatic scheme, great for professional and business uses. They are more interesting since they add contrast and interest into the canvas. Analogous color schemes are easy to work with and they always look great.

Here are some great examples of analogous color combinations:

Triadic

Triadic color schemes take three colors that are equally apart on the color wheel. They create a triangular shape when you connect the colors together. This type of color combination is aesthetically pleasing and well balanced.

Pleasing Clients with the Right Color Combinations

As mentioned earlier, you cannot please all clients with a universal color palette. You should know your client’s company first and foremost–what the company and their products are about, so that you can have a head start on picking the colors. Don’t forget to also check out successful logo redesigns.

Restaurants, Fast Food and Food Products

For companies that are centered on food and dining, use red and yellow a lot. These colors are attractive and easy to spot. Warm hues and solid colors are recommended. This is because the color red and yellow induces hunger by speeding up metabolism. This will increase the diner’s appetite, making them order more food than they should have. Avoid the blue and purple color for restaurants at all costs–these colors decreases one’s appetites. Subconsciously, our body reacts negatively to blue and purple toxins. Green and brown is a good color for relaxing and casual eating (think cafes and bistros). Try using colors in the triadic or complementary color scheme.

Here are some interesting color palettes for restaurants, fast food and food products:

Makeup and Hygiene Products

Choose colors that convey femininity, grace and cleanliness. Light, pastel colors like white, lavenders, light blues and light pinks are a great choice. Avoid warm and harsh colors. You can also opt for monochromatic and neutral colors, for they signify cleanliness and simplicity. Here are some interesting color palettes for makeup and hygiene products:


Government Agencies, Public Offices, NGOs and Organizations

When creating something for government and public agencies or organizations, keep in mind that it should appear respectable, trustworthy and dignified. Choose colors that are positive and cool, such as greens and blues. These cool colors provide a positive, public image that’s solid and built on trust. Government and NGOs love using reds, whites and blues for their logos after the US American flag. These colors are also a sign of nationalism and integrity.Choose the monochromatic or analogous color scheme. Minimize on using contrasting colors.

Here are some interesting color palettes for public offices, government agencies and other organizations:

Logos or graphic design for educational establishments, insurance companies and hospitals also apply as well.

Hotels, Spas and other Hospitality Establishments

When designing for hotels, spas and resorts, capitalize on comfort, hospitality and relaxation. Choose ‘earthy’ and natural colors. Browns, blues and greens are the most relaxing and calming colors. Avoid bold colors. Make use of the monochromatic color scheme. Use colors only to a minimum, unless if it’s a Vegas establishment.

Blacks, whites, silver and gold are also a good choice of colors for hotels, spas and resorts, especially if it’s a five-star establishment and they wish to capitalize on luxury and class.

Conclusion

Color is a good way to catch the eye of viewers, but too much color will be distract your readers from looking closer and reading on. If you can, stick to 2 to 4 colors only.

Color combinations are not created on whim, but through careful research and study. By knowing the basics of the color wheel and combinations, you can create thousands of aesthetically pleasing color combinations.

Let’s talk about science behind the colors of web design.


Is There A Science To Picking Colors That Work Well in Web Design?


When you think of color, the first thing that comes to mind is crayons, paints, and makeups. In short, it has something to do with arts and the aesthetics. Surprisingly, though, colors and how you blend them together has a science, or should we say, a psychology behind it.

Getting more and more curious about this #EspressoMonday episode? What are you waiting for? Grab your espresso shot for another few minutes of knowledge and be inspired.

Colors are everywhere. Colors are a part of life. Some colors inspire us, while some seem depressing. Colors play an important role in almost every aspect of life, even in web design. Therefore, it is very important to get the right colors together if you want to make the right first impression.

To use the title of this episode, is there really a science behind picking the right colors? It is not really science but psychology and according to psychology, our brains react differently to different colors. Moreover, statistics say that 90% of snap judgments on purchasing a product have been made based on the color of the product. That’s how powerful color is!

The Right Colors, The Right Tools

Although it would depend on your clients to pick the colors for their website, you, as a web designer, are also expected to share your valuable input to make the website look good. After all, your work will reflect your skills.

While there is no clear-cut set of guidelines for choosing the right colors for a website, there are very helpful tools which can make the job much easier and faster for you. So in today’s episode, we present you different palette generators to help you choose the right colors or color combinations.

1. Colllor

colllor.com

Colllor (colllor.com)

2. Colour Code

colour code

Colour Code (colourco.de)

3. Color HailPixel

color hailpixel

Color HailPixel (color.hailpixel.com)

4. Color Blender

color blender

Color Blender (colorblender.com)

5. Material Palette

material palette

Material Palette (materialpalette.com)

6. Paletton

paletton

7. Coolors

coolors

Coolors (coolors.com)

8. Colour Lovers

colourlovers

Colour Lovers (colourlovers.com)

9. Contrast-A

contrast a

Contrast-A (dasplankton.de/contrasta)

10. Adobe Color CC

adobe cc

Adobe Color CC (color.adobe.com)

11. Color Munki

color munki

Color Munki (colormunki.com)

Conclusion

Colors are one of the vital elements of a successful website as well as a formidable force in influencing the consumers’ buying decisions. But no matter how crucial the color combinations are, picking each of them and combining them should not be difficult with the help of these useful tools.

Next section will be about proper color calibration, so that you can easily show it on different type of devices or print it.


Color Calibration for Your Devices

We’ve all experienced it at one point: we’ve created an impressive digital work, and wanting to show it off to other people, decided to print it. But after seeing the printing job, you are horrified to see that the colors are off, the brightness, contrast or saturation is all wrong. You’ve realized that your screen’s calibration is wrong. The image you see on-screen is a lot different from what you see when an image is printed.


In simple terms, color calibration is the process of correcting the display color information of your devices. Simple calibration involves adjusting the Brightness and Contrast settings on your monitor. In most cases this may not be enough–you may also need to calibrate your printer, camera, scanner and other devices so that what you see on-screen, as well as what you scan, print or take a picture of–is as similar as possible. For professionals who need proper calibration, high-end and precise calibration devices are available.

How to Calibrate your PC

For basic printing and web-based works, simple calibration may be enough. For simple calibration just make sure your monitor is in 24 bit mode. With normal room lighting inspect the screen without reflections or glare. Using the buttons on the monitor, make the necessary changes with the brightness and contrast. You can check by looking at a series of black, grey, and white squares.

But for more serious design work that needs accurate colors and settings, you need programs and devices that are created for calibrating your devices. If your monitor is already calibrated using software or hardware methods, don’t make the following adjustments. It could mess up your carefully achieved calibration.

Why You Need to Calibrate your Devices

1. Better viewing experience.

If you notice that photos look murky, dull or too bright and saturated, now may be the time to calibrate your computer. How can you tell? Most of us don’t bother editing the monitor settings–we’re so used to it that nothing appears to be wrong. Here’s a quick test to find out:

Look at the photo above. What do you see? Do you see a rectangle that’s all black? or dark gray? Can you make out the dark gray heart located at the center? If you can’t see the heart, then it may be the perfect time to calibrate your monitor.

2. Consistent images when printing.

With proper calibration, what you see is what you get. I myself have been a victim of bad color settings. Since I get headaches with hours of staring at the screen, I have a dimmer monitor because I adjusted my brightness and contrast settings to low. Then I proceeded to work on a project that required cloning and stamping. What appeared very clean and polished on the screen appeared the opposite in print. I didn’t notice that the smear strokes I created to clone the background were so obvious.

I learned a lot from this experience, every time I have a project to work on, I make sure my devices are all properly calibrated.

How to Calibrate your Mac

Mac users don’t have to worry much about calibration because it has a built-in color calibration utility. This is by going to System Preferences, choose Display and then Color. Select Calibrate, and from there, you can tune your screen’s color channel, brightness, contrast, etc.

How to Calibrate your Printer

When printing photos or documents on your printer, use the correct print profile to get the exact colors. The fastest way to ensure that your printer is properly calibrated is via the printer’s software. Every printer manufacturer is different, just follow the instructions carefully.

How to Calibrate your Scanner

Scanners are another device that need to be calibrated. Some designers prefer drawing their initial work by hand, rather than working with a tablet and stylus. After drawing manually, they will need to scan their work on a scanner–and this is when the trouble begins. If the colors are off, photos are too dark or too light, then it’s time to calibrate your scanner.

All you need is to buy a scanner profiling chart, available online or at a local computer store. Install the software that comes with it (we’ve all installed something, it’s a no brainer). Next step is to make sure your scanner glass is clean before scanning anything–clean it with water and use a lint-free cloth. Place the chart on the glass and scan. Open the software and choose the image file of the profiling chart. Load the scanned photo, crop and select to have the image analyzed. It will then automatically be saved into a color profile for your scanner.

How to Calibrate your Camera

Photo by TechProne

If you need to constantly edit or adjust your digital photo settings, it may be time to calibrate your camera. You can use color images via your scanner if it has already calibrated it; but if not, you can calibrate it easily in just a few steps.

First make sure that the monitor has been calibrated. Afterwards, by using a neutral gray card and a camera profiling chart–preferably the same brand of color calibration package you used for your screen. Set the gray balance on your camera at the same values. Use the software that comes with the camera profiling chart. With good, proper lighting, take a picture of the camera profiling chart. Save the file you created–from then on, the digital camera’s image color information will be automatically adjusted to fit the color profile.

Other Tips for Proper Calibration

1. Buy monitor calibration software or hardware.

As mentioned, for more serious work that requires accurate colors, you can buy monitor calibration software. There are a number of brands available, such as Spyder 3., LaCie or GretagMacbeth. Some calibrators can even support dual monitors.

2. Correct the gamma setting of your display.

Correct the gamma setting of your screen for it is an important factor of how the final printed output will look like. The 50% grayscale display should look the same as 50% dithered gray on screen. You can adjust the slider so that the grayscale display and interleaved dither will look approximately the same.

3. You will need to use the program often.

Most of us think that once we’ve used the monitor calibration tool, we don’t have to use it anymore afterwards. But color settings can shift in a short period, typically as short as two weeks. It’s important to recalibrate as often as you can–it takes around two minutes to do it, plus you will be reminded by the software so there’s really no excuse for you to forget.

4. Choose the right paper.

Image by NW Link

Do you know that the type of paper you are using–whether it’s glossy, matte, colored or satin–can affect the colors of your print? Make sure to select the correct printer settings before printing in order to set the color profile properly. To maximize the color quality, you need to buy the type and brand of paper recommended by the printer manufacturer found in the manual.

Now lets talk about white design in contrast to the colorful design.


How to Create a Perfect White Web Design? Tips and Inspiration

White is clean and elegant, these are the two things we see on White. This color has always been popular that is used in different kinds of industries. For instance in interior designing, designers prefer more White to stand out as the main color in decorating a room or a house.

But how to create such design on our own?


Take a look at this image of a room that is decorated in all White.

White room

Image by: New Inspiration Home Design

Do you find this beautiful? I do. And the color is just simple yet it brings out the elegance and cleanliness of the room. Also with web design, White is becoming famous as the chosen dominating color for a theme of a website. Not only that it is simple, clean and elegant, it also brings a lot the creativity on designers reflecting on their works. Personally, I find it very easy to create a web design when I use White as my main color. In this article, I will be sharing to you my thoughts and ideas regarding White color in creating a web design.

What Makes White Beautiful?

Clean and Simple

I think everyone will agree with me that White symbolizes cleanliness. And that is one thing we are looking for on a website, right? We can say that a website is clean when the contents and other elements of the site look organized where they are properly placed in an appropriate position.

Greece is for Lovers, a website where you can buy several limited Greece-inspired products, is one good example of a website that value simplicity and neatness. Notice that the navigations and contents are well placed. The whole site is simple to use, therefore gives users comfort in exploring.

Greece is for lovers

Another example of a website that looks clean is i am Dan, a portfolio website owned by a web designer and flash developer. The contents and elements of the site are placed in a right position, the texts are readable and the navigations are user-friendly.

I am dan

There are just some of the examples of website where White gives a cleanliness in the look of a website. Now, let us go to how White can offer simplicity on a web design.

In the mind of viewers, the simplicity of a website is determined when it loads faster, user-friendly, easy to navigate and responses quickly. For designers, a simple website is easy to create, edit and maintain, therefore giving less cost on employers . To fully understand this one better, I have here examples of websites that value simplicity.

Zurb is an agency of web design that has a website that is simple to use, refreshing and very direct.

Zurb

Professional and Elegant

When a website looks professional is elegant, it gives an impression to users that the company or the person is professional and elegant or formal too. White is one of the colors that can give a look like this on a site.

fourthfloorinteractive is an agency that gives interactive solutions on their clients. Take a look at their website, White gives a professional and elegant look and it blended well on the other elements of the site.

Fourthfloorinteractive

The professionalism and elegance of a company or a person can be determined on the impression their websites is giving, and putting a White color on your site can hand you these things.

Creative and Attractive

Websites should be creative and also attractive. In this way, visitors will have an excitement and drive to fully explore your site. A website is creative and captivating when the viewers enjoy and is having a comfort exploring well, even if it only have less contents on the page.

The reason that I always find White as a main color on a design is because whatever you match with it, it will still look good. And that’s what is why I find White very creative and attractive. Why don’t you take a look at these sites for an evidence that White can also be creative and catchy.

Noemie Chevaux-Tavernier

Here is one example that White website can be creative. The designer used different kinds of figures and beautiful fonts to make it look creative. I think if the White was put into different color, it won’t look good as the way it is.

Noemie chevaux

We Make It Live

Each elements of this website gives a creative and uniqueness on the whole design. White makes the design look fabulous, cute yet professional in look.

We make it live

 

Benefits of Using White

It makes your contents stand out.

Imagine a plain canvass, it’s all in White right? But after you have drawn on it, the drawing stands out. And that’s how contents also stand out on a layout if you will be using White color.

Compare the two websites below:

Bootb

Bootb

As soon as the page (image above) loads, the first thing you will notice is the Black. But if you will be seeing this page (image below), you will immediately notice the contents but not White. And that’s how contents stand out on a White canvas.

Log

Log

It is easier to mix and match.

This applies to everything. When you choose a top that is in White, you may pair it with bottoms in any color. When you use White wallpaper or paint on for your wall, you can have your furniture in any color. And for web designing, when you use White you may use any colors to mix with it. You may use Black, Gray, Pink, Blue or even Orange! Try looking at the picture below.

White orange

Image by: gugy

I can say that White is a color that you can mix and match with other colors.

It looks neat.

White symbolizes neatness and cleanliness. This also implies on web design, it makes your website looks neat even you put any colors to match it.

Neatness

Image by: jessamyn west

When Creating a White Web Design: Tips and Guidelines

  • As much as possible, use dark colors on your texts to make them stand out from the White. Make your text readable in size.
  • Make your buttons in a darker color, so that your viewers will notice them quickly. Also, design them as simple as White is to give your viewers comfort in exploring your site.
  • Put your contents in an organized way to make your website look more neat. This will also make your viewers easier to read and explore.
  • Be simple yet creative. You can put different kinds of figures or images to make your web design look simple yet creative. This can capture viewers’ attention.

More Examples: Websites With White Design

Look Designs

Look designs

Koeln Bonn Airport

Cologneboonairport

Numan Cebi

Numan cebi

Hello Lucky

Hellolucky

Devia

Devia

Alcian Blue

Alcian blue

Threadless

Threadless

Gustavo Urena

Gustavo urena

AQ Works

AQ

Big Youth

Bigyouth

Itchy Pixel

Itchy pixel

Chriss Loan

Chrissloan

Tisha Creative

Tisha creative

Midiaweb

Midiaweb

Christa Robillard

Christa robillard

One Day Without Google

One day without google

Anywhichway

Anywhichway

SquareFACTOR

Squarefactor

A Woman In The Mirror

Woman in the mirror

Shop YCN Online

Ycn

Your Thoughts

I hope you learned something from this article and got inspired to create a website with White color on it. You may also want to share some thoughts regarding White color on the Comment section.

We all know, that capturing personality in your web design is always good. If you want to know more, just keep on reading.


Injecting Personality in Your Web Designs

If you want your websites to stand out from a sea of competitors, the easiest way to accomplish this is to give it a little personality. As web designers, we have the capability to tap into this human trait through well-conceived designs that forge an emotional connection with the visitor. How is this attribute achieved? In this article I will present ways you can inject personality into your web designs and create a memorable business solution for your client.


Visual Language

The visual language of a website plays a pivotal role in its personality. Is your site clean and minimal or bold and eye-catching? The way you define your website will help you in creating an effective visual language. Visual language is expressed by:

  • type choices
  • alignments
  • color usage
  • the overall design style

To better understand the potential of this trait, take a look at the following two corporate websites and how their visual language is defined through the above attributes. While neither of them is better than the other, you can pick up how the designer expressed the company’s vision through the site.

Capegemini presents a clean, slick visual language. The color blue is used predominately throughout the site – a good choice as it represents protection and wisdom – something a user is looking for in visiting this site.

Red Brick Health takes a softer approach on their website, choosing illustration to convey personality. The result is a feeling of warmth – an attribute visitors respond favorably to in visiting this health website.

Color

Color is a powerful tool that can affect our senses and be associated with feelings and ideas.  It’s said that reds, oranges, and yellows are associated with hunger, excitement, and warmth while cool colors such as blue and purple evoke calmness and serenity.  These feelings are tied to the overall experience we have with a brand and factor in largely to the decision making process.

Adding textures too can alter colors – a roughly textured surface makes a color seem darker, while a smooth surface lightens the same color.

Consider the following feelings evoked by the corresponding color:

  • Red – Energy, strength, passion
  • Pink – Romance, love, friendship, femininity,
  • Orange – warmth, energy, balance, enthusiasm,
  • Brown – friendships, special events, earth,
  • Gold – wealth, god, winning, safety, masculine power,
  • Yellow – sun, intelligence, light, accelerated learning,
  • Green – earth mother, physical healing, monetary success,
  • Blue – good fortune, communication, wisdom, protection,
  • Purple : influence, third eye, psychic ability, spiritual power,
  • White : spirituality, goddess, peace, higher self, purity,
  • Silver : glamour, distinguished, high-tech, industrial,
  • Grey : security, reliability, intelligence, staid, modesty,
  • Black : protection, repelling negativity, binding,

Resources:
Color Scheme Designer
Color Psychology in Online Marketing

The social networking site Twitter has designed a look and feel for their site to make visitors feel at ease. The color blue is a nice choice here, as it enhances productivity and makes you feel relaxed and trusting. It’s no surprise that a lot of companies use blue when designing their logos.

Twitter

Atmosphere

Atmosphere contributes a lot to one’s emotions. When you walk into a restaurant or café, you’re probably formulating in your head impressions you have about the particular establishment. The same is true for the web. Atmosphere is created through a number of elements including color, texture and organization. Whether fun and family friendly or elegant and professional, the atmosphere should give the viewer a taste of what your business has to offer.

When you think of coffee shop websites and how they engage users you may think of close-up shots of coffee or large static images of customers enjoying the atmosphere. The designers of Melitta knew this and made some intelligent decisions to really push the environment of the shop. What better way to get the user involved in your product then by putting them into the scene?

Melitta redefines what it’s like to enjoy coffee by putting us at eye level with the rest of the shop patron’s, making us feel included and like we’re enjoying the coffee ourselves. With a large view of the shop’s exterior and by watching the patrons move and enjoy the experience, we are given an insight into the culture and experience of Melitta before we even step foot in the door.

Texture

Texture is another element used in design to evoke a feeling and contribute to the overall experience. If used correctly it can evoke memories – the emotional reaction of seeing a texture can conjure up images of how we felt about it when first experiencing it.

Cure

Peter Granfors

Resources
CG Textures

25 Excellent Photoshop Texture Tutorials

Designing a Website with Personality

  • Incorporate original and unique graphics. Through large or slightly quirky graphics you can help your website stand out from the competition.
  • Use confident opening statements, catchphrases and/or interesting summaries to catch the attention of your audience. Most visitors will only read a small percentage of text on any given page, so use original language to emphasize your differences.
  • Keep things organized. If a visitor can’t see past the first page due to untidy navigation, chances are they won’t stay around much longer after that.
  • Experiment with non-traditional color combinations. You want to user to feel engaged, but keep readability in the back of your mind too.

Related Links:
Personality Culture History
Designing Websites with Personality

Conclusion

As designers we have the ability to think outside pure functionality concerns and creating websites that forge emotional bonds with the viewer. Of course, you should have a solid strategy in place for what the site will achieve, but personality is one way of helping your design cut through the clutter and reap rewards for your clients. What are some ways you show personality in your web designs?

Editorial Team

Written by Editorial Team

29 Comments

  1. Very helpful article, using different colors to target specific demographics and region

    Reply

  2. let us know more about the use of Phi color selection and the use of it ? ( Golden ratio )

    Reply

  3. This is brilliant, I’m looking for the next post..Perfect combination of colors .

    Reply

  4. This is a great combination of colors. Inspirational Effects.!

    Reply

  5. Colors are such an important ingredient for your web design that this cannot be emphasized enough. We all know that different colors affect the moods of people to varying degrees, so this will also have an affect on your customers’ perspective of your company.

    Reply

  6. A marvellous article, thank you alot for being there and help me out with this information.
    Thanks again.
    I need advice and / or help on my color project.
    I am a newby on building websites and need help in creating color experiences for visitors.
    My non-commercial site agam.tk – baia.nl is just the beginning for me in working with pages,
    My goal is to give visitors some experience on colors fand emotions.
    It has to be a combination of a hidden color wheel-mouse-oriented colorwheel page and a full-color page display of the mouse browsing the spectral colors..
    I should appreciate if you can advise me in one way or another.
    Thanks in advance.

    Kind regards and have a beautiful day

    Reply

  7. Thanks for this brilliant idea…I can stop doing all rubbish and do good looking websites.

    Reply

  8. I am designing some webshops for myself and i always found it really difficult to choose colors.

    Thank you for a great article this helps a lot with picking the right ones.

    Reply

  9. Jasim Muhammed August 4, 2011 at 13:46

    Its a very good article :) Thanks
    I would suggest to add one more site. http://uicart.com it gives how color patterns are best shown up in reality. Provides ability to showcase Web User Interfaces as well as searching UIs based on our favorite color patterns

    Reply

  10. Wow …. I have been lookng to a lot of articles like this but this one i really like because of the expamples and pictures you give with it.

    This one will help me so much with choosing my website colors.

    thx

    Reply

  11. This is a great article. I have added it to my delicious for future reference. I have read several articles on this subject and it,definitely, is one of the easiest to understand.

    Thank you for the great resource.

    Reply

  12. This was a very helpful article because color can make or break your website!

    Reply

  13. Hi,
    here is Raj. from Pune (India)

    It’s a fantastic. Really, it will be helpful to all designer from basic to high. This topic improve the color scheme to create a creative and attractive design.
    Thanks for providing this knowledge. Thank you very much.

    Reply

  14. Love this post. We’re locals here in Nashville and Justin Bird is a local designer here. Fantastic work he puts out. Glad you guys featured his orangy-twitteresque sweet layout.

    Reply

  15. I think colourlovers.com is a good colour tool online, I hope the can help you.

    Reply

  16. JayTravis8210 October 5, 2010 at 17:45

    This was an interesting article. I didn’t realize that colors were held in so many different regards culturally. I tend to lean towards black backgrounds as they give more feeling to the other elements of the page.

    Reply

  17. Shrikrishna Meena October 1, 2010 at 08:24

    Color combination is an essential part of every web page, liked the brown and orange examples shown here.
    Bookmarked this for later reading.

    Reply

  18. The three primary colors (i.e. in the additive colour model used in pc displays) are red, blue, and green (instead of yellow in this article). Yellow is a combination of red and green (#f00 + #0f0).
    Perhaps you meant subtractive model, based on C(yan), M(agenta) and Y(ellow) colours?

    Reply

  19. Thanks for the article! it’s that what i was looking for!

    Reply

  20. Thanks for this arctile. The examples are very nice too.

    Reply

  21. thank you my man,
    really usefull,
    and is there any online tools for this?
    friend got an app, but thats only for iphone :(

    Reply

    1. Thank you for your feedback!
      I like ColorBlender.com, it is a rather good online tool for color matching and palette design. Also, as Dainis already said here, kuler.adobe.com/ is good.

      Reply

  22. I think you may want to recheck your symbolic-colours table. I live in South Africa and this is first that I heard that Red is symbolic of mourning. Also India/Islam.

    Reply

    1. Thanks for the info Ahmad, I’ll revise the table.

      Reply

  23. Great article, I love seeing stuff based on the core principles of art and design. Understanding how to use color in combination with other colors is one thing but then graduating to an understanding of how to use color in terms of an action and an emotion is a whole new ballgame.

    Subjects like color, spacing, alignment, shape, and form are huge tools for designers and things we should continue to learn about and experiment with as we grow our skill sets.

    Reply

  24. Cool and useful article. Never knew about the differences of color significance in the various cultures.

    Reply

  25. Have you any suggestion about an online tool for choosing colors combination?.

    thanks

    Reply

    1. Dainis Graveris September 23, 2010 at 16:01

      I say kuler.adobe.com/ is the first place to look but for more choices – http://www.1stwebdesigner.com/resources/15-useful-color-mixers-for-effective-designing/

      Reply

Leave a Reply