Web design is not wrong. 6 Color principle

As a novice in web design, are you still struggling with the Web page you made to find a perfect set of color schemes? In this tutorial we will share with you 6 guidelines that are sure to fire and "wrong", and you can follow these principles to grasp the most basic color laws. The principles we share now are not rules, and you will create more color schemes in your career. Instead, they are a starting point and a safety guide to how you live in the color direction of the web design field.

　1. You need to color the canvas, not your picture

A fundamental principle in web design is that no matter how much time you spend creating a brilliant design, its ultimate role is to play the core position of the content. Your color scheme should never be more "loud" than the content it renders. Your design should be in the background, the purpose is to help highlight the content of the site.

A light-colored canvas highlights the image, while a bright canvas sometimes doesn't highlight your content.

When designing web sites with software such as Photoshop or sketch, the process of creating a design is often independent of each other. Some of the individual designs look good and can be accepted by your customers, but when they are actually designed as Web pages, inappropriate color matching tends to distract visitors. In fact, the process of web design is closely related to content, and many of the pages that make high quality look empty and almost without content.

This is a great idea: you can lay out your content on your site, use the design software to work with code, and then design your pages around your content. Of course this is also a special case, if a specific style of images and photos can be harmonious with your design, then your design color is perfect. Just imagine that the color of the site is as important to the content as the clothes are to people, and you have to make a perfect and fitting suit.

　2. Choose the simple grey as the keynote of your website

You can choose a myriad of colors for your site's tone, but I suggest you use the simplest colors, such as white/light grey and dark gray with a text background.

You can look at any popular website, template, theme, White or light gray and dark gray collocation has become the majority of choice, this is also a good reason. This kind of collocation improves the readability of your content and highlights your image in front of the visitor.

Generally speaking, your text is best avoided using black ink, dark gray is generally easier to read.

Text color suggested range: #333333到 #666666; background color suggested range: #FFFFFF到 #cccccc.

Of course, these color choices are not fixed dead. But if you're a novice, you can use the above color scheme with ease.

　3. Select only one color highlight

If you choose several different shades, your color scheme is mostly problematic. The more colors you use, the more difficult it is to control your page. So, on the premise of the gray tone of your Web page, you'd better just choose a bright color for the things you want to highlight, such as headings, menus, buttons, and so on. Your highlight colors can be blue, red, green, and so on.

You'd better choose the highlight color associated with your tone color. Open your color picker and click on the center of your color box.

Move your slider up or down, and you can carefully select the color you think is most appropriate.

Now, the page you are designing has three basic colors: background color, text color, and high colors. In the future you can also choose more than one of the high colors, but now for the novice still choose a more appropriate.

4. If you have questions, please use the Blue

If you have doubts about your choice of bright colors, use blue. Blue is a more flexible color and can be paired with many different colors.

Here are 30 blue-tone websites that can be used for reference: Blue

On the other hand, if you are using blue, the probability of using the wrong color will be very low. If you are hesitating about what color to use, you might as well use blue. The safer blue consists of navy blue to dark blue (h235-h190), and I usually choose H205 blue.

If you choose a color as your high light, then also please use this color in other places you need. If your buttons, headings, etc. need to be highlighted, change their colors to the same kind of blue. In the following example, I replaced white with blue, and we felt it.

　　5. Add a change to your high bright color

Once you have selected the highlighted color, move the slider from that point to select the next color. Other colors are needed in your design, and a slight change in bright colors will make your choice of color easier, but not boring. Such as:

Hover effect:

Boundary:

by highlighting colors:

Gradient:

Lighting Effect:

6. Try not to use color selector in the upper right corner of the color

　The upper right corner of the color selector is a fertile piece of land. They can perform amazing results and are very tempting, but often it takes a lot of experience to use them well. If there is not enough experience, they may cause accidents, so it is best to weaken your color, preferably all keep the more diluted color.

That's why in the third part of this tutorial, I asked you to click on the color in the center right corner of the map to select your highlight color before you make sure you have a softer color to kick off.

To illustrate this point, see what happens if I just change the hue of the design.

The picture looks pretty comfortable, right?

But if you change the color to the upper-right corner of the selector, let's see how it works:

The eyes of the visitor were blinded by minutes! If you want to make sure that you don't scorch your visitor's retina, follow the general principle of leaving the lattice in the upper right corner of the color selector.

Study suggestion: Monochrome color scheme

The monochrome color scheme is that you take a basic hue and extend its hue, saturation and brightness. So by picking a big bright spot of color and the changes it creates, you actually create a monochrome scheme.

Next?

Keep practicing the monochrome color scheme on the grayscale basis until you feel confident. Try using a different hue, try to create a different highlight, and see how it changes the saturation and brightness settings until it can be used.

When you feel comfortable, you can add an extra highlight color. I suggest trying orange and blue because they are often the simplest duo. Then try green and blue, which is the second easiest in my experience. These two are often a compliment with both customers and visitors.

To promote your understanding of the web's color scheme, the best thing to do is to catch yourself liking the color, you can use the sampler (browser extension Colorzilla) and use it to study how experienced designers do the rich color mix. When you are browsing the Internet, see a great combination of breakthroughs, you can use color sampler to see the color scheme used on the page. You can even try each hue to see which saturation and brightness levels work best. Also notice the Harmony degree of its color combination.

If you have questions, you can always return to your "safety first" guidelines, which in any case will not be wrong.