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 & Color Psychology
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
- 04 The Power of Color | HTML & WEB Artistry
- 02 Web Aesthetics | Designing Web Graphics
- 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.
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.
Basic Color Theory & Color Combinations
With colors you can set a mood, attract attention, or make a statement. You can use color to energize, or to cool down. By selecting the right color scheme, you can create an ambiance of elegance, warmth or tranquility, or you can convey an image of playful youthfulness. Color can be your most powerful design element if you learn to use it effectively.
- Creating Consistently Colorful User Experiences | UX Booth
- The Missing Cheatsheet For Brilliant Color Combinations | Creative Market
- Basic Color Schemes: Color Theory Introduction | Tiger Color
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
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
- Seattle Central College Brand Guidelines | Seattle Central College
- Creating Color Palettes | Andy Clarke.
- 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
- Color Palette Creator | Slayer Office
- HTML Color Picker | W3Schools
Putting it all together…
Let’s take a look at some examples: