Navigation

How to Get a Professional Look With Color

Branding, Design, Web Design | Dec 21, 2009

What makes a design look coordinated, planned and professional? The answer is: ‘color’.

Not every project needs bland corporate blue to look professional. Planning color means creating a framework that describes which colors to use and how to use them.

Color is the slipperiest design element. “Good” color is so closely tied to elusive things like personal taste and intuition, as well as technical considerations such as contrast and monitor calibration.

But color is vital to content. If you consider a website important enough to spend time refining, then readers will likely consider it important enough to spend time reading. Good color choices make that happen.

In this article we’ll review some techniques to achieve beautiful color palletes for your web designs.

different hues can conflict, but different values of one hue work

The best way to make a website look unplanned is to choose its colors at random.

Even when visitors skim a website’s home page for the first time, the colors influence their attitude towards the content. Is this website exciting? Reassuring? Daring? Bland? Political? Formal?

Color affects how people interpret what they see as much as typography.

Finding the right colors isn’t easy, but the process can be systematic.

Good design strategy involves a color scheme (i.e. a range of colors selected to communicate a mood or message) and an arrangement of that scheme.

Let’s say you’ve been asked to design a professional website. (And this could very well turn into a drinking game: take a shot every time the client uses the word “professional,” “clean” or “modern.” Two shots for “I like this other website. Copy it.”).

The color scheme will depend on the particular nature of the website. For example, both banks and florists can have professional-looking websites.

But people might be less inclined to buy flowers from a website that is corporate blue and ocean gray. And imagine the Bank of America website in lilac and yellow-green.

A “professional” design tell visitors that they’ve found a website that takes its subject seriously, even if that subject is light-hearted. Whatever the hues and values, “professional” means coordinated, planned and thought out.

 

Go Grayscale

The best way to work with color is to start with none.

Removing color from a design reveals fundamental problems that should be addressed before worrying about which shade of chartreuse works best. If the design doesn’t feel right in black and white, then it’s time to make changes.

Does each page have a clear purpose? Does the design guide readers through the content? Is the content compelling, inspiring or informative? Are the headings clear? Do the links contrast with the other text? Color improves these effects, but problems in layout, type and organization can’t be solved by color alone.

To do a redesign, first suck out the color. The simple act of washing out over-saturated primaries really shows where a website stands. (Actually, you should really start a redesign by re-evaluating your goals and content, but that’s another story.)

Sometimes removing color is a solution in itself.

I once worked with a Web design company to redesign their own website. The owners were personal about the project and keen to get it right. But if you think designing for yourself is difficult, try doing it by committee. By the end, the three of us were staring at a screenshot of the ninth draft after-hours over a few drinks.

Abruptly, I flattened the Photoshop layers and hit “Desaturate” turning the vibrant copper-and-navy design into shades of gray. To everyone’s surprise, it worked.

By the end of the week, we had a “warm” gray design with red accents. We knew we had a winner when previous clients complimented them on the new look and more calls came in from prospective clients.

Analyze your color scheme with the Photoshop “squint” test:

  1. Take screenshots of at least three pages from your website. Open them in Photoshop.
  2. Duplicate the background layer in each screenshot (Layer → Duplicate Layer, or Command + J on a Mac, or Control + J on Windows).
  3. Apply a Gaussian blur of about 10 pixels to the new layers.
  4. Go to Image → Adjustments → Posterize. Use 8 to 12 levels or go to Filter → Pixellate → Mosaic. Use 15 to 30 pixels.

a quick analysis of a web page

This shows which colors are really dominant. The more dominant the colors, the more heavily the scheme is imprinted in the visitor’s mind.

Once the website’s layout and organization work without color, it’s time to choose a palette. But which one? And how much to use?

 

Align Your Hues

three properties of color

Color has three properties: hue, saturation and value (sometimes called lightness).

Saturation is how rich a hue is: neon colors are very saturated, while pastels are less saturated.

Value denotes how bright (i.e. how close to black or white) a color is.

Hue refers to which part of the rainbow a color belongs to, such as red or green; it’s the property that people trip up on.

Nothing kills a color scheme like clashing hues. A design can have a hundred shades of one hue, from pastel to neon, and still look planned. But if hues are mixed the wrong way, the scheme falls apart.

