Game front-end-how much do you know about color?

Source: Internet
Author: User

Around May 1, I once recommended two games that a front-end player is worth playing, game front-end-guessing color and selector. Today I will go back to a game about color. When I was studying d3.js, I met a color pairing game and it was very interesting. You can play it and test how much you know about the color.

1. color theory first comes to learn about color theory. We all know about color, but we are not very clear about it. So we will first study color theory. The Hue of 1.1 colors refers to the external colors of colors, which are different colors, such as red, yellow, and blue, under different wavelengths of light. Saturation refers to the purity of the color. The higher the color, the more pure the color. Brightness refers to the brightness of a color. We often use hsl color notation to represent colors using three elements of color. 1.2 color and color blending relationships are often represented by a color ring. All colors can be composed of three primary colors (red, yellow, and blue). As shown in the flash below, you can click the check box to select the displayed color. 1.3 Complementary colors (Complementary) Complementary colors, also known as contrast colors, refer to the two opposite colors in the color ring, as shown in.
1.4 similar colors (Analogous) are similar colors. The colors adjacent to the 90 degree angle on the color wheel are collectively referred to as similar colors. for example, red-orange. yellow-yellow-green. blue-blue-purple and so on are similar colors. similar colors are often used in color matching because the comparison of colors is not strong, giving people a feeling of calm and harmony. If multiple similar colors are arranged and combined in the order of the color ring, the gradient will appear. Similar colors are shown in the color ring.
The three colors of the 1.5 tricolor System (Triadic) in an equilateral triangle on the Color Ring, as shown in.
1.6 tetradic consists of four colors in the rectangle on the Color Ring, as shown in.
2. play the game created by d3.js. This game tests your understanding of the color. The color board changes with the angle and the color phase. At the same time, the color saturation on the inner side is low, and the external saturation is high, you can try your own level.
The upper left side is the configuration menu before the game. You can set your display to achieve the best brightness effect, and enable the color mixing prompt tool to better play the game. At the bottom is the navigation menu of the game level and the display of feedback results. Then you can start your game. Then let's take a look at my score.
You are also welcome to comment on your score!

----------------------------------------------------------

Front-end development whqet, pay attention to front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.