Color Theory - practical usage in Web Design


Topic: Color Theory - practical usage in Web Design
Published 07.04.2021 Updated 07.04.2021

Marta Wierzbicka staffpropremium posted 6 months ago

See final results

PROJECT 1  PROJECT 2  PROJECT 3  PROJECT 4  PROJECT 5  PROJECT 6

Understanding Colors

The use of color is one of the biggest hurdles artists and designers face. By creating a web project, e.g. your portfolio. you are surely wondering what colors to use to encourage the viewer to stay longer on the site, see your works or contact you. Correctly used colors can lead the viewer to what is important. Use them to tell a story or to completely change the mood of a scene. In web design, you can also use colors to create a specific perception of a website or application. By choosing smoky, pastel, or, on the contrary, vivid, bright colors, you create completely different moods in the visitor. Incorrectly used colors may cause the viewer to be lost, discomfort, and thus discourage them from visiting the website or using the application.


Saturation & Value

When using a given color, it is worth skillfully adjusting its saturation level and value. The effect you achieve depends to a large extent. If we only used red, green, and blue (basic palette) with 100% saturation and 100% value, we would get quite an ugly image. However, by changing the saturation and value of only one color, we can create an entire project, e.g. a landing page.

What you should know about saturation and value:
  • Don't overdo it. Don't use saturation and high values ​​throughout the project, because the effect will always be negative.
  • Remember to let the viewer's eyes rest, use mostly delicate shades.
  • Use this to make the viewer aware of important elements, such as the "Call to Action" button.
  • Use this to storytelling, tell the viewer what to pay attention to.
  • Use it to change the mood, vivid colors for animations/cartoons, saturated colors for seriousness, minimalism.
  • Use this to bring attention to what would otherwise not attract the viewer's attention.

Color Harmonies

Color harmonies are concerned with the fact that some colors look better together than others. This term is also known as color schemes or complementary harmonies. Below, I present to you six popular and common color harmonies that work well and are based on concrete ideas. To help you implement them, we have created MDB Color Schemes Generator which applies all the principles listed in this article. Your task is to choose the color you are interested in and our tool will generate the saturation level, value, and eight different color palettes. Have fun with it!

1. Monochromatic

  • Involves only one color
  • Is best for single subjects
  • It allows the viewer to focus on details
  • It helps to create a striking atmospheric effect

2. Analogous

  • Colors adjacent on the wheel
  • Easy on eyes
  • Creates a peaceful, comfortable mood
  • Are seen a lot in nature, e.g. green trees, blue sky etc.
  • Colors are very related

3. Triadic

  • Equally distant on the wheel
  • Hard to implement in the project
  • Best for cartoonish or surreal design

4. Complementary

  • Opposing color on the wheel
  • It's very popular
  • Naturally pleasing to the eye
  • Use one (the weak one) color predominantly, you shouldn't use both colors equally

5. Split Complementary

  • Similar to complementary, but one end extended
  • It gives you more creative freedom
  • Feels lively, joyous

6. Tetratic (Double Complementary)

  • Two pairs of opposing colors
  • Best used for foreground/background
  • Rather don't use 25% of each
  • Hard, but pleasing

Summary

As you may have noticed, there are many color options to use. It is worth remembering the above rules to get the best results in your projects. It can be difficult at first, but don't give up and practice your "eye for color". Create multiple pages, components, illustrations, etc., and share them with others. And remember, MDB Color Schemes Generator is always there to help you, even with the most original ideas.

Write
Please insert min. 20 characters.