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.
See Also:
Color Psychology
The Zen of CSS Design: Visual Enlightenment for the Web – pp. 62 & 6
The influence of color on human emotion is a complex relationship involving numerous factors:
- Psychological effects
- Cultural influence
- Gender bias
See Also:
- Color Symbolism and Psychology | Wikipedia
- Color Psychology | InfoPlease
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.
1) Backgrounds
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.
3) Navigation
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
http://www.colourlovers.com/
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
See Also:
- 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
Transcending CSS: The Fine Art of Web Design – p. 251
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.
See Also:
- 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
- http://slayeroffice.com/tools/color_palette/
Putting it all together…
Let’s take a look at some examples:
Co., Ltd.
Zen Army
Dazzling Beauty
Pinups
Start Listening!
This portion of the Premium Design Works website is written by Mike Sinkula and dedicated to the Web Design & Development students at Seattle Central Community College.
12 Comments:
Leave a Comment:
A nifty tool to find the closest pantone color to the hex or RGB value you have.
This is a really cool color site I use often.
Upload your photo and get your color pallet. http://www.colorhunter.com
http://www.urbandictionary.com/define.php?term=blammy
Check out Adobe’s Web site Kuler where you can explore, browse and create color themes.
Kuler can also be accessed from inside Illustrator CS5 (and other Adobe applications). Go to: Window > Extensions > Kuler
http://colorschemedesigner.com/
This is a really fun tool that allows you to export a palette to a photoshop file, text, css, etc.
Is this a good color palette? http://isu.indstate.edu/ilnprof/ENG451/ISLAND/
See top of page.
I thought this was a cool use of Flash. You don’t need Flash to completely design a site, but sprinkling it like stardust on certain elements can make a site unique. Check out this link:
http://www.creative-outsourcing.com/index-en.html
Trevor
My favorite stock image site is stock.xchng at http://www.sxc.hu/ . Their selection is really good and I’ve found a photo for just about anything. You can type in colors and get great images back.
Trevor
Spoonfed Photoshop Tutorials
http://psdtuts.com/category/tutorials/interface-tutorials/
Ton’s of great FREE photoshop tutorials. I was particularly interested in their interface tutorials.
This is my new favorite stock photography site!
http://www.photocase.com/en/
Photocase is a curated, user-driven stock photography library of high-resolution photography. Updated with new photos daily, our aim is to publish photos with style and character at an affordable price. We see Photocase as a place to go to get away from the clichéd classic stock style. All photos are uploaded by users, reviewed by our photo editors for quality and suitability, then the lucky ones are published online and may be purchased or downloaded and used for private or commercial projects by any registered member of Photocase (providing the use complies with our Terms of Use).