10 Most Commonly Used Colors In Web Design And Their Examples

Mar 23rd, 10 by Yanuar Prisantoso | View Comments |
You maybe interested in our latest article Personal Facebook Fan Pages of Celebrities.

Colors become one of the most important part of any web design. Designers can create impression, emotion, style site based on color choices. Because the color is very important, designers must understand the meaning of colors in order to convey certain messages.

Here the meaning will be discussed and examples of the use of color in the web design. I will share the meaning of the 10 colors used in web design. Each color will be explained the meaning of positive and negative, also with examples of websites that use that color. Feel free to comment your experience when using color in developing website.

Notes: If you want to learn how to generate color palette for your web design, feel free to read our article about Online Color Generators.

Red

Red symbolizes passion, aggressiveness, power, and also help stimulate the energy, vitality. This color has a productivity effect, struggle, competition and the red color, however kebirahian also has a negative meaning of anger and emergency

Example: 45 Examples of Using the Color Red in Web Design

jonwallacedesign

jonwallacedesign



Logo Design Gallery

Logo Design Gallery

Visual Designer

Visual Designer

Green

Greens have a natural taste, refreshing, calm, health and healing qualities. Color is widely used in the design beruhubungan with herbal remedies, activities related to the environment. On the other side of the green symbolized as money, it shows the greed, also shows a lack of experience or a beginner

Example: 15 Grandiose Green Website Designs

Green Ideas

Green Ideas

IE6 Bugs, Problems, Fixes, Solutions, Tips & Tricks

IE6 Bugs, Problems, Fixes, Solutions, Tips & Tricks

Yoast

Yoast

Orange

Orange is a combination of red and yellow. Orange color symbolizes enthusiasm, a sense of openness and friendliness. This color is the color of joy, happiness, joy. On the Blog can enhance mental activity. Besides, the color of Orange gave a strong impression on the elements that are considered important. Orange color has a negative meaning of ignorance and lies

Example: 30 Orange Websites

Move Your Body

Move Your Body

Downtown Denver Hotel

Downtown Denver Hotel

Wanna Burger

Wanna Burger

Blue

The blue color symbolizes peace, reliable, confidence. This color gives the impression calm and stressed the desire. Blue eyes did not ask for attention. Objects and blue images can basically create a feeling of cold and calm. Blue color can also display the power of technology, cleanliness, air, water and deep water. In addition, if combined with red and yellow colors can give the impression of trust and health. The blue color has a negative meaning of depression, indifference

Example: 30 Beautifully Blue Web Designs

Pasquale D’Silva

Pasquale D'Silva

Icebrrg

Icebrrg

Frisk design

Frisk design

Black

The black means power, eternity and depth. Sometimes black is negatively related to binding, strength, formality, mystery, wealth, fear, evil, unhappiness, feelings of deep sadness, anger, something that violates (underground), modern music, self esteem, anti-establishment.

Example: 20 Examples Of Dark & Minimalist Website Designs With Great Typography

Black Estate

Black Estate

Ole Martin Kristiansen

Ole Martin Kristiansen

tictoc family

tictoc family

White

Showing peace, apology, self achievement, spirituality, divinity, virginity or chastity, simplicity, perfection, cleanliness, light, takbersalah, security, unity. Very nice white color to display or emphasize other colors and give the impression of simplicity and cleanliness. White is the universal color for peace. And white has a negative meaning as cold and distant colors

Feelwire

Feelwire

Sofa

Sofa

Square Factor

Square Factor

Purple

Purple means the color royalty, wealth and kemewahaan. Color purple can also show the influence, third view, spiritual strength, knowledge is hidden, high aspirations, nobility, ceremony, mystery, enlightenment, telepathy, empathy, arrogant, intuition, trust in, ambition, magic or miracle, self-esteem. And the negative side of the color purple is sadness

Example: 25 Kick Ass Purple Portfolio Website Designs

GoodBytes webdesign bureau

GoodBytes webdesign bureau

Full Fat Studio

Full Fat Studio

SW Graphic

SW Graphic

Yellow

