WEB200 > Color Theory for the Web
Trust me… If I wanted to go see the circus, I would. So… don’t let a clown design the color palette for your web page.
The more colors you add, the more chaotic a web page may become. Colors will also convey or not convey the branding of the company in your web page design.
The Influence of Color
As a web designer seeking to offer a message to your audience, you will find that you will need to understand the psychological effects, cultural influence and gender issues associated with colors.
The appropriate use of color is a significant piece to visual communication. Color can be just as, if not more, persuasive to the human eye as imagery and text. Therefore, the colors you choose for your web page need to be appropriate to your overall message.
The influence of color on human emotion is a complex relationship involving numerous factors:
- Psychological effects
- Cultural influence
- Gender bias
Choosing Your Colors
Each element of the page can have a different color specific to its function on the page. But, together they must be a cohesive family of colors.
The background is the backdrop or canvas against which all of the content and information appears. It should make an impression on the viewers and relate to the story but not detract from the action on the stage.
2) Body Text & Headlines
Your text must be easy to read! Pick a color that reads well on the background you have chosen.
Most typefaces were designed for black ink on white paper. So, shapes, proportions and stroke weights of their characters must have a high contrast between letter and background. This serves to increase readability.
The user should be aware of the navigation but not distracted; non-distracting color from the palette should be used.
Establishing rules for navigation via color will help overall consistency.
Creating Color Palettes
Creating a color palette from scratch can be difficult at best. I recommend using a pre-existing palette to start with.
COLOURlovers™ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color – whether for ad campaigns, product design, or in architectural specification – a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews
- Creating Consistently Colorful User Experiences | UX Booth
- Adobe Color Palettes | Kuler by Adobe.com
- Color Palette Creator v1.6.1 | SlayerOffice
Extending Your Color Palette with Tints & Shades
Once you have a color palette established, you can create tints & shades from the colors to expand the palette:
- Tint: the process of adding white to a color
- Shade: the process of adding black to a color
Starting with the branded color scheme and creating tints & tones will greatly expand your palette.
- Creating Tints & Shades in Illustrator | Premium Design Works
- Extended Color Palette | Premium Design Works
- RIW Extended Color Palette | Premium Design Works
- IT Department Website Color Scheme | Falconer Design Studio
- Simple Formulas for Calculating Tint and Shades | CodeMelon
Putting it all together…
Let’s take a look at some examples: