Reading Time: 4 minutes Web Design and Color 101 - Sheri Lossing - mon Sheri Design BLOG - Web Design

The colors you choose when creating a website design are more important than you may realize. Your website colors will frame your content and affect user experience. Choose them carefully and use them well.

This article will discuss basic color theory, how web users experience color, and how to apply this knowledge to your website.


Color Theory Weighs In

Color theory is basically the study of how colors relate in design – their contrast, vibrancy and how they complement each other.

Consult the Color Wheel. There are formulas – color families – that are considered ‘go-to’ color combinations. They are at least worth consideration as a starting point.

Three classic color families that work well together:
Analogous colors are next to each other on the color wheel.
Complimentary colors are across from each other on the color wheel.
Triadic colors are three evenly spaced colors on the color wheel. (Visualize a triangle inside the wheel. The three points represent Triadic colors.)

Article: Learn the Basics of Color Theory to Know What Looks GoodWeb Design and Color 101 - Sheri Lossing - mon Sheri Design BLOG - Web Design


The Psychology of Color

Certain emotions and ideas are associated with colors. Awareness of this can be useful when creating web design. The Psychology of Color is a complex science and this is only a brief summary. Also, variations of the color can affect its ‘feel’.

Warm Colors
Red – intensity, love, excitement
Orange – warmth, energy, joy
Yellow – happy, sunny, intensity

Cool Colors
Green – growth, wealth, health
Blue – calmness, strength, security
Purple – sophistication, luxury, romance

Article: Color Psychology: The Emotional Effects of Colors


Using Color on Your Website

Evaluate the logo first. Complement the style and color of the logo in your website’s color pallet and design. If the logo is a hindrance to the design you may be able to create a b&w, simplified or re-recolored version of the logo. If all else fails, use a text-only version.
Bottom line – don’t clash with the logo.

Limit the colors. Typically, a color pallet for a website should consist of 2-3 core colors.

Interactive color scheme creator tools:
Color Scheme Designer
Adobe Color CC
Color Palette Generator (upload an image & it creates color palette from it)
ColorHexa (color families, tones, shades, etc.)

Some colors should be avoided in web design. Very bright or fluorescent colors can be visually abrasive and considered tacky.
Article: 10 Troublesome Colors to Avoid in Your Advertising

Think long and hard before making a website too dark or cluttered. Open, clean space that directs the eye is restful and feels safe. White space is your friend – and it is not always white.

Avoid color combinations that do not provide enough contrast to read text easily.
A light background with dark text is most legible. Poor contrast can cause eye strain, negative user experience, and lower SEO.
Article: Color Contrast for Better Readability

Be mindful of the color blind. Color blindness is more common than many people realize. Boost the user experience of the color blind by remembering:
• The following color combinations are difficult for the color blind: green/red; green/brown; blue/purple; green/blue; light green/yellow; blue/grey; green/grey; green/black
• Use good contrast


One more thing… It’s not that simple.

Choosing and applying color to your website is not the same for every website. Most rules of design are not hard and fast, they are just ‘best practice’ guidelines. There are exceptions – and sometimes the exceptions work very well.


In Conclusion

Choosing the best colors for a website can be challenging. Consider the use of color families, The Psychology of Color, and other web design color ‘best practices’ to boost your design and user experience. Make color work for you!



Hue – a color or shade
Saturation – intensity of a color
Shade – adding black to a hue
Tint – adding white to a hue
Tone – adding grey to a hue
Contrast – how clearly one element is distinguishable from another
White Space – areas on the page without content

Related: Learn WordPress – Advice & Tips for Beginners
Related: Learn WordPress – 18 Blog Essentials
Related: Learn WordPress — Maintaining Your WordPress Website
Image Credits:
featured image: Ms_lucky /
color theory image: marin_bulat /

Ways to Stay Healthy If You Work at a Computer All Day - Sheri Lossing - mon Sheri Design BLOG



Mon Sheri Design

Grand Rapids, Michigan

Sheri Lossing


— I am a freelance web and graphic designer who also does professional photography.
— I drink a lot of coffee, live in front of my computer, and occasionally leave my house. I love what I do.

Pin It on Pinterest

Share This