One way to avoid clashing hues is by separating them with a third color. A buffer of black, gray or white is safest, because grayscale is hue-neutral: you can coordinate any part of the rainbow with black, white and gray.

A second solution is to use the hues in different proportions. If a color scheme has, say, violet and brown, then the design could have many shades of brown with a few bright violet highlights.

Another option is to vary the values. Pure blue and bright cyan make a so-so combination, but dark blue (navy) and light cyan (sky blue) contrast enough to set each other off. Red and violet can be different enough not to clash but close enough not to look intentional. Light red (pink) and a dark violet bring distinction.

Unfortunately, avoiding a bad color combination isn’t the same thing as choosing a good one. A color scheme is successful not when you’re satisfied, but when your audience feels comfortable.

 

Discover Great Schemes

Where do great color schemes come from? With hundreds of colors and thousands of combinations, how do you decide?

Designers of small static websites should draw color from the content. That usually means photos.

The design of an eight-page website that I recently built was topped with an elaborate metal scaffold set against an indigo sky. Setting Photoshop’s eyedropper tool to a 5×5 average, I sampled the darkest and lightest parts of the sky and gave the sidebar, links, headings and footer those few shades.

When the client asked how we were able to design a website so well—and so quickly—our response was, “This is what we do.” But the color was already there. I just had to look for it.

While stock photos works for quick websites, designers of larger and more dynamic websites should seek inspiration from their audiences.

An excellent indicator of which colors are attractive to your audience is their daily clothing. Find out what your visitors wear, and you’ll know what colors make them comfortable. If your website is about, say, league sports, find out what people wear to games, rather than their day jobs.

If you’re lucky enough to get photos of your target audience, view them en masse; you want an average of the crowd. But if photos aren’t available, go shopping.

Clothing designers who are able to stay in business have excellent color sense for every mood and lifestyle. It doesn’t have to be 5th Avenue haute couture. A Google search for “camping stores,” “baby clothes,” “ski and swimwear” and “casual living” will reveal many good color combinations.

People wear clothes according to their tastes. If you use colors that they like, they’ll feel more comfortable on your website.

 

Use Textures

texture samples on the same hue

Slight variations in hue, saturation or value create textures.

Monochromatic textures (i.e. textures with only one hue) and patterns provide subtle dimension to most websites without clashing.

Simple texture backgrounds, in particular, are easy to build:

  • Take a photo of an interior wall, or something that is bare but feels rough.
  • Open it in Photoshop.
  • Duplicate the background layer and call it “texture 1.”
  • Fill the background layer with colors from your color scheme.
  • Set the “texture 1” layer’s blend mode to “”Soft Light” and its opacity to 30%.
  • Try it out on your website. If it doesn’t look right, play with the layer’s opacity.

The layer’s name is deliberate. You might play around with more than one photo, but avoid giving the layers names like “wall texture” or “paper texture.” You want to focus on the effect on your website, not where it came from.

 

Creating a Good Scheme

A good color scheme has certain characteristics. Think of it as a framework or set of guidelines to keep a design consistent. The scheme should:

  • List two to five hues that work well together,
  • Describe how far a design can vary from those hues,
  • Account for shades of each hue,
  • Work well against black and white.

Here’s an example:

step 1: choose hues for a color scheme

The designer began by choosing mostly warm hues that felt right. There was no logic, just the vague goal of “autumn” and her intuition.


step 2: apply different values of the hues

In Photoshop, two layers provided shades of black and white. Each layer’s blend mode was set to “Soft Light.” Pure black was too dark for the right-most color, so the black layer’s opacity was adjusted.


step 3: apply a tint over the whole thing

To unify the colors, a new layer was created and filled with pure red. Its blend mode was set to “Color” and its opacity cut to about 40%. (Note: the order of layers is very important. Colors will change if the “tint” layer is set below the black-and-white layers.)


step 4: select your favorite colors from the result

This gave the designer 15 colors to choose from. She picked four that had a range of tones and hues. Here, the colors are set against white.


step 5: make sure they work against black and with different shades

Variations are important, so the designer experimented. What would the colors look like against black? What happens if we shade them slightly?


step 6: play with the tint and look for other favorites

What if we changed them altogether? Using Image → Adjustments → Hue/Saturation on the “tint” layer creates a distinctly un-autumn feel, but the colors are still coordinated. Perhaps that palette can be used for Easter.

The end result is a color scheme: a reference that provides different (but not too different) hues and a range of shades that work well together. Download the sample file.

 

Use the Framework

Will tomorrow’s graphics, photos and icons work with today’s color scheme? What images will a website need in six days, six weeks or six months? It’s hard to say, but content is a part of your color scheme.

You could solve this problem by either making your images follow the color scheme or making the color scheme follow your images.

Enforcing your color scheme, even with photos, is a great way to achieve a unified look across all pages.

The easiest solution is to find images that fit your scheme. Remember that a color scheme allows for wiggle room: as long as an image’s major hues fit, the image should work. Many stock photo websites let you search by color (meaning hue: usually primaries like red, green and blue).

If an image doesn’t fit your color scheme, give it a tint:

  1. Open the image in Photoshop.
  2. Create a new layer. Set its blend mode to “Color.”
  3. Fill that layer with one of the colors from your palette, preferably the one that most closely matches the image.
  4. Set the color layer’s opacity to 50%.
  5. Play with the opacity until you get a good balance between the image’s original color and your website’s color palette.
  6. This technique works for photos, illustrations and icons—anything pixel-based. (If you don’t own the image, be sure to obtain permission before altering it. You may be improving its appearance on your website, but you’re still taking liberties with someone else’s art.)

 

Looking Professional

No set of colors looks “professional” in and of itself. Rather, you have to follow a process to reach a coordinated, planned feel.

No matter what the website is about, the audience will know it takes itself seriously.

Tips

  • When you think you have a good color scheme, try it out for at least one week. Evaluating color requires intuition that builds over time. Give yourself time to fully absorb the scheme’s personality.
  • When you think you have a good color scheme, don’t let it go stale. Your visitors’ tastes, like yours, change over time. Make a note to review the colors after four months. Then ask, are they still appropriate? If not, what has changed? What factors will influence your adjustment?
  • Use brilliant colors sparingly. A splash of something iridescent will draw visitors there, but if they see it everywhere, they’ll wander aimlessly.
  • Some people think color schemes have a narrow range. Allow some leeway to give your designs added depth.
  • Avoid pure primaries such as red, green, blue and yellow. Give them a tinge for real character: red, but slightly violet, blue with a touch of green, “warm” yellow with an orange tint.
  • Make sure your colors work when faded. If you choose red, be aware that light red can be feminine and dark red can look like rust or blood. Yellow runs from faded sunlight to dark brown. Dark blue is mysterious, and light blue is tranquil—or electric if you oversaturate it.
  • Mac users, set your screen. Go to “System Preferences” and click “Universal Access.” Set your display to “Use grayscale.” This also comes in handy when you’re in the mood for film noir.
  • No matter how active you want your website to feel, use a neutral background. Black, white and gray work well with almost every hue.
  • If you want small text (say, 14 points or less) to match a large field of color, make the text a few shades darker than normal. This will offset the light counters inside the characters.
  • Use more shades of fewer hues.
  • What “looks good” is intuitive. But intuition is a battle between your ego, your audience’s pickiness and the authority of the people funding the project.
  • Use muted backgrounds to make content stand out:


    using contrast to make content stand out


Written exclusively for WDD by Ben Gremillion. He is a freelance web designer who has learned that a deadline’s inflexibility is inversely proportional to the number of features requested at the last minute.

How do you create successful color schemes?  What works and what doesn’t work for you?


