Color Theory…In Quotes

Why Color Matters

“Sixty-two percent to 90 percent of people initially judge a product based solely on color.”-

“I’ve seen clients reject a site design because they didn’t like it. Turns out, they just didn’t like the colors! Grayscale comps allow designers to design the site using the appropriate contrasts without yet worrying about what colors the client does or doesn’t like, or how those colors are working together in particular areas of the site. Approve the design, then add color later.” –

Colors and Your Audience

“Color can affect everything from a websites brand (ie: CocaCola Red) to symbolism (ie: cool, subdued colors). Advanced applications of color can even be used to “classify” information within a hierarchy…” – EnvatoTuts+

“The brighter the colors, the more mental energy they will consume.” – EnvatoTuts+

Cultural Differences

“Colors obtain symbolism through cultural references in the culture you grew up in. Depending upon the culture, colors can have very different meanings and actually cause problems for your site. For example, in the East, white is the color of funerals while in the West white is the color of Weddings. If you were to design a Wedding site intended for an Asian audience and you used a lot of whites, you could be disturbing the people you’re trying to reach.” –

Readability and Organization

For text especially, colors are a great way too add that “something more” to a website. It also points the user in the right direction…

“A high contrast between elements makes text easily readable, and guides your reader’s attention.” – EnvatoTuts+

“Bold, contrasting colors on a particular element of a website will demand attention (such as with buttons or error messages or hyperlinks).” – EnvatoTuts+

This is also very popular with forms. One might see a text box colored green as the user enters valid input, and perhaps that same box will light up red if the input is incorrect.

Colors For Design and Layout

“Advanced applications of color can even be used to “classify” information within a hierarchy…” – EnvatoTuts+

“Contrast shows relative important. Dramatic shifts in text-size or color will impart a message that something is different and requires attention. Changing from a light background color to a dark background color can quickly separate the core content of a page from the footer.” – EnvatoTuts+

“For most kinds of websites, excessive use of bright, florescent colors can be abrasive and distracting.” –

Picture Selection

“Pictures can add a lot of colour and depth to web pages. Keep this in mind when working on the wireframes / early designs of a website, as if you’re using test content (‘Lorem Ipsum’) you won’t necessarily factor in images. Don’t overcompensate with colour at this early stage.” –

Never Use Black

“When you put pure black next to a set of meticulously picked colors, the black overpowers everything else. It stands out because it’s not natural. All of the “black” everyday objects around you have some amount of light bouncing off of them, which means they aren’t black, they’re dark gray. And that light probably has a tint to it, so they’re not even dark gray, they’re colored-dark gray.” – Ian Storm Taylor

White & Whitespace

“Reign in your color enthusiasm with a whole lot of white. Too many colors can create a sense of confusion.” –

By spacing out content units and blocks of colour you’ll help guide the eye to key areas. I’d wager that lightly-coloured landing pages with one brightly coloured ‘buy now’ button will convert better than a page featuring a mess of colour. Make that button stand out! Go on, try it…” –

Keep It Simple

“No more than three primary colors” – Specky Boy Design Magazine

Not All Monitors Are Created Equal

“Be ‘web safe’. Macs and PCs both render colours differently, as do browsers. You should use ‘web smart’ colours to minimise issues.” –

“No single device is capable of reproducing all visible colors” –

“If you’re using RGB screens, you can mix some very bright and saturated colors. If you have to print that out, your options get reduced to a limited color spectrum of a CMYK printer. And, if you saw a brochure printed with a beautiful Pantone colors, you’ll never be able to find them on screen – they simply cannot be reproduced by RGB monitor.” –

For the Visually Impaired

“… it’s always better to add something else visually in addition to color shifts. When the user hovers over a link, add a stroke, drop shadow, or anything else you can think of to make for an increased visual difference that doesn’t simply rely on a color change.” – Design Shack will let you put a color filter on top of your webpage and test it for different kinds of color blindnesses. You can also screen-capture your product and convert that to grayscale on an image editor and see if you can tell colors apart easily.” – Specky Boy Design Magazine

Also see: Web Aim’s Color Contrast Checker

Color Terms to Know

Hue – The hue refers to the position of a color on the color-wheel, each of which represents a certain spectrum of light. It’s what differentiates the primary colors of Red, Yellow and Blue, as well as all combination in-between. When you see the color blue, the term “blue” refers the hue. There are many forms of blue (light, dark, vibrant, and pale) each of which share the same hue despite being distinguishable in color.

Value – This refers to the relative lightness and darkness of a color. The value of a color is distinguished by its relationship to a scale of white to black. A light blue and a dark blue is an example of a single hue with two different values.

Saturation – This term refers to the relative “strength” and “weakness” of a hue. Colors with a higher saturation will appear more vibrant. Saturation should not be confused with lightness and darkness, which as stated above, relates to a color’s Value. For example, you can have a bright color that lacks purity due to the addition of light gray. The result is a light color with low saturation. On the same vein, you can have fully saturated colors that have drastically different Values. Colors are considered de-saturated as they near gray-scale and they hue itself becomes less dominant.

Color Harmonies


7 simple facts for understanding color theory

Basic Color Tools and More

There are a ton of tools available online for selecting color schemes. Some frequently listed ones on many design blogs include: Kulor, ColourLovers, Paletton, etc. Besides the finding colors themselves, additional tools worth considering include:

Ultimate CSS Gradient Generator

“CSS3 gradients are notoriously difficult to write out in code. Not only do you need to know the different colour values, you also need to add the various vendor prefixes to get it working across multiple browsers. The Ultimate CSS Gradient Generator makes it easy by giving you a Photoshop-esque interface to set up your gradient, then gives you the code to copy/paste.” – Line25

CSS Color Names

“If random color names aren’t quite your thing, maybe this list of 147 descriptive color names might be a little easier to remember in your stylesheets. View the full selection or see a random value with each click of the mouse.” – Line25

Color Hunter

“Colorhunter is another great service that allows you to upload your photos, and it generates a five color palette based on the photo provided. One different and cool thing about Color Hunter is that is allows you to click (or enter a hex #) for a color to search for it, and provides you a list of all the palettes (and corresponding photos) that contain that color” – CSS Girl

Check My Colours

Check My Colours is a web-based tool for checking your website’s foreground and background colors. It’ll check all stacked web page elements based on W3C’s WCAG recommended luminosity contrast ratio and color brightness. It’s easy to use: just plug in your web page’s URL, press “Check!”, and it outputs a nice tabular report for all elements.” –


Not sure where to get started? Canva’s “Design Wiki on Colors teaches you everything you need to know about colors, their meanings and the color combinations that will hopefully give inspiration to your next design!”.


About Juliette

Techy girl who also loves both technology and culinary arts. Programming and recipes are my thing! Currently learning about web development while taking a bite out of a delicious crusty piece of bread.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s