hue, color, chroma, and hue in the eye of a product manager

Scene: PM and UI discuss the background color of the ad, PM: "The background and content of the advertisement use the same color, the distinction will not be high." "UI:" No, I specifically use a single hue to fit different saturation and brightness designs. "PM constantly point at his fast-breaking head, actually do not know what the UI said."

I in order to with the artistic temperament of the UI designer better communication, can understand a little in my ears in the "sounds of nature." Secretly studied the UI design, at home gnawing at a "wonderful door-Website UI design", I do not know whether I bought pirated or translation quality issues, in the beginning of the color, hue and tone are translated into tones, let me completely lost in the hue and hue of the world. After seeing chroma and color again, I completely broke down.

In order to uphold the "do not abandon, do not give up" the glorious tradition of surfing the Internet to find information, install a Photoshop, began to churn the PS color picker, finally a little understand. decided to try to speak in layman's language to say Hue (hue), Tint (color), shade (chroma), Hue (Tone) differences.

First of all, we need to understand the principle of color reception, human research has three color receivers, respectively, corresponding to red, green and blue, through the different combinations of three colors, we can look at a variety of colors. Let's start with the four kinds of colors mentioned above.

Hue (hue) is a color with a saturation and brightness of 100%. My understanding is that red, green, blue three primary colors, 22 in different proportions of the resulting color (can only one color, at most only two colors mixed, can not be mixed in three colors). All hues can be displayed with a hue ring.

Tint (color), is a combination of pure color and whiteness color. My understanding is that any one of the colors in Hue (hue) and white are blended in different proportions to produce the color. Thus, a hue (hue) can produce a series of tint (colors) by adding a different proportion of white. The color produced by the red image below.

Shade (chroma) is the color that is produced when a solid color is combined with a black degree. My understanding is that any one of the colors in Hue (hue) and black are mixed in different proportions to produce the color. Thus, a hue (hue) can produce a series of shade (chroma) by adding a different proportion of black. The color produced by the color of the following figure.

Tone (hue) is the color produced by a combination of solid colors and grey degrees. My understanding is that any one of the colors in Hue (hue) and black and white are blended in different proportions to produce the color. Thus, a hue (hue) can produce a series of tone (hues) by adding different proportions of black and white. The color of the following figure produces the hue.

If you have a little understanding of saturation and brightness, simply put in Hue (hue) is the saturation and brightness of the 100%,hue value from 0-360 degrees of all the colors produced by the change, and the whiteness, in fact, is to reduce the saturation, when the saturation of 0 o'clock, the color is white, so tint (color) Is that all hue (hue) colors are in the brightness of 100%, adjust the saturation to get all the colors; Conversely, the black degree, is reduces the brightness, when brightness is 0 o'clock, the color is black, therefore shade (chroma) is all hue (hue) color in the saturation is 100%, All colors that are obtained by adjusting the brightness. So, tone (hue) is all the color of the hue (hue) color by adjusting the saturation and brightness at the same time.

Next time, you can say to the UI: "The color of this logo I like, but the chroma can be in the deep point." Perhaps, the UI will have a feeling of late encounter hate, the premise is not threadbare.

Note: saturation (saturation) refers to the sharp degree of color and its greatest possible degree of contrast, the range is 0~100%;brightness (brightness) is the brightness of the color, the range is 0~100%. The article put English in parentheses, write in parentheses in Chinese, is the hope to remember English, because different people to these several English have different translation, understand the difference, that is, Chinese is not the same, a little understanding can correspond back to English, thus know what it means.

Author: Bitter Tea

This article source: Some things of the internet