Share this post
Comments (no login required)
  • http://www.shayhowe.com Shay

    Sweet article!

    Colors have a huge impact when it comes to the tone of a website, getting them right is crucial. I’ve seen great websites ruined by a poor choice of colors and vice versa. It is also very important to choose fitting colors when working with a logo or other branding elements. The same guidelines explained within this article still apply.

  • http://www.blogrpro.com BlogrPro

    Well said. I am following things that you have said here. But some of the photoshop tricks here are new one to me. Glad to follow these new tips too.

  • http://www.imawebdesigner.com Luke D

    Very good article! Colour plays such a huge role in the feel of a design, great to see such a detailed explanation.

  • http://pieterbeulque.be Pieter

    First step in creating colourschemes to me is browsing Flickr. I look for pictures that give me the mood I like to create with the website. Next step is selecting ‘random’ colours from the image of choice. Not all together random, but fitting with each other. Then I play with hue, saturation and brightness.

    And tada, a nice colourscheme has been created.

  • http://www.rohnerstudios.com Angela

    Great article! Colors can really make or break a design. Thanks for writing this Ben! Lots of valuable, detailed information here.

  • http://www.doublejdesign.co.uk/ Jack

    Nice article. Really useful and professional analysis.

  • http://designinformer.com Design Informer

    Excellent technique. I appreciate the detailed write-up about colors. It’s something that can definitely make or break your design. (The color choice)

  • http://www.inveve.com creative_blondes

    Nice. That colour scheme really showed me how to do the trick. Thanks for sharing this.

  • http://coder-zone.blogspot.com/ Berny

    Great article!
    Color matching and scheme creation are two of my most undeveloped skills.
    You shed light on me, hehe, thank you!!

  • http://www.dillidesign.com Dillidesign

    Very true color combination makes a huge impact be it website or print designs

  • http://airopia.org Tom – Airopia

    Well done. I liked the grey scale and hue parts.

  • http://www.literaryspring.com Rebecca

    Great article. Large amounts of highly saturated colors can be eye catching, but they can also be blinding and tend to people’s attention all over the place rather than the focus of the page.

  • http://www.aledesign.it aledesign.it

    Is an article really good. Important for every designer. The guidelines in this post are important for create a good work and a good

  • http://www.lucascobb.com Lucas Cobb

    Great read. Color is really important and you brought that to light in this post. A+ job.

  • http://www.afdeling18.dk Søren Sprogø

    Great article! Nice to see some Photoshop tips integrated into it, very rare but extremely usefull.

    Here’s an extremely (over)simple exercise I’ve used multiple times with clients, that has trouble explaining what they want to communicate with the design of their website (…not just “being professional”):

    1. Ask the client “If your company was a car, what car would it be?”

    2. Ask them to come up with examples, and explain why they’ve picked that car. Fx. “A Toyota Pickup, because it is reliable, sturdy, gets the job done”.

    3. Write down all the words they use for explaining why they’ve picked that particular car.

    4. Find a “Color Dictionary”-book. Not sure what these are called in English, but they are basically books where you can look up a word, and it will tell you what colors are typically associated with that word. Fx. Red is associated with love, war, aggression, blood.

    5. Pick a suiting color scheme from these colors.

    I know this sounds a bit too simple, especially if you have a degree in design. But this simple method has helped me out several times getting clients to tell me what they want to communicate, and translate that into colors.

  • http://www.moabi.fr/ moabi

    Brilliant…
    Thanks for that

  • desiree

    this was cool!! :D

  • http://www.mushroomdigital.co.uk website designers

    Excellent article. Picking the correct colors for your design is key to the websites success. We always use http://www.colourlovers.com/ to pick our color schemes. Thanks

  • http://pcw.me Philip

    Great Article !!!1

  • hellsing

    Thanks, good article!

    I usually start with Pictaculous (http://pictaculous.com). Upload a logo design, a product picture or any kind of photo and it gives back the most typical colors of the original picture and an Adobe swatch, too. Thats a good point to start from.

    I also recommend the Color Harmony Workbook – I have the Rockport Publishers edition from 2001. Some color theory and lots of help for the practice: color charts, schemes, etc.

    • http://nettsett.no Marte

      Fantastic tool!

      And great article!

  • http://www.bluemag.es Bluemag

    Great post!!, very useful

  • http://fensonism.blogspot.com Fenson

    Excellent post. I especially loved the unifying color part. Deciding colors is very crucial to kick off a design.

  • http://www.binaryhaiku.com Todd Wallace

    This is one of the best articles I’ve read in a long while about color schemes. Thank you.

  • http://www.jilliz.com Daniel

    Congratulations!

    This is what I called a professional article. From explanation to PS tips everything was great.

    I that what @Søren Sprogø is called Color Association. I found something here:

    http://en.wikipedia.org/wiki/Color_symbolism_and_psychology

    Cheers!

  • http://www.bloggerden.com/ Blogger Den

    Colors hold a huge amount of professionalism on websites today, and this is just another great article to prove so. Thanks for sharing!

  • http://www.operationtechnology.com Brad

    Good post. Colors really make or break a design.

  • Mr Fussyfont

    Thank you thank you thank you! This is actually the best article on colour that I have ever read (I haven’t read that many, but still…)

  • http://www.webdesignerdepot.com Hardeep

    This is one of the best articles I’ve read in a long while about color schemes. Thank you.

  • Taha

    Thanks. very useful article with lots of ideas. I usually pick color ideas from color communities such as kuller and colourlover but i will definitely try your tips for my next site.

  • http://ronrockt.wordpress.com Ron

    This is a very nice and useful read. Good work!

  • http://mdmi.blogspot.com J Broström

    Great article with some very useful tips!!!

  • http://www.kaplang.com/blog Michelle

    really good article, colours should be the foundation of a good design :)

  • http://design977.com Pusparaj

    That’s what i think. :)

    • http://bytes.com Calculated Information

      really good article, thanks

  • http://www.kleck.co.uk A2daK

    Great post. I’ve always kept my eye out for something similar to read about but never found something so original and logical. This one’s a print-off!

    Thanks

  • http://www.martinstanek.cz Martin Staněk

    Nice post, however in section “Align Your Hues”, you use wrong terminology. HSV and HSL are two different color schemes.

    HSV – hue, saturation, value (100% value is not always white)
    HSL – hue, saturation, lightness (100% lightness is always white, no matter what hue or sat.)

    HSL is symmetric in spite of HSV (also HSB) color scheme…

    Martin

    • http://www.benthinkin.co.nz Ben Gremillion

      Good point, Martin. Technically, when dealing with lightness, very light or very dark colors have a lower range of saturation; colors with high or low values can be just as saturated as their mid-tone counterparts. Photoshop and related books tend to use the two interchangeably and, in this case, so did I.

      My point was that clashing hues causes more problems than clashing values, which holds true for HSL both HSV. The two models are similar approaches to solving problems in color selection.

  • http://www.squiders.com Maidstone Web Designer

    Great article and god bless Kuler

  • http://themegamag.com Fatma

    Thanks this was very informative .. I use mostly colourlover to choose my colors but I will use some of the tricks here for sure .

  • http://www.bwired.com.au Steve Martin

    Great article… Picking a right colors is really a great decision, since its a biggest part of success for a website and also the pretty color makes pleasure to the reader … thanks for the ideas :)

  • http://www.nopun.com Noel Wiggins

    I subscribe more to the Van Gogh’s color theory, “just pick em at random”.

    Every time I have used a color harmony palette, or did any thing specific to color it then opened a whole can of worms with my client, where now they discredit my instinct and they begin to want to try a number of color combination, like we are sharing a box of crayons in kindergarden.

    I have to admit that I use the color guide features a lot in illustrator CS4 But I try not to over-think color too much because it seems that every time I do the client recognizes it and then the rounds of revisions grow into the dozens.

    Of course this could be that I don’t yet understand color as well as I should so maybe the fault is in my coloring.

    great now I know what I am going to do today…

    Thanks and Regards

    Noel

  • Marshall

    Great article and tips! This will definitely come in handy.

  • http://www.empfehlenswert-wien.at wien

    great post, thanks

  • http://barneyandjules.com scott

    great article. Color is the building blocks of superior design. I know a lot of web designers don’t generally work with Illustrator, but their color guide is extremely helpful for choosing some base colors.

  • http://www.classesandcareers.com/ Teacher Teacher

    Useful info here – more of us should pay closer attention. I saw a website just last week where they implemented the color variation. They just put the bright color on every other word in their sentence and it made no sense as the words that stood out did not go together. Important to look at our own designs with a critical eye and see what the element of color is communicating to others.

  • http://graphicdesignblender.com/ Preston Lee

    Also, when talking about colors, I’ve noticed that people think a color like green and red contrast simply because they are complimentary colors. The truth of the matter is, if they share the same value, they get muddied together anyway and still don’t work well.

    I would say value is almost more important than hue when it comes to color schemes.

    • http://www.benthinkin.co.nz Ben Gremillion

      In my experience, people who pick color arbitrarily don’t realize that choosing a primary is just the beginning. A touch of other hues can reveal cool reds, warm greens and an entire spectrum of blues.

      Differing one’s values is certainly a good way to solve the clashing hue problem. Another way is to carefully control the amount of each hue: Lots of green with select red highlights will soften the blow.

      The worst offenders may be similar reds and greens, as they’re related to the most common forms of color blindness. Hue alone isn’t reliable. Value, shape, texture and context are other solutions to tackling muddy colors.

      Or we could choose better hues to begin with.

  • http://sideradesign.com paul

    I learned a lot , this must be one of the best articles of 2009
    thanks!

  • http://www.DigitalOvercast.com kien

    great article! Never thought about using gray scale to evaluate flaws in the design and it’s so easy too (i design in PS)!

  • http://www.houmedia.com Alysia

    Awesome article. Will defiantly employ the photoshop layers trick. Thanks so much for sharing.

  • http://www.copperbot.net CopperBot

    A completely priceless article! Thank you SO VERY MUCH for sharing this!

  • http://www.iconfinder.net Martin LeBlanc

    Great article – I was looking for some help for picking the right colors.

    Thanks.

  • Zach

    Great article! Really well written, and very thorough. Thanks for the tips!

  • http://skriki.deviantart.com/ Igor

    Thank you so much!

  • http://premiumthemeclub.com/ PTthemeclub

    superb information and quite colorful information too.anyway thanks for the guide

  • http://www.olliecrafoord.se Ollie Crafoord

    This is a cute and useful tool:
    http://colorschemedesigner.com/

  • http://night-fairy-tales.blogspot.com/ SMiGL

    Helpful article, thanks!

  • http://www.chazzuka.com/ Bali Website Design

    Awsome tutorial, most of the times i search through adobe kuler nor colourlovers trying to find the palette pattern close to my needs

  • Simon

    Thanks a bunch for this!

  • http://www.solidconsulting.be Tim

    Great article!
    In response to the pictaculicious response. The website appears to be down.
    I use a similar approach via this website: http://www.degraeve.com/color-palette/index.php.
    Basically it allows you to upload a picture, and it generates a colourscheme out of it.
    Have been very happy about it!

    Greetings,

    Tim

  • http://www.techdoom.de goozer71

    Simply a Great Article, Thanks a lot for these suggestions, colors are the Primary way to taste the life and all the beautiful colored things we can observe everyday.

  • http://www.jazio.net Jazio

    Another great tool for designers is http://kuler.adobe.com/
    This is the web-hosted application for generating color themes that can inspire any project. I use it too…

  • http://www.workbysimon.com Simon Carr

    This is a really great technique for creating color schemes…

    Many websites will have certain elements (photos, logos) that will guide the color scheme. In this case, just using the eyedropper tool in photoshop to grab a few colors is a good place to start. Then using the methods for tinting / color shifting in this article will work for generating some different palettes.

  • http://www.moinid.com Creative Ideas

    Amazing article. Thanks for the technics

  • b213958

    Working with Color

    http://www.lynda.com/home/DisplayCourseNoTabs.aspx?lpk2=83

    Working with Color with Bruce Heavin is a movie-based tutorial designed to help anyone understand the basic principles of color relationships, especially as they relate to digital design and/or composition. Part one of the training begins with a 47-minute lecture on color principles featuring value, hue and color relationships. Part two of the training involves a workshop covering digital color mixing, shifting, saturation, tinting, shading, hue, toning, the creation of swatches, personalized color systems and more. Step-by-step instructions using Adobe Photoshop guide you through a number of exercises so you can learn at your own pace.

  • http://strange-de-javu.blogspot.com jamie

    Very stunning article.

    this is very fundamental concept for creating a website.
    thanks for sharing to us,

  • http://BigTunaInteractive Adam Hermsdorfer

    That’s a solid tutorial and process to picking out the right colors. Do you use any color palette tools as well?

    • http://www.benthinkin.co.nz Ben Gremillion

      Most of my colors schemes come from photos used a given project, my imagination or from taking long walks. I keep a small camera handy to capture interesting textures, colors or vintage type. You never know what you’ll find after Gaussian Blur, Posterize and Mosaic in Photoshop.

      Sometimes I use Adobe Kuler (http://kuler.adobe.com) for inspiration, but often tweak their color schemes quite a bit.

      On the Mac, Hex Color Picker (http://wafflesoftware.net/hexpicker/) is a great plugin for snapping hex colors off the screen with any Cocoa-based app.

  • http://www.boraacemi.com BORA

    Great article! Keep up the good work!
    Best wishes.

  • http://www.vialdesign.com vialDesign

    There are some great tips in this article. Developing color schemes based on photos is the safest. Not only photos that are used in the design, even though that will help the design feel balanced and put together.

  • Thinkphotoshop

    Great article! Very nice techniques!

    Muchas gracias!

  • http://www.giordanopiazza.com/blog gyo

    very nice article!
    thanks

  • http://[email protected] mark hardy

    Great article, now I just need to convince the client why their favorite red doesn’t work with my layout.

  • http://psdxhtmlycss.com Psd xhtml css

    I am a lucky man… my designer make these jobs

  • http://www.demogeek.com DemoGeek

    That’s well composed and well explained Ben. The issue that I notice is that different monitors have different way of expressing the color. If I design on my MacBook it looks terrible on my 22-inch monitor and vice versa. The same goes for my Windows 7 laptop as well. There are so much differences between them I normally end up going with a color that I have to compromise.

    Any suggestions on how to overcome this and how to arrive at a color combination that looks best across these different monitors?

  • http://benthinkin.net Ben Gremillion

    Color calibration is a topic unto itself. The type and age of a monitor create slight (or not-so-slight) color shifts in an image. So do lighting and viewing angle: The same page in a room with studio lights will pale on a screen under office fluorescents.

    The answer is, as you suggested, an average of what works on the most monitors your concerned with. I don’t think it’s possible to account for every possible display that a graphic or page will appear on, but you can check for a range of variations. Kudos to you for caring enough to check on different screens.

    The technique I use is to test several combinations on different screens at once. I’ve written some notes at http://benthinkin.net/articles/quick-color-calibration .

  • http://www.mushindesign.co.uk Martin (@martin870)

    A great article on a subject I really need to brush up on. I’ll be taking some good techniques from this, thanks!

  • http://www.ehandy.de Robert P.

    very comprehensive and infomative post, thanks for sharing!

  • http://blueprintds.com chicago web design

    Great post! We keep a hard cover book on color theory in the office just for information like this. Thanks, Im going to add this to the trusted resource list.

  • http://www.inzencareerservices.be Frank

    Super Article!! Very useful for a starter who only knows 9 colors…. ;)

  • http://www.tawatchanan.com tawatchanan

    Greate Article! It’s very useful for beginner to professional web master. I like it.

  • http://www.handy-handy.com Nguyen

    The magic of color! Great tips.

  • http://deepikadutta.wordpress.com Deepika

    Few weeks back I had written a blog about “How to design a logo – Basic principles/ Best practices” in which I touched upon the color combination’ at high level. Ben, it’s good to see a detailed version.
    I know few designers who would take these color palettes literally. To be sure that you have understood this process of developing color palettes, try creating a new one yourself. That would reflect your creativity and knowledge grabbed from this post.

  • http://www.chrisjanus.net Chris Janus

    really fantastic points about desaturating a design and using the ‘photoshop squint test’ – i’ll definitely be keeping those in mind with my next designs. paying attention to the audience’s clothing regarding color is also a great idea. thank you for the article!

  • http://www.msintermedia.com Joe

    Great tutorial and well used colors. I am excited about trying these tips for my own website. You might want to have a look at my site. Its regarding web designing and stuff.

    Thank you

  • http://www.uvinternational.in kanmani

    Thank you….Very useful article……..

  • http://www.artisani.be ARTisani

    Thanks for this great explanation. Colors are so important for web design.
    I will try to use your explanations in my next design.

  • http://rikhopkinson.com Rik Hopkinson

    If the client has good branding to go off I normally start with the logo for the initial base colour(s) – Then normally grab the rest from images that will be used in the big banners. Then I base the rest on complimentary and tertiary colours. Once I have an idea I always have a quick scan through colourlovers.com :) then normally select a 5 based palette.

  • http://www.ivanovandrey.net/ ivanovandrey.net

    Thanks! Good help for me!

  • Anonymous

    The answer is “colour”.

  • http://www.squiders.com Web Design Kent

    Great tips as ever… long live Kuler!

  • Janine G

    Great post!!! I will defiantly be referring back to this in new designs.

    Quick question: Most of my designs are for my employer, who already have set colours= teal and darker teal. I dislike our colours and find them very limiting. But, they are not changing (I asked).

    Do you have any tips for designing with set colours or a tutorial you would refer to?

    • http://benthinkin.net Ben Gremillion

      With two colors locked in place, two questions spring to mind. First, how much contrast do you want? Light or dark, teal tends to feel cool. Desaturated greens would create a calm, low-key color scheme. Pure blue and navy might not provide much variety; purples often provide decent, if less natural, contrast. If you want more contrast, orange and red-orange are natural compliments.

      Second, how often do you have to use the company colors? Just because they’re required doesn’t mean they’re required everywhere… unless your employer has that much sway.

      What are the colors, exactly? Can you give us the hex or RGB values? Also, what are the goals–what mood do you need to create?

      • Janine G

        Thanks for the quick reply!

        Here are the colours in RGB:
        lighter teal: 0,189,170
        darker teal:0,140,125

        I work for a genetics lab that does clinical testing. We are marketing to the MDs and genetic counselors who order our tests. Our goal for advertisements is to create a mood that shows we are scientifically competent, have high standards and care about the patient behind the samples. (is that too abstract…?)

        The first thing my coworkers say when I show them a new ad is “are these are right colours?” Ensuring the correct colours are being used is a discussion that occurs every time a new ad is made. Most of the designs I’ve made to date have had a light, creamy yellow as a second colour and I’ve been pulling the teals for headings, etc. It works, but I’m not sold on it and feel there is a better colour scheme out there.

        Thanks for your help!

      • http://benthinkin.net Ben Gremillion

        I’d like to discuss this directly. Would you please send me a note at http://benthinkin.net/contact ?

  • http://limechalk.com LM

    Great post! It’s amazing how a design uses a lot of colors yet still look very professional. i’d love to see a collection of such, corporate webbies but never bland in web design.

  • http://wordpress.themeshq.net/ WP Themes

    Fantastic article! Thanks for the tip of the color scheme. It is always nice to know what colors blend together well! And also the contrast of text with the color of the background!

  • http://www.cameleonconcept.com Webdesign Köln

    Thanks for this great info.

  • http://www.linkmesh.com/ Linkmesh

    Seems to be interesting and insightful information.

  • http://www.lifeimitatingdesign.com/lid/horse-race/ Graphic Design Blog

    As a designer that usually works in a limited palette, this tutorial is brilliantly useful. Thanks!

  • http://www.cereal.cl Diego

    Nice post, useful information :)

  • kim

    Brilliant and exactly what I needed! Thank you

  • St Remy

    Thanks for Sharing….Clearing writing!

  • http://mcarrimages.com Michael Carr

    I love this line: “What “looks good” is intuitive. But intuition is a battle between your ego, your audience’s pickiness and the authority of the people funding the project.”

    This was also simple and helpful: “Use more shades of fewer hues.”

    Nice article! Thanks for the tips.

  • http://kittyloafdesigns.com/ Debra

    Fantastic article! Color can be a nightmare and a live saver, depending on how good your eye for design is. This has some great processes to go through to feel out the perfect set of complimenting colors to work harmoniously on your site design.

  • http://creativedreamstudio.com Laurie Caradonna – Creative Dream Studio

    I love Pieters Technique of finding and creating his color schemes with flickr – very cool idea.

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

    Very nice tips. Thanks so much for sharing.

  • http://www.morganandme.net Morgan and me

    Colour is perhaps the fundamental to design, everything else becomes secondary. This is worth a bookmark!

  • http://www.watchirobot2.com/ mickael

    Thank you for this great article, I still have some issues to find the right light colors which go with this one: #243B96. I know it is pretty dark, but i cannot choose. is there any tools to find it?
    TIA

  • http://pixelbot.org.ua Nik

    Great article. Really useful thanks for sharing.

  • http://www.fajasshapewear3.co.cc fajas colombianas

    I like the color combinations that you chose. Thanks for the tips.

  • http://www.creativedevelopment.com.au Robert Steers

    Really great set of ideas here…. I love the squint test. This is really good to show our graphic designers..

  • http://www.fotografieren.net Thomas Panzau

    Nice article. Thanks for the tips.

  • http://www.eyebridge.com.au/ Eye Bridge

    really nice article, Thank you very much for sharing