Jamie Soon .com
Freelance Web Design Services ... and more!

Getting the right colors for your design

I usually spend a lot of time deciding what colors to use for a website. Sometimes I can keep trying out different color combinations and keep changing the colors dozens of times until I’m satisfied. Usually in the end I will come up with a few options for the client to decide. Getting the right color is even more important when I’m designing a logo, since the colors used will be the corporate colors and it has to look good not only in the website but also when its printed out. Colors shown on the computer screen might look different when printed out e.g. for brochures and name cards. For logos I will refer to a book with color codes “Pantone Guide to Communicating with Color” by Leatrice Eiseman. It has many different color combinations for different moods.

There are so many different shades to choose from. Blue, Ocean Blue, Light Blue, Dark blue, it can take hours to decide. Heck, I’m a designer and even I get confused how blue is cerulean blue, turquoise blue or sapphire blue ?

Fortunately, over the years through experience and a few years in college, I’ve realized there are other ways to get the right color for your website or any design work. Colors that not only look great but something that your clients will love which suits the products and services they are trying to promote.

Common Sense

Usually, figuring out what color to use for a website is common sense. For instance, if I’m designing a website that is related to preschool kids education, then I would use lots of bright colors. If I were to design website for a vegetable store, then naturally I would use green.

Getting ideas from the client

Some clients will tell you right away what colors they want. Then its up to you get the right shade. So if they tell you they want lime green and violet, you better use those colors. You can give them a few combinations e.g. maybe a darker shade of green or a lighter shade of purple etc. It would also be helpful if the client tells me what colors they don’t want. For instance I had a client who told me she doesn’t want the design to be too pink. I also had a client who wanted her website to match her office. She hired an interior designer so she already had a color palette of mostly browns and beige. Plus I had to match the website with her blue and yellow logo. Fortunately, browns and beige actually looks quite good with blue and yellow. You’ll never know until you start designing in Photoshop and experimenting with the colors.

Getting ideas from the customer’s office interior and customer outfit

Some clients don’t know what colors they want and leave it to me to decide. That’s when I have to pay attention other things like, the color of their office furniture, in order to judge what kind of colors the client would like. I had a client who had a nice office in Kuala Lumpur. They had a nice reception area, with nice spotlights and a big vase of orchids against a beige backdrop. The cubicles and chairs was green. So I figured if they hired an interior designer to design the office I should use back the same colors because its sort of like the corporate color, even though there’s no green or beige on their name card. The logo was purple color. So, its just the right combination, green, beige and purple. Of course I also offered other color combinations like light blue but they ended up choosing the green and purple design.
Sometimes I also observe the colors of the clothes that my client wears when we meet up, especially if she has a nice outfit on. One of my clients wore something like a white top with pastel orange thingy in front and a light green skirt. She wanted to make a website for her wedding cake business. So, naturally I used a white background for the website with some very light pastel colors for the logo, masthead and navigation bar. So, as a freelance web designer, you have to pay attention to your surroundings when you meet up with a client so that you can get clues and ideas on what they like. In fact, that’s one of the advantage of working with a freelance web designer, no middle man or salesperson to get in the way. If the sales person is the one meeting up with the client, not the designer, then a lot of information may be lost along the way.

Getting color codes from other websites

Getting colors codes from other websites is another quick way to get a nice color combination for your site. Before starting on a project, I usually do some ‘research’ like browsing through other websites that have a similar business nature to the one I have to design. If I see something I like, then I’ll save the page or ‘print screen’ the page and save it in Photoshop as a jpeg. Then I use the ‘eye dropper’ tool to sample the color on the image. It’s a quick way to get the exact hexadecimal color code e.g. #EFEFEF. In Photoshop and Dreamweaver color palette (if you select only web colors), the lightest grey you can get is #CCCCCC. For years I thought that is the lightest grey that I can use and I must strictly follow the web colors. But actually you don’t have to follow the color palette in Dreamweaver or the ‘web only’ colors in Photoshop, you can insert your own color codes. So by observing and learning from other websites, it will expose you to new possibilities.

Another way to ‘copy’ colors from another site is to save the page. Usually when you save a web page using Internet Explorer it will save not only the html file but an image folder will also be generated. There will usually be a CSS file embedded in that folder so you can open up the file in Textpad to look at the code, and extract some color codes from there.

Sometimes it is necessary to follow the color combination from another website, for example, if the company has a parent company which already has a website and the client requests that they want to use back the same colors. Its just to make the website consistent with the corporate image.

Sampling color from a photograph

Another common method to get a color reference is from books and photographs. When I was studying at design school we used a lot of reference material to create our artwork. Students would get ideas from magazine ads, ideas from reference books at the library and concept art by other artists. For instance, in one class, we would be shown a photograph on a projector, usually it will be a sunset scene or something with a lot of ‘light and mood’. So we had to memorize the image and then the projector would be turned off and we had to spend the next few hours drawing and try to recreate the same mood and feel of the original image. I guess this exercise was to train us to know what colors to use for different situations. Anyway, my point is, if you have no way of meeting up the client and you are just communicating through email, you can always ask the client to send you some photos. You can also refer to photographs of nature e.g. orchids and colorful birds and insects to get inspiration for that perfect color combination.

Color is an important part of the visual arts. Even though the client doesn’t have a professional training in design, they are humans and have a natural appreciation for the color. People make choices about colors every day from what color clothes to wear to what color to paint their house, what color fonts to use in their email etc. Therefore its only natural that the client give as much attention when deciding what colors to use for their website and its up to you, as a designer to give them a suitable range of colors to choose from.

back to articles mainpage


Top