Often in yellow means represents intelligence, optimism, joy. Yellow color stimulates mental activity and attract attention, is very effectively used in the blogsite that emphasizes the feelings of happiness and childish. Yellow color has a negative meaning laziness and jealousy.

Example: 50 Amazing Example of Yellow Inspiration

Sketchen

Sketchen

Paralotna

Paralotna

Gareth Dickey

Gareth Dickey

Brown

Brown color indicates friendship, special events, earth, materialistic thinking, reliability, peace, productivity, practical, hard work. Brown color is not attractive when used without additional image and certain ornaments, brown ornaments must be supported by others so interesting. But the color of chocolate may also mean dirty, dull, and boring.

Example: 20 Great Examples of the Use of Brown in Web Design

Sergio Noviello

Sergio Noviello

James Lai Creative

James Lai Creative

Tea Round App

Tea Round App

Pink

Pink means spring, gifts, appreciation, admiration, sympathy, health, love, June, marriage, femininity, (feminine), youth (youth). Pink Color can also exhibit a symbol of affection and love, friendship, femininity, trust, goodwill, the treatment of emotion, peace, feeling fine, feeling a sweet and beautiful. And pink negative meaning is Homosexuality, Bisexuality, naive, weaknesses, shortcomings.

Example: 21 Good Examples of Pink in Web Design

Digital Devotion

Digital Devotion

Cow And Monkey

Cow And Monkey

BigFilebox

BigFilebox

We regularly update articles about resources, tutorials and Wordpress to help designers and developers. If you are new to WebDesignBooth, why not subscribe to our RSS feed and get the latest updates immediately. You can also subscribe through email or follow us on Twitter.
Yanuar Prisantoso is a 25 year old web developer in Onebitmedia, he has experience in the web design and web development industry and posts articles and very interested about jQuery and interactive on his blog, Denbagus. You can follow on Twitter or contact him through his website.
  • http://aext.net Lam Nguyen

    Well done, I can see many excellent examples here. My favorite is yellow but using Yellow comes with many risks :D !

  • http://webexpedition18.com Nikola Lazarevic

    Great post with superb examples :)

  • http://webitect.net/ Nick Parsons

    Great article, Yanuar! My favorites are blue and brown – I always seem to gravitate towards those.

    By the way, I’d agree with most of your assessments but I’m just wondering how you determined which feelings go with which colors. Are those just your personal associations, or are they psychologically proven? It was a good article either way!

  • http://siteme.com webmaster

    Good article and I like the color combination

    Thanks

  • http://www.copykat.com Stephanie Manley

    Do you ever need to consider colorblindness when it comes to factoring in what types of colors to use?

  • http://devisefunction.com Matthew Heidenreich

    If you really want to get technical, pink is just a shade of red ;-) But where is the fun in being technical? great list, some good uses indeed.

  • http://www.area1.info Mihai O.

    Great showcase! :)

  • http://www.imanswers.com IM Community

    Nice info! How about colors green and yellow?What do they symbolize? They’re my face colors.

  • http://www.jennamolby.com Jenna Molby

    Great examples! Blue is always a classic.

  • http://www.denbagus.net denbagus

    @Lam Nguyem @Nikola Lazarevic @webmaster @Mihai O @Jenna Molby

    thank for your feedback :)

  • http://www.denbagus.net denbagus

    thank you .. good question, it’s not my personal opinion and I think it was a mutual agreement in the field of psychology :)

  • http://www.denbagus.net denbagus

    yup.. i think that is very important for me

  • Yanuar Prisantoso

    green is the symbol for the natural, natural yellow while the symbol for the brain

  • Yanuar Prisantoso

    pink synonymous with softness and cheerful

  • http://richworks.in Richie

    Excellent showcase…. Red and Orange websites truly inspire me a lot. They spread a lot of positive energy.

    Thanks for sharing this article

  • http://actws.com/2010/03/improving-your-online-marketing/ Improving Your Online Marketing : Actws.com

    [...] 10 Most Commonly Used Colors In Web Design And Their Examples [...]

  • http://howtoregisterdomain.net/?p=3 How to register domain! Domain registration can’t be easier that it already is with this step by step tutorial! | How To Register Domain!

    [...] 10 Most Commonly Used Colors In Web Design And Their Examples [...]

  • http://www.epicwindesigns.com Antonio

    This is by far one of the best articles I’ve read in a while. Great job!

  • http://www.edgarleijs.nl Edgar Leijs

    Hi! What do you mean with: “…And pink negative meaning is Homosexuality, Bisexuality…”

    I think you don’t mean it the wrong way but it’s not quite correctly formulated… What do you think?

  • http://www.redesignyourbiz.com/ Maverick

    nice examples show in the list. beautiful designs.

    i feel blue really works well on the web.

  • http://internet-enterprises.co.uk/wppc/?p=2338 Simplicity: What It Means In Web Designs | Internet Marketing Information

    [...] 10 Most Commonly Used Colors In Web Design And Their Examples [...]

  • http://www.epicwindesigns.com Antonio

    I found a mistake, when I clicked in the examples of brown websites link, it took me to the same place where the example of yellow websites link sent me to.

  • http://www.denbagus.net denbagus

    thank you Antonio for your correction , i have fix it

  • http://www.freemarketingmadeeasy.com Kai

    Great illustration of the use of colors and themes! I love seeing the Curtis Hotel (Denver) here. Their design is fabulous, and was done by high end designers Korn Design from Boston. Check them out for inspiration: http://www.korndesign.com/

  • http://www.webdesignbooth.com Dicky

    Hi Maverick,
    I agree with you. I like blue color very much :)

  • http://www.denbagus.net denbagus

    i mean for porn exploitation

  • http://easteregghunt.org/?p=6138 Little People Exclusive Easter Basket

    [...] 10 Most Commonly Used Colors In Web Design And Their Examples [...]

  • http://www.firsttech.net/ Carl

    Thanks, this was very interesting and informative.
    It makes me wonder about the psychological impact of shapes and if you can leverage specific shapes with specific colours to produce certain emotional response.

  • http://prestofares.com/Toronto-Train/keep-your-clickbank-products-safe/ Keep Your Clickbank Products Safe

    [...] 10 Most Commonly Used Colors In Web Design And Their Examples [...]

  • http://www.design.tomgirling.co.uk Norfolk Web Design

    Bold colour use does take some courage sometimes! The choice of colour has to be taken very carefully as it could possibly alienate some users for a particular brand.

    I also find it interesting that green tends to lend itself more to illustrative designs – something I’ve noticed before.

    Great inspirational list.

  • http://www.inopacnon.com reyven

    Wow! Great article in web design perspective. Thank you.

  • http://www.crystalamesbury.blogspot.com kittell

    actually pink is a ‘tint’ of red, as it’s red with white added, whereas a ‘shade’ of red would be darker ;P

  • http://www.albertlie.com/ Albert Lie

    Great information. If my website included here, where will it be placed? On White categories?

  • http://www.thisismyurl.com/tutorials/web-advice/10-great-photographer-websites-and-why-the-dont-work/ Chris (web designer in Fredericton)

    I don’t think you can ever have enough great red websites, there’s something really powerful about a solid block of color on the web.

    thanks for a great collection!

  • http://www.webcreationuk.com/ Web Design

    Nowadays more and more people are going for a monotone trend, a black and white website that looks more business-like.
    However, that red is gorgeous, I like it the most. :)

  • http://blog.almacenplantillasweb.es/2010/04/los-diez-colores-mas-utilizados-en-diseno-web-y-algunos-ejemplos/ Los diéz colores más utilizados en diseño web y algunos ejemplos | Diseño web, accesibilidad, usabilidad, posicionamiento y optimización web – AlmacenPlantillasWeb Blog

    [...] 10 Most Commonly Used Colors In Web Design And Their Examples. Aun no hay TweetBacks. (Se el primero en enviar a Twitter esta entrada) var addthis_language = [...]

  • http://www.swgraphic.com/v2/blog/ Sarah

    Thank you for including me in this list! Nice showcase. Thanks for the share.

  • http://celioferreira.com Celio Ferreira

    Very Excellent!!! Congratulations!!!

  • http://knowledgecity.com Jae Xavier

    I love looking at Icebrrg’s site. There is just something about it that makes it look so pleasing to look at. Plus I see that many blogs blog about it.

  • http://www.bestfrenchcampsites.com J Wilson

    Interesting – glad I picked green yellow and orange for my site !

    I think in these enlightened times you should maybe change your last sentence in the pink description as those things would only be negative if you perceive them as negative. I suspect that pink is a colour which will be very carefully chosen before using in a website unless its an obvious one like “girls makeover parties” or girls clothes etc. The examples shown work well in pink although I suspect the last two would work equally well substituing the pink for green or another colour.

  • ahmadi

    so good
    thank your

  • http://www.i4visualmedia.co.uk essex website designers

    I really like Ripie, it’s a cool design, the first couple of Red ones on the other hand are not so nice, it’s a really bad shade of red in my opinon.

    thanks for the post though, was good.

  • http://www.xtidesign.com/ XTiDesign

    As a designer, I have to say that making sure websites are very large (in width) is very important. – typical LCD’s are coming in at 1920px wide. Something to bear in mind.

  • http://www.redchillimedia.com Web Design Company USA

    Nice list, I love red color. Shared colored always have high preferences then other while designing a website.

  • http://artisanart.ro/?p=193 ArtisanArt » 10 Most Commonly Used Colors In Web Design

    [...] can seethe full articole here on: http://www.webdesignbooth.com You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, [...]

  • http://www.ideamarket.ca/2010/12/colour-theory-workshop/ Colour Theory Workshop | Idea Market

    [...] Examples of colour use in web design: http://www.webdesignbooth.com/colors-in-web-design/ [...]

  • http://www.brettwidmann.com Brett Widmann

    This is very interesting but when you think about it, I do see these colors a lot!

  • http://blog.templateland.biz/?p=1590 TemplateLand Blog » Blog Archive » Colors in Web Design – Valuable Resources and Tools

    [...] 3. 10 Most Commonly Used Colors In Web Design And Their Examples [...]

  • krishna

    Its a cool Designs, I like it vary much

  • http://www.desiredtech.co.uk Web Design

    Brilliant post. A lot of people don’t understand the importance of choosing the correct colors when creating websites. It’s absolutely vital that understanding the users needs is the #1 priority. Nice eye catchy colors but not too intense that it takes the attention away from the content.

  • http://alettertoej.wordpress.com/ EJsmom

    i like using black for my blog but purple is my favourite color :)

  • http://oddmag.com Rebecca

    Nice and informative article. Thanks for sharing :) I’ve also considered the “color topic” and write an article about colors in Web Design, hope you’ll find something new and interesting in my post:)) Here it is: http://www.oddmag.com/web-design/color-magic-how-to-choose-proper-colors-for-your-website/

  • http://www.swiftcreations.co.uk Swift Creations

    Thanks for these excellent examples of good design.

  • http://www.myoptimind.com/web-design-and-web-development.html Nickolei@web design manila

    I am agreed that colors
    become one of the most important part of any web design. To get an attractive and user
    friendly website, it is important to pay attention to the colors of your
    website. Anyway, thanks for sharing this.

  • Anonymous

    American baby names reflect the multi-cultural diversity that is the United States. Immigrants clamoring to get into the country were often illiterate and too concerned with life and death to be worried about how their names were spelled on official papers. Immigrants facing discrimination often dropped the trademark characteristics of their names. 

  • Random WebDesign

    Some great thoughts here, good advice for re-imaging brands

  • Anonymous

    The purple ones could pass as black though… 

  • Anonymous

    Use bold colors, and sometimes does take some courage. The choice of color should be taken very carefully because it may alienate some users of a brand. I also find it very interesting, green design often speaks for itself – this is before I have noticed.

  • Guest

    Great! 

  • http://volts.ca/7-Propane-/-Natural-Gas-Generators/View-all-products.html Gas generators

    very good examples of using colors in web design! 

  • http://www.shockwavedesign.co.nz/ web designing

    Awesome tips and showcase on designing a blog this is really quite helpful tips on how to improve the design of a blog you must consider most of those things and apply it.

  • Alexia Smith

    This is an
    excellent review.I would love to read more about this topic.

    http://www.sexy-shop.es/

     

blog comments powered by Disqus