SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How does Color Theory work for web design?

    Hi everyone, I was wondering if anyone has an awesome resource on learning about applying color theory to web design. I read alot of sites about how certain colors represents coolness, control or to stir up emotions. That's great, but sites are generally more than one color.... I know that I should keep contrast for readability, but's really it. Then there's complementary and tertiary colors on the color which I also cannot seem to understand or apply. Any help?

    I'm surprised there's no paid book on amazon or the net that really goes indepth about or maybe I didn't look enough. I'll still keep trying.

    Thanks.

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Color theory is no different on the web as it is for paintings.
    Thus anything on color theory is valid.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    SitePoint Zealot
    Join Date
    Apr 2006
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's like making music you have to do what you think is right, your design should however be readable, use the rule of third theory, 1st, 2nd, 3rd etc and make your 1st have more contrast than your 3rd. Do not use too many colours, keep your colour palette to a minimum again - rule of 3rd - no more than 3 colours in your palette, you can play with the brightness or saturation of a colour to create variation in your designs. Use complimentary, triads etc to harmonise your palette. It's not an easy subject you have to just do what you think is right.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    I came across a good article a while ago, but I can't find it now ... I'll check on my computer at home this evening to see if I have saved it.

    In essence, it said that a good way to pick a colour combination was to get a photo of something, particularly something natural, and pick out the key colours from that. This will often (although not always!) give you a selection of colours that work harmoniously together, and then you can play around with saturation and brightness levels as needed. The key point was that the photo doesn't need to be in any way related to the subject matter of the website.

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stevie D View Post
    I came across a good article a while ago, but I can't find it now ... I'll check on my computer at home this evening to see if I have saved it.
    OK, one of the articles is The beautiful colors of the band of cats.

    There is another good example at trishacupra.com.

  6. #6
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    I'd recommend the book The Principles of Beautiful Web Design by Jason Beaird. A fantastic book, with a portion of it devoted to specifically color theory. I know that it tells exactly what emotions and connotations go along with it. Not only for color theory, but for an introduction into Web Design and just design in general, it's absolutely wonderful.

    Highly recommended.
    ~TehYoyo

  7. #7
    SitePoint Member JackWebdale's Avatar
    Join Date
    Apr 2012
    Location
    London
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Usually when you start a Web design your root of colour will be the brand (logo at a minimum). With this as a starting point it's fairly easy to experiment with complimentary or contrasting colours with tools like: http://colorschemedesigner.com/ and http://kuler.adobe.com/. That's not the end of course as it entirely matters how you use the colours, both in amounts, contrast, lightness, saturdation etc. But starting with some hue's that work (like a poster above me said about picking from nature photography).

    As for how colours make people 'feel' - there's some generic feelings that are applied to colours (red - power / blue - open & fresh) though these are very subjective and you can always manipulate them in ways to change those feelings.

  8. #8
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JackWebdale View Post
    As for how colours make people 'feel' - there's some generic feelings that are applied to colours (red - power / blue - open & fresh) though these are very subjective and you can always manipulate them in ways to change those feelings.
    I would disagree with that statement. There have been proven studies detailing exactly how colors make people which is why we use certain colors for certain things.

    TehYoyo

  9. #9
    SitePoint Member JackWebdale's Avatar
    Join Date
    Apr 2012
    Location
    London
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    I would disagree with that statement. There have been proven studies detailing exactly how colors make people which is why we use certain colors for certain things.

    TehYoyo
    It's not black and white (badum tshhh). There are proven studies of trends regarding colours, but not everyone feels the same about certain colours, certainly not down to an 'exact' set of rules. Those studies are focussed on high exposures to each colour, rather than when they are used harmoniously or complimentary with others.

    Take HSBC: http://www.hsbc.co.uk/1/2/
    And Barcleys: http://www.barclays.co.uk/PersonalBa...P1242557947640

    Would you say HSBC felt more powerful or passionate?
    and Barcleys more trustworty or intelligent?

    Not really. They are both global banks doing the same thing.

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JackWebdale View Post
    As for how colours make people 'feel' - there's some generic feelings that are applied to colours (red - power / blue - open & fresh) though these are very subjective and you can always manipulate them in ways to change those feelings.
    Yep, and I'd like to extend that statement and add the socio-cultural aspect as something to consider as well. Every culture uses color differently and each color has distinct meaning. An example I like to bring up when this question arises are sales. When something's on sale here, the price tags have a red, orange, or yellow(ish) background, thus these colors are often associated with "cheap" here, in Germany. One of the most popular book publishers here, called Reklam, have a series of books for students, all literature classics for which you normally would shell out at least 20 USD, you get for 1.50 USD. These books all have a yellow cover.

    As a consequence, using bright shades of red, orange, or yellow as the primary color on a German shopping site for a German audience, more than a few people will associate these products being either cheap in terms of quality, or reduced in price.

    Leslie Cabarga has a great, albeit somewhat brief introduction to global colors and their meaning. It's really good.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  11. #11
    Non-Member phillipturner's Avatar
    Join Date
    Sep 2011
    Location
    Boston
    Posts
    81
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Using the right color palette is very essential for any designers before starting a web designing.
    The two main reason why Color theory was invented are :-
    1) Communication of colors &
    2) Application of colors.
    I strongly recommend to go through this websites and you'll definitely learn something new & interesting in detail i.e. http://www.smashingmagazine.com/2010...ning-of-color/ & http://www.colorzilla.com/firefox/.
    Hope this will help you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •