The wind and grass up, leaves and branches. —- Another day for the overtime dog.
The black is not black, you say what white is white.
preface
I know the three primary colors of color light, red, green and blue. I used to play with prisms when I was a child, so I’m familiar with them. On the other hand, I was quite surprised to learn that red, yellow and blue are the three primary colors of art, since the knowledge of art and painting is quite zero, and I still doubted it when the words were clearly written. Finally, with the help of children, we witnessed the truth with experiments, so that I was convinced.
The purpose of this article
This article will introduce the basics of color, help you understand the world of color, learn various color models, the relationship between models, and think about how to draw a good picture, learn to think about the use of color skills, carefully observe the color collocation in life, make the visual effect of light more beautiful.
You will learn
- Basic theoretical knowledge of color
- Several common color color models
- Explore the conversion principle between models
- Enter the playful world of color
The basis of color
We have learned the solar spectrum in primary school science class. The solar spectrum is divided into invisible and visible light, and invisible light is divided into infrared and ultraviolet light. Visible light is made up of seven colors: red, orange, yellow, green, cyan, blue and violet. It can be seen in a rainbow after a rain or through a prism. According to the relationship between colors and their own characteristics and properties, people summed up the law of color change, color is summarized as: primary color, intermediate color and complex color three categories.
Beautiful rainbows are rare, especially double rainbows.
1. The primary colors
Primary color, also known as “primary color”, “three primary colors”, is the base color of other colors, can not be mixed through arbitrary color collocation color. Different color models have different primary colors. For example, the primary colors of color light are red, green and blue.
2. Three
Intermediate colors, also known as “secondary colors”, “three colors”, refers to any two primary colors of equal amount of mixing formed color.
RGB color model to help you understand primary, intermediate and complex colors
3. After color
Complex color, also known as “tertiary color”, “compound color”, that is, the third collocation of color, usually with primary color and intermediate color or intermediate color and intermediate color blending color. Complex colors include all colors except primary and intermediate colors.
4. The hue
Hue?? Yes, those are the words. Hue, or H in THE HSL/HSV/HSB model, refers to the appearance of a color. What you see with the naked eye, what you can tell, is hue. Red, orange, yellow, green, cyan, blue and violet are the seven basic colors on the spectrum.
5. Lightness
Lightness refers to the difference between brightness and shade of color. There are two meanings: one is the brightness and darkness of the color itself, and the other is that there are differences between the brightness and darkness of different hue.
Purity of 6.
Purity refers to the degree of purity and turbidity of color, also known as saturation. Pure color without black, white or other colors mixed in. Low purity, give people a dark, quietly elegant and soft feeling, high purity, will give people bright, prominent, powerful, even monotonous dazzling, if mixed too much, will become very dirty, dark color.
Mixed color theory
Color mixing is divided into additive mixing and subtractive mixing, there are only after entering the vision of the mixing, known as neutral mixing.
1. Add color to blend
Additive method refers to the mixture of color and light. When more than two kinds of light are mixed together, the brightness of the light will be increased, and the total brightness of the light of the mixed colors is equal to the sum of the brightness of the mixed colors.
2. Subtractive blend
Subtractive method refers to the mixture of colors. After the white light passes through the colored filter, part of the light is reflected and absorbs the rest of the light, reducing part of the radiation power, and finally the light passed through is the result of two dimming, such color mixing is called subtraction mixing.
3. Neutral mix
Neutral mixing is based on the visual physiological characteristics of the visual color mixing, but does not change the color light or luminous material itself, the brightness of the mixed color effect neither increases nor decreases, so it is called neutral mixing.
Summary: The original color can be divided into so many things, master the composition of color, is the basis of in-depth learning model.
Color model
Color model refers to a method of specifying or describing colors digitally. Different color models, with their own unique primary colors, applicable scenes and color matching through different color mixing theories.
RGB
RGB model is a familiar color model, for example, we use to specify the background color and text color of div in CSS
div {
background-color: '#FF0000';
color: 'rgb(255, 0, 0)';
}
Copy the codeWe can see the world because of light. RGB model, also known as the three primary color light model, red green blue model, is the color light additive method mixed model. The three primary colors of RGB model, namely the three primary colors of light, are Red (Red, R), Green (G) and Blue (Blue, B). Common color TV sets, computer monitors are RGB models,
Twelve-color loop diagram based on RGB model
Three primary colors: red, green, and blue According to the additive color mixing model, any two colors of light add equal amounts to form Cyan (C), purple (bright purple, or Magenta, M), Yellow (Y), namely three colors, the three primary colors are mixed in equal amounts at the same time, and finally form white light. White belongs to colorless system, colorless system consists of three colors, blacK (blacK, #000000) white (#FFFFFF) gray (#808080).
The complementary colors of the three primary colors are the intercolors mixed by the other two primary colors, and the two complementary colors are put together to form white.
CMYK
CMYK model, also into pigment model, or printing four color mode. Is a subtractive color model used in color printing. It’s a color pattern used in printed matter that relies on reflection, such as posters on our walls, books, college entrance exams, newspapers, etc., where light hits these objects and then bounces back into our eyes so that we can see them.
Printing four-color model
RYB
RYB model is also a mixture model based on subtractive method. That is, the three primary colors of art, Red, Yellow and Blue, often said Red, Yellow and Blue, Red, Yellow and Blue, is it. The corresponding three colors are green, orange and purple. The primary Color and intermediate Color are mixed to form six colors. We can use primary Color, intermediate Color and complex Color to form a beautiful twelve Color Wheel.
Eden twelve-color ring based on RYB model
HSL
HSL is a representation of the RGB model that describes colors to points in cylindrical coordinates. HSL (Hue, Saturation, Lightness) refers to Hue, Saturation, and brightness.
HSV
HSV is another representation of RGB model, which is a hexagonal vertebral body model formed by arranging colors in a radial section and rotating around the central axis. HSV (Hue, Saturation, Value) refers to Hue, Saturation, and brightness respectively. Is also called HSB?
Images from the Internet
Summary: There are many kinds of color models, such as Ycc, LUV, XYZ, Lab, LCH and so on. Here I will briefly introduce the concepts to deepen my impression.
Conversion between models
In addition to RYB model, the conversion between RGB, HSL, HSV and CMYK models is relatively easy, and the algorithm is also very clear, so it is relatively easy to implement. RGB as the theoretical basis of color model, to list, conversion to other models of the algorithm.
The easiest is to convert to the CMYK model
toCMYK(): CMYK {
const {0: r, 1: g, 2: b} = this._rgb;
const max = Math.max(r, g, b) / 255;
if (max === 0) {
return {c: 0, m: 0, y: 0, k: 1};
}
const k = 1 - max;
const c = (max - r / 255) / max;
const m = (max - g / 255) / max;
const y = (max - b / 255) / max;
return {c, m, y, k};
}
Copy the codeConvert to HSL model
toHSL(): HSL { const {0: r, 1: g, 2: b} = this._rgb; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const l = (max + min) / 2 / 255; const d = max - min; let s = 0; let h = 0; if (max === min) { h = 0; s = 0; } else {s = l > 0.5? d / (2 * 255 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d * 60; break; case g: h = (b - r) / d * 60 + 120; break; case b: h = (r - g) / d * 60 + 240; break; } } if (h < 0) { h += 360; } return { h, s, l: Math.ceil(l * 1000) / 1000 }; }Copy the codeConvert to HSV model
toHSV(): HSV {
const {0: r, 1: g, 2: b} = this._rgb;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const v = Math.ceil(max / 255 * 1000) / 1000;
const d = max - min;
const s = max === 0 ? 0 : d / max;
let h = 0;
if (max === min) {
h = 0;
} else {
switch (max) {
case r:
h = (g - b) / d * 60;
break;
case g:
h = (b - r) / d * 60 + 120;
break;
case b:
h = (r - g) / d * 60 + 240;
break;
}
}
if (h < 0) {
h += 360;
}
return {
h,
s,
v
};
}
Copy the codeIn the algorithm code above, the calculation logic of ALHPA is temporarily removed, and the precision calculation without considering specific values does not affect the understanding of the relationship between various models.
Summary: of course, it is better to understand the algorithm, or first understand the principle of the model, know what is going on, in view of this aspect of the information content is more, I will not repeat too much.
Color ring
In art, we can use the monochrome of the twelve color rings to highlight the feeling brought by the color itself by the combination of different lightness. Pink, for example, is dreamy and lovely, blue has a quiet power, and gray feels cold.
On the hue ring, the two opposite colors are complementary colors. Put together will have a very strong contrast effect, highlight the focus, create a collision atmosphere. You can also use tripartite roles to create more layers, and use similar colors (three adjacent colors on a hue ring) to create more harmony.
I have drawn some interesting pictures. Now it is showtime. Please hold the blinders in case you are blinded.
- 48 color loop based on RGB model
- 96 progressive phase loop based on RGB model
- A random color palette, it’s not a little ugly, it’s really ugly, guys, sorry about that.
- A little bit of a special color palette
- Progressive color palette (how big, how big? Just enough. Looks a little square? Rubbing eyes)
More fun stuff? I’ll show you next time. I have to do eye exercises for five minutes.
conclusion
In this paper, starting from the principle of color, color, three, double color, color, hue, saturation and brightness property, mention additive method, such as the subtractive color mixture principle, and introduces several common color model, the final show some personal map rendering, hope to be able to help you better understand and learn the knowledge of color, the color space.
At the same time, in the process of writing this article, the author also compares uneasy, with the deep understanding of the knowledge of color, found that many cannot complete control of their knowledge, for example, in delving into the RYB model and the RGB model transformation algorithm, have been slow to progress, a handful of information over the Internet, and find the algorithm of in-depth study, It is found that mutual conversion can not be completely reasonable and correct match, so there is no simple introduction for you. In addition, for the hexadecimal representation of many RGB colors and the real color naming, I was also hesitant about the mismatch problem, and I didn’t know which one to use to express it, which could be more close to the real effect. Finally, I decided to use the way to express it, which was easier for us to see and accept in most scenes. Of course, the most important thing is to worry about your fallacies and be sure to correct any flaws you find.
This is the beginning of the column “Magic Colors”, and I will gradually display all kinds of amazing and interesting models in the way of color. If you are interested, look forward to continuing to pay attention to more fun interesting color world let more people see.
Two in the works:
- I’m black, you’re white, and we’re white and black? Talk about alpha blending mode.
- What kind of green are you talking about?
The resources
- Especially easy to use color website, you can query all color information, strongly recommend collection.
- Understand the general composition of the image
- A very interesting complex phase ring
- Model – to – model conversion tool to help verify the accuracy of color conversion
- Help you learn to understand art knowledge, very rise posture