Basic color theory that Web developers need to know

Primary color and Seondary color should have been taught in elementary school art classes, and tertiary color should be learned if you have taken art classes after elementary school.

But if you studied art in high school or higher, you’ll find that color wheels are an easy way to demonstrate color theory, practice mixing colors, and study color combinations.

What is color theory?

A brief history of Color theory: Color theory was born when impressionist painters like Edouard Manet, Edgar Degas, and Claude Monet abandoned realism and began to try to capture light and color.

Above, monet’s Haystacks series

Simply put: Color theory is the study of how the human eye converts light waves into color. Matching or similar colors often have similar or complementary waves.

Thus color theory can be reduced to light wave science to explain why colors can be seen. In this article, however, we will focus on just two issues:

• Why do some colors work perfectly together?
• How do we choose the “right” color?

The color problem is a bit of a birthright. Either way, a solid green background on a web page or App is absolutely unbearable!

Here’s a quick list of things you can use when dealing with color issues:

Level 1: Monochrome

Monochrome is a single color, or a combination of multiple hues of the same color.

In Web development, you can select and query the Hex code for a color on this page, and you can make the color lighter or darker without affecting the hue.

This is the simplest way to match web colors. Sites such as Facebook and Twitter mostly use this monochrome color scheme. The simple color scheme of black, white and sky blue makes these social apps more concise.

Only users’ profile pictures, links and photos have different colors, and these different colors can be recognized by users to better find posts and accounts they are interested in.

If there were other colors on Twitter pages, it would be difficult to distinguish between posts and who posted them.

Generally speaking, even if you need more than one color, you should have a main color, called background or title color.

Pro tip: If you’re going to use a monochrome color scheme, make sure the shading clearly separates the elements. Otherwise, it would be inconvenient for users to read text or separate web elements.

Level 2: complementary color

What if you don’t want to use just a variety of “orange” in your color scheme? What if you want the link to stand out, but it doesn’t clash with the navigation bar or background color?

If we follow basic color theory, the solution to this problem is to look for complementary colors.

Complementary colors of a color can be found at opposite positions in the color wheel.

Each primary color corresponds to a secondary color as a complementary color. There is an easy way to remember how colors match: if a secondary color matches a primary color, the constituent colors of the secondary color must not contain the primary color. For example, the complementary color of red is green, which is made up of blue and yellow.

Pro tip: Add only one color at a time and keep the page simple. Don’t sacrifice a clean, easy-to-use layout for a complete rainbow palette. Otherwise, you might end up with a classic site from the 1990s (like this one).

Continue to upgrade…

As you get better at design, feel free to push your limits. Matching colors is not a terrible job. Keep an eye out for developers (like him) and designers who are good at color matching. Build your taste and brand by asking yourself what color combinations you like, don’t like, and why.

Color Hack for Web developers

Try hand-writing hex codes and RBG numbers to experiment with color combinations and blends. If you’re a fan of SASS, you can store the colors in a file and import them later in your project. If your job is to build page structure rather than visual design (up to the customer or product manager), use these colors as placeholders to make your page more visible.

Please make sure that:

• Everything is readable.
• Links, headlines, and other things you want to emphasize should be different from plain text.
• Users can easily distinguish between different parts of a web page (such as navigation, main content, articles, etc.).

Online tools

• Palleton.com
• Coolors.co

Doug R. Thomas, Esq. Highly recommends the following sites:

• Color.Adobe.com
• WebAIM – Color contrast checker – ensures readability of text on background.
• Coblis — Color Blind Simulator — Test your layout screenshots with color blind filters to ensure the content is readable to all audiences.

Develop reading

Hopefully, after reading this article, you will no longer have to worry about matching colors for websites, pages, and apps. If you are interested in this topic, it is highly recommended to learn more about it. This article is only a superficial explanation, you can read this article to learn more about hues and shadows.

Finally, there are no “wrong answers” when it comes to color matching for your project. Many people believe that taste is innate, that it helps you find great designs, inspire ideas, experiment with combinations, and ultimately find what works best for you and your brand. Good luck!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.