Website design color: basic color knowledge

This is a article about the use of color in the design of the website. The article not only introduced the color theory, but also introduced the practice method. But too short.

Create a new user color experience: The first part of the theory

How does the color of this picture feel? Do these fireworks feel festive?

The photo is from Expressmonorail.

Color is one of the most important parts of your site. However, color is often only a matter of hindsight after a comprehensive decision, even sometimes ignored. That's not going to work. Color helps users interpret information. To put it more complicated, most people's judgment on the color of the site is done subconsciously. They may not be able to say the color, but they are subconsciously minded about it.

Sometimes, you will remember the website because of the color. I told you there is a website, purple use is very good, I asked you this is a website, you first think of what? It's probably Yahoo!. Yahoo's brand identity system has several major features, one is purple. You might ask: What does color theory have to do with purple?

In this series of articles, we will (more or less) explain the role of color in the design of Web pages. In this article, we will explain the basics of color: the principle of color? How do artists use color? How does color affect our emotions? In the second article, we'll look at how colors are rendered on a Web page, how the color is encoded in the stylesheet, and the new features in CSS3 about colors. In the third and final article, we will explain how to pick and apply colors in your layout, and color inspiration and colors in the universe.

First, we will briefly introduce the color theory in physics. Then we'll discuss the psychology of color theory: What emotions are conveyed in the site's colors and how we can use this to optimize the user experience. Finally, we will discuss how to apply the theory to the practice of web design.

Physics Color theory

Reflection Color

The world around us is colourful. An object, exposed to light (visible objects, see electromagnetic radiation), will reflect certain wavelengths of light into your eyes. For example, pure white light shines on an apple, and all the colors (all wavelengths) of the red (wavelength 700-630 nm) are absorbed. Red is the only light that is reflected to make you see, so you think the apple color is red. Funny--Red is the only color the apple doesn't absorb. So the color we believe is essentially: the light of a particular wavelength is cut when it is reflected back by the object.

Addition color

The monitor displays colors in a quite different way. Because it produces light of its own, that is, it produces its own color. In general, the three primary colors that produce rich colors are red, green, and blue. Because the computer monitor has a very high pixel resolution, it does not use the "additive" color on a per-point basis. For example, a computer monitor displays cyan at a certain point, and it actually lights up blue and green pixels on a particular area. Therefore, the computer monitor displays the color in a dither form.

Color theory involved in design

　　

Standard Hue Ring

Complementary color

Do the following: Stare at a color for about a minute, and then close your eyes. What color do you see? No surprises, you'll see a color called contrasting colors. This color is usually in the "hue ring" in the direction of the "relative" color. But what is the practical significance of this bizarre experiment?

If a doctor stares at the blood all day (dark red), when he closes his eyes, he will see "complementary colors". In this case, he sees a light green. As a result, hospitals are generally painted with spotless green light. It may not be much advanced technology, but this "complementary" color system can indeed calm our vision system. If people in the construction of hospitals can benefit from the color theory, then we web designers in the production of Web pages can also!

The use of complementary colors is an important aspect of artistic design and graphic design. The same applies to other areas, such as contrasting logos and retail displays. Put the complementary colors together, they will highlight each other.

Because art/Zen/life is all about balance, it is important that websites have a good color base. Never overdo your audience, unless .... Boy, you're having trouble with your wallet.

Approximate color

　　

Simple color "triangle", with a fourth color.

When choosing colors for your design, an approximate color is the safest option. The easiest way to do this is to start with the base color: here, I choose green, Hue is 120; the color below I will pick the relevant color. To begin with, the choice of hue and 120-related colours-can be mathematically accurate. I choose 60, 45, and 33. You will find that every time I have lowered some tones, this is intentional and not random. Typically, the designer chooses such a set of three colors: This combination is called the color triangle.

Rectangular color Selection method

Rectangular color selection method is not only the most complex, but also the most difficult to understand. But it is quite simple to pick the color, just draw a rectangular brace hue ring, so that the four corners of the rectangle will each press a hue. However, the focus is on change. carelessly, your plan will be to spend as much as the rainbow. Try to keep one color on the other and make your color scheme as concise as possible. I found that if a variety of colors are relatively unsaturated, it will be much easier to handle.

The theory of Psychological color

Color is an important tool that you can use to communicate across languages. Look at the natural idea when you see all kinds of colors.

The color associated with emotion and emotion

　　

Each color has its own lightness and emotion.

Warm color

Warm colors are more intimate than cool colors. Thus, a darker warm color may appear to be as bright as a cool color that is lighter in value.

Red

Power, power, passion, love.

Orange

Happiness, passion, attraction, success

Yellow

Joy, excitement, focus

Cold color

Cool colors have a more distant feel than warm colors. Thus, a lighter cool color may appear to be as bright as a darker warm color on the value.

Green

Refreshing, fresh, prestige, cool, cool,

Blue

Reliable, trustworthy, dependable, quiet

Purple

Spirituality, ritual, mystery, rebirth, imperial power

Neutral color

The effect of neutral color on emotion is less, so it is often considered for objective introduction. However, if used well, neutral colors can still have their own hints. "Pure" black and "pure" white is our ideal of "light" and "dark" color representatives.

Black

Sexy, mysterious, obedient, dangerous.

White

Pure, innocent, restored, neutral, eternal

The color of the light and tone

Keep in mind that color is more than just hue. Saturation and brightness also affect the way we feel. But the traditional color theory often avoids the saturation and the lightness, but the artist has always emphasized to understand their subtlety.

You can almost certainly see an example of selective use of colors: An artist finishes the photo, removes all the colors, and retains only the focus color. Color differences can affect the way we perceive things in our subjective sense. By giving the color, the artist can inject vigor into the original dry place in the photograph.

Browse through the hottest web site artwork such as deviant art. Do they have anything in common? Please be sure to pay attention to complementary colors and the use of saturation. What emotions do you want to convey? If you want to draw attention to a particular element, have you considered using color selectively?

　　

How does this picture make you feel?

Photo from midnight Digital

After I had specified the colors in my design, I found it hard to turn the colors of each place back to black and white; under the guidance of the idea of selective color expression, they were so outstanding

Once you understand how colors and shades affect your site, take advantage of them. As distinct personality, happy words (such as in flickr.com can be found) can make the site more moving, bright and happy colors can do. On the other hand, uninteresting topics can also lead to vivid colors. Remember, everything about color is related to feeling. There is no Black-and-white (pun) science in perception.

Conclusion: Selecting the most suitable color for experience

Theory, we're done. If you are interested in using and controlling colors in the layout of a Web page, the Insider theory about color and color schemes is critical. Although, this is only part of it. As a designer of experience, we have to consider a variety of different elements. It should be noted that we do not want to be a master in a particular field, but to have a general knowledge system.

Obviously, I can't give the full details of each of the concepts mentioned above, so this article will be eight times times as long as it is now. But you can take a moment to look at the relevant links to these concepts, or read some of the relevant books carefully. If that's not enough, find inspiration: Browse your favorite sites and artists. Let's see how they use color. Don't pay attention to form, copyright, special effects: Just pay attention to color. If you can individually pay attention to each part of the user experience, you will be in the idea of a smooth sailing. Is there anything in my article that touches you? Please do not hesitate to comment on your thoughts!

Next post Content Trailer

Theory is one thing, practice is why did again?

The purpose of this article is to lay the groundwork. Now, we stand on this level, we need to take a further approach to this concept. In the next article, we'll discuss how to render the page color (what sRGB means), the various color encodings in the stylesheet, and the new features in CSS3 about colors.