ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Design Basics: Colour Schemes 101

Updated on June 18, 2008

Have you ever walked into a room that made you feel cold, even on a sunny day? Or perhaps a place where you feel cosy and comfortable no matter how horrible the weather was outside?

I'd bet a large part of it was due to colour. It might seem obvious to the designers, artists and decorators out there, but if you're not immersed in colour theory as part of your work, the influence of colour on mood and environment isn't necessarily an obvious one.

Colour Wheel

The colour wheel on the right should be familiar to most people. We've all been exposed to the basics of colours and how they interact in primary school when you did your first painting in art class.

But when it comes to choosing a colour scheme for your living areas, your website or anything else for that matter, we all tend to gravitate towards colours that speak to us. Taste in colour is as different from one person to the next as a fingerprint. True - our choices can be influenced by external factors, but time and time again, we move back to the ones that appeal to us.

So why should you be aware of the influence of colour? It's simple. Something that appeals to you as a person, might not appeal to the visitors to your website or the person looking at your product catalogue. Uh-oh ... so even before they read a single word of your brilliant copy, they've formed an opinion based purely on colour.

There has been hundreds, if not thousands of books and websites published on colour, colour theory, choosing colour schemes and the like. But if you're just looking for a colour scheme for your website or marketing brochure, trawling through all of that seems to be a bit much.

Trying to cater for the hundreds of different tastes would be a nightmare of epic proportions. Hence the need for a bit of shrewdness and savvy when it comes to choosing your colour schemes.

The key concept here - no matter which colours appeal to you - is ‘Harmony'. Do your colours work together to give the reader a good experience? Do they complement or detract from your product offering? Do they draw people in or push them away? These are just some of the questions that go into making colour work for you.

The medium you work in also has an influence on colour choices. Is it for on-screen viewing or a printed brochure? But that is an article all on its own.

As a web designer and computer graphic artist, most of my work is for on-screen viewing. Therefore, I need to make sure that whatever design I come up with doesn't make your eyes bleed when you look at it. But it's right here where the first hurdle needs to be overcome.

Web Safe Colour Palette

The image above is the standard 216 colour ‘web safe' palette. Even with 216 colours available to me as a web designer, the format it's presented in often leaves me going ‘huh ... where do I start?'. From a personal perspective, very few of those web safe colours appeal to me. And from bitter experience I know that if I'm working with something I don't like, it impedes the creative process and I spend days on trying to get the design to work. With monitors now able to display ‘millions of colours', I'm no longer limited to just working with those 216 web safe ones.

And here's my little secret: I turn to Mother Nature for inspiration. I have never seen a landscape that didn't work in colour harmony. Whether it's a stormy desert or a tranquil ocean, a field of wild flowers or even an urban setting, the colours you see around there work together in a manner that is difficult to just thumb-suck out of the nothing.

This is how I do it.

Step 1: Find an image or photograph that you like

There are many sources of images and photographs on the web. Google Image Search or even the search on a stock photography website will in all likelihood present you with at least one image that appeals to you. There's no need to dissect and analyse why it works ... just go with your instinct.

Once you've found an image, copy it to your computer. We are not going to use the image in our design; it's only as there as an inspiration for choosing a colour scheme. If you are going to be using the image itself, ensure that it is not copyrighted or that you have a license to use it in your work.

Step 2: Picking colours using the Eye Dropper tool and Zoom feature in Photoshop

Here's an example of an image that inspired the colour scheme below it. That's right - 33 colours that I can mix and match to create a design that works together.

But wait! The image is all oranges and yellows, where did all the other colours come from? It's for this very reason that I use photographs for inspiration. Even if the overall look of the image above is warm and sunny, there are hundreds of shades and colours hidden in it that work together.

My secret weapons: The Zoom feature and Eyedropper Tool in Photoshop.

If we zoom in to the maximum level on the image above (1800%), small colour details that are hidden from obvious view are revealed.

