As a always to hang out in the field of design development, may be able to better himself to design the understanding to the development of clear, this is my first article output more biased towards the articles in the field of design, after all, career or development, is only a lousy box of designer, for design of some terms is incorrect design bosses, please understanding.
This article aims to give developers a basic understanding of color and bring some design knowledge into the world of developers. Hopefully developers will benefit from this article.
preface
The origin of the color theory was Newton’s prism, which discovered that light can be divided into seven colors: red, orange, yellow, green, blue, violet, which initially explained the formation of the rainbow. Because it was gradual and connected first, Newton also invented the color wheel, the first exploration of color theory. Later, Goethe perfected his color theory and divided colors into warm and cool colors.
Gradually be carry forward later, color theory, such as sphere of diesel, and the color wheel, brightness, brightness, saturation, hue, color, contrast, gray scale and so on all kinds of found that if you’ve used ps palette of people will be very familiar with these concepts, and most of the developers in the eyes, perhaps color just a hexadecimal values in a computer.
Strangely enough, one of the founders of these theories was Newton, a well-known physicist and mathematician, and the other was Goethe, an essayist and poet who wrote the sorrows of Young Werther. But this just shows that color is not only the concern of designers, but also the concern of science, and poets like color because color conveys emotions like words.
Sense of color
Color comes from nature, from the light reflected by different objects in nature that the human eye can receive. So the sense of color comes more from nature, for example
Green represents vitality and forgiveness due to nature’s tolerance.
Red is full of enthusiasm, because red is as hot as fire, and dark red is like blood, so red sometimes has an ominous feeling. Later, red also stands for the Party, indicating an organization that has grown up in blood and tears and is full of enthusiasm.
Blue represents cold and the sea. Blue and white remind people of clear blue sky and whiteness after snow in winter.
Blue and orange together have the feeling of sunset and the sea.
Purple will be more charming, but also make people feel romantic.
To feel the feelings conveyed by different colors is the most basic ability of a designer, and also the most basic knowledge in graphic design or visual communication design.
RGB
RGB through three different colors to express the color mixing, which is the most common color representation, mixed color usually use three primary colors, red, green and blue, these three kinds of color can be any color mix, note that this is the color of light splitting, and printing needs is three colors, web developers will not come into contact with the printing color problems, Those interested can search the difference between three primary colors and three primary colors.
Mixing of colors
RGB are red green and blue respectively, and the mixing process can be clearly seen in the picture below
When all three colors are at their maximum, the resulting color is white
Green and red mix to make yellow (third block)
Blue mixed with red is magenta (seventh block)
Green and blue mix is cyan (fifth block)
The orange words are actually a mixture of more red and less green (the second block) and are in the middle of red and yellow.
Purple is less red and more blue (number eight), and equal amounts of red and blue should actually be called magenta.
If you know these things it’s easy to mix colors.
Just to mention, blue, Magenta and Yellow are the three primary colors. Another color pattern is CMYK, which means Cyan, Magenta, Yellow and Blank respectively. Printing knowledge is not used for development, so you don’t need to know this.
The representation of colors in a computer
Computers have a few rules for expressing colors, the most common of which is a hexadecimal 6-digit string starting with #.
Hexadecimal is 0 to f, so # FFF means all three colors are the maximum, so it’s white. While # FFF and # FFFFFF are equivalent, the former can be considered a contraction of the latter. For example, #ffaa33 can be shortened to #fa3
The eight colors shown above are in hexadecimal
You know the mix of colors and you can guess what color it’s going to be based on the color value, right
For example, #014589, split into RGB is red 01, green 45, blue 89. Since blue is the most, green is the second, and blue plus green is cyan, that is more and blue plus less green so it will be a bluish cyan. The overall color value is low, so it’s darker, so this color value is close to navy blue.
You can also write a similar value based on the color you want, for example if you want a peach like this
This color is close to magenta, but redder than magenta, or less blue. And magenta is # FF00FF, so this color is roughly # FF0088.
Rgba said
CSS also provides a notation for rGBA or RGB, which has one more alpha than RGB. Why is it called alpha not also called opacity?
The difference is that the opacity of an image is 50%, which means that all areas are 50% transparent.
In fact a transparency is not the same in different parts of the figure, such as a fire, the fire in an area where light can penetrate, actually in the strong places can be thought of as no transparency, it means that different colors in different parts of the penetration ability, forming a color channel, the channel is called the alpha channel. So alpha can be understood as the degree of penetration of color. So far, you can’t go wrong with transparency anyway.
Rgba mode is exactly the same as the hexadecimal system itself, except that the hexadecimal system is 00 to ff, and rgba is 0 to 255,255 is actually 2^8. This is because of the way computers store colors, with a color value in 8bits.
Color the degree of
The color of the current study is different, the expression method of the color of the common people, in fact refers to the color hue, what is called a hue, that is to say, the appearance color, usually red, orange, yellow, green, indigo purple hue is different, like different constellation, within the scope of a certain color is a kind of hue, and zodiac, There are no strict rules about hue from what range to what range. Because it doesn’t mean much to a designer.
Since the same color actually contains a variety of colors, such as green dark green, turquoise, light green and so on. So within the same color, you actually need to have all kinds of degrees. Saturation (purity), brightness, brightness, gray, contrast.
The most important of these degrees are hue, saturation and lightness, known as the three elements of color.
Color requires strong perception, so relax your eyes as you read on.
saturation
In layman’s terms desaturation means making colors look less exciting or bright.
## Why does high saturation give people a strong sense of visual stimulation?
Because the human eye has three types of cones that accept the three primary colors and merge into one color. A color stimulates the eyeball of the person because the eye accepts the difference between the three primary colors is very big, three kinds of cones got the difference between the three colors will be dazzling, so it produced bright-coloured feeling.
Saturation in the performance of color value is usually RGB three color value gap narrowing, saturation is 0 is the three primary color gap is 0. The mathematical concept of saturation is the difference between the maximum and minimum values of the three primary colors. In this case, the difference between ff and 00 is 100%.
When we take a color image and saturate it to 0 the image should be black, white and gray, just like a black and white photo, but the algorithm for black and white is not the same as that for saturation 0.
The black and white algorithm calculates an equal amount of gray based on the amount of color. The histogram information of the whole image does not change when an image becomes black and white. We can talk about this later.
Saturation of 0 is the middle value between maximum and minimum RGB values. Let all three colors approach the median.
lightness
In layman’s terms, lightness is whether a color looks black or white. For example, the overall color value of the dark blue mentioned above is relatively small, in fact, it means that his brightness is low. Once you understand saturation, it’s easy to understand lightness.
Again, we understand the question of dark versus white from both biological and mathematical perspectives.
The perspective of biology, dark means 3 kinds of color to the stimulation of three types of cones are tiny, in contrast means three colors are more, will make the color looks white, high color and plain is that degree, the white color is more, just light reveal a kind of color, so the look and feel more elegant.
Add lightness
Reduce the lightness
In fact, a change in brightness will also cause a change in saturation, because black and white saturation is also 0. But saturation and lightness control a color from two different dimensions. This is another color representation in CSS called HSL.
An HSL model
The industrial color standard uses hues, saturation saturation and lightness to express colors, which can express all colors covered by vision. It is the most widely used color standard so far. CSS also supports this way to express colors.
At this time many people began to ridicule, because RGB color expression is not enough or not good to use, must create so many strange mode, CSS so many attributes are not able to learn, learn a color to make so much trouble ~
In fact, color is indeed a very complicated knowledge, but the knowledge of color is easier to understand than programming, because color is very close to life. And if you read on, you can see how powerful HSL can be in solving problems
Use HSL for color
To use HSL, you have to know how it represents colors, right
Theoretically a color should look like this HSL (#f00, 100, 50%), and this represents a red with a saturation of 100 and a brightness in the middle that is neither black nor white.
But this should actually be the HSL of 0, 100, 50%.
0? Since 0 can also represent color, this is a little weird.
It says that Newton invented something called the color wheel, which is hue. Ok, let me correct you again. The color mentioned above is not a real hue.
To be exact, a hue ring is a color ring made up of colors with 100% saturation and 50% brightness, as shown below. You can vary the color by lowering the value of the three colors, and you can also vary the brightness and saturation of the colors.
And the latter is easier to control the kaleidoscope of color.
The only property of the hue ring is Angle. 0 degrees is red, 360 degrees is red, and blue is 240 degrees. The rotation of the hue ring is counterclockwise as shown above, and both saturation and brightness are measured as percentages from 0 to 100.
What’s the use of HSL
To understand what it is, you need to know how it was created. HSL was created because people who use color don’t care about the value of the color, they need to care about the change in the primary color.
HSL, for example, can solve the ever-changing lipstick color problem very, very easily.
The person that has girlfriend knows the color of lipstick is a very horrible thing, but the color that uses HSL to understand lipstick is very simple, if need pink a few, turn hue to this 30 degrees, need a few lighter, lightness goes to a few high-profile. If you want to be darker, you can tone it down.
HSL can also be a good solution to the problem of color matching for designers. A web page with good visual effect has only three colors, or even one color.
If there are two colors, usually two colors that are 180 degrees apart in the hue ring, this is called a complementary color.
If it’s three colors, it’s probably three colors of the hue ring that are 120 degrees apart.
So even if it’s two colors, or three colors, you just have to choose one main color, and then change it according to the color. The biggest feature of HSL is variation. The other thing is that even if they are different colors, they still have the same brightness and saturation.
For example, the following is two complementary colors with the same brightness saturation, does it look more coordinated and complementary?
These two colors are HSL (30, 80, 70) and HSL (210, 80, 70) in HSL, but # F3C291 and # 91C2F3 in RGB. HSL, by contrast, can see the relationship between the two more clearly, and can also be used with CSS style preprocessor representation.
Another function of HSL is the change of color lightness or saturation to express different states of color.
Usually refers to the mouse hover active effect when the designer will give two different color values, but in fact, two different brightness color values, so if using HSL.
HSL mode can easily express the relationship between one color and other colors, so one color can go all over the world, of course, the premise is that the designer knows how to match colors. If the variables are well defined, ideally all the colors of your site should change just by changing the value of the main color
So if a company has very good design specifications, HSL is much more efficient than RGB
HSV
In addition to HSL, there is also an HSV mode that is used to control colors. It is very similar to HSL. Hues, saturation saturation and brightness are used to express colors.
Ps provides five methods to represent color, which are HSV, RGB, hexadecimal, CMYK and Lab. Lab is a channel-based pattern that will not be used for development.
Both HSV and HSL are very good at representing color changes. The difference between the two can be seen intuitively in the figure below. The former pays attention to the change of lightness, while the latter pays attention to the change of brightness.
The reason for this pattern is that designers mainly value lightness in color matching, and will pay attention to brightness in the later stage of retouching, so HSL is used in Web development and HSV is used in PS.