The right color rule in web design forever

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.

The light-colored canvas highlights the image, but the bright canvas does not highlight your content. (Don't laugh, the latter is a real case on the web.)

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. We provide a more comfortable text color range: #333333到 #666666.

For your background color, all white (#FFFFFFF) is the safest color to match any text. If you want to choose a different background color, we recommend using #ffffff to #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 beginners you still choose a more appropriate. Now that you have mastered the basics of color matching, if you are confident, you can try a lot of different options later.

You just learned:

Learned how to choose "Hue". Generally speaking, hue is the basic color, and when you move the slider you will see the change in the H value in the color selector.

"H" represents hue, and once you choose your highlight color, the text box displays the hue of your current color.

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. Yellow and purple are also good, but if used improperly, it will backfire.

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 Blues range from H235 to H190, from navy blue to dark blue.

If it is me, I usually choose H205 Blue, if you selected a color as your high light, then also please use this color in other places where needed. If your buttons, headings, etc. need to be highlighted, change their colors to the same kind of blue. In the example below I changed white to blue.

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 color choices easier.

To create a color change in the color selector of the map area drag

Use these types of colors to change things like:

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. The color in the upper right corner is like a F1 car; They can perform amazing results and are very tempting, but usually it takes a lot of experience to use them well. Without this experience, they may lead to accidents, so it is best to weaken your color and best to keep it in a 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 if I just changed the hue of our design so far, what happens.

It looks comfortable, doesn't it? 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.

Degree of saturation and brightness

When you drag the map area around the color selector area, you see that the values of "S" and "B" change, which represents saturation and brightness. You can also see that the color Hue number remains unchanged. So, you can change the color by changing the saturation and brightness of your original hue.

Saturation is a vivid expression of color. For example, think "my shirt is permeated with wine red". In a typical color selector saturation is the amount of white that is mixed in your base tones to decide. The less white, the more saturated.

When you drag to the right color on the map you can reduce the amount of white, thereby increasing the saturation, the value of "S" rises. When you drag to the left to all the white corners, you will reduce the saturation so that the value of "S" drops.

Brightness is how much black there is to mix into your color. The less black, the brighter.

When you drag the slider up, reduce the number of black and increase the brightness, the value of "B" in the color selector rises.

The black that blends with your original hue is also called creating "Shadows". It also comes from a mix of paint, a mixture of black paint and paint colors.

When you mix gray into color this is called creating a hue. If you adjust the saturation and brightness, then you create a hue. So basically no matter whether your saturation and brightness are less than 100%, this is a hue.

Again, the word comes from a mix of paints, in which a gray paint is created and then mixed with a color coating.

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.