See? There is a smidgen of green in the flower image that we wouldn't notice if we hadn't zoomed in. Of course, I could have randomly chosen a green from the colour wheel and hope like hell that it worked with the general hues and tones of the oranges and yellows in the image, but unless you have a really good feel for colour, this is usually a hit-and-miss operation.

So that splash of green gave me the first 3 colours in the top bar of my colour scheme.

Next, I zoomed out again and picked colours from the image - some yellows, oranges and browns from different areas on the image. As these are the overall colours of the photograph, I decided to pick a range of colours shading from light yellow to orange to give me a nice overall representation.

In the final step, I zoomed in on some of the darker areas of the image to find the reds and browns that make up the last couple of colours on the top bar. Once I've picked a colour from the image with the eyedropper tool, I create a new layer named ‘colourscheme' and colour in a block of that colour I picked.

At the end of this process, I usually have about 16 to 20 colours from the image on a separate layer.

Step 3: Building the colour scheme

Now that you've got your range of colours, it's a matter of personal preference about how many colours you finally end up in your scheme.

Take a look at your blocks of colours. You'll usually see one or two that don't quite seem to fit the overall ‘feel' of the scheme - those are the ones that you would typically delete from the final colour scheme.

Once your happy with the final selection of colours, duplicate the layer they're on. Now set the opacity of that duplicate layer to 50%. Voila - you now have an additional set of colours, based on the original ones that give you tones and harmonies that will work with the ones you picked from the image. And finally, duplicate the colour layer once more and set the opacity of that layer to 20%.

And there you have it - an entire palette of colours that work together.

One image, two different colours schemes

In the following colour schemes I worked with a photograph of rusted rivets. Remember, I mentioned that even an urban landscape can yield colour harmonies that work together, even if it doesn't look like something that Mother Nature would dish up.

In the image above, there is a myriad of colours spanning the entire spectrum from yellow to purple. I chose one or two colours from each colour family. But, this same image can be used to create a more monochromatic scheme with perhaps one or two alternate highlight colours.

Here, I focussed my colour choices on the blue portions of the image. For highlights, I could have gone with the greens, oranges or yellows instead of the purples and still have ended up with something usable.

As you can see, in just one image, there is the inspiration for multiple colours schemes that can work together.

Final Thoughts

Like any language, colour can either help to bring people together or push them apart. It all depends on how it's used. I've revealed my secret for creating colour schemes, but there are just as many other valid ways of getting to something that will work.

In most corporate type projects, the colours you are given to work with will be dictated by the corporate identity standards or the logos you're given. Don't despair. Even within those images, there are hidden complementary colours that can bring your work to life.

Have fun and play with it. You've got nothing to lose.

PS: And here's another colour scheme. For no other reason than the fact that I really liked the photograph *smiles*

The images used in above colour scheme examples are all licensed for non-commercial use and were found on www.sxc.hu.

Comments

    0 of 8192 characters used
    Post Comment

    • ClipMasters profile image

      Clipmasters.com 

      5 years ago from Dhaka, Bangladesh

      Great Photoshop tutorial. it really helpful for every on who need to know about color.

    • profile image

      Sherrie 

      6 years ago

      Designing some brochures for landscape photography business. Info & illustrations very helpful. Thanks

    • profile image

      truemitra 

      7 years ago

      very nice hub...!

    • eonsaway profile image

      eonsaway 

      9 years ago from New Mexico, USA

      Really like the way you write, it seems like it just flows with ease and comes out pectect.

    • Joni Solis profile image

      Joni Solis 

      10 years ago from Kentwood, Louisiana

      Great hub. I also like to pick colors from photos.

      Did you check out http://www.colourlovers.com/ Colour Lovers is a wonderful site to view tons of great color combinations.

    • Lady Luthi profile image

      Lady Luthi 

      10 years ago from San Francisco

      Awesome Hub!

    • livelonger profile image

      Jason Menayan 

      10 years ago from San Francisco

      Impressive!

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)