3. Color

3. Color 3.1 What is Color? ● Psychological primaries (primary colors): Red, blue, green, and yellow ● Achromatic colors: black, grey, and white ● Colors have different visual effects that depend on the lightness or darkness of the background color. ● A basic color must generate complementary colors ○ The gray area under the red background looks a little green, and the visual effect is cold. ○ Green is the complementary color of red, and the gray areas on the green background reveal red accordingly. ● In fact, there is no such thing as a color ring. The color spectrum of visible light ranges from 380 nanometers to 780 nanometers, and the corresponding colors at both ends are purple and red, respectively. The two colors and the colors between them should be connected in a straight line, rather than a ring. Bending this color line into a closed ring is artificial, not its original appearance. ● Website designers and graphic designers use different colors in their work. 3.2 RGB and CMYK Color Spaces ● Strictly speaking, the color of all white objects we see can only be said to be similar to white, and the color of all black objects is only relatively close to black. ● The color of all the object surfaces we see (including the surface of the printed matter) is actually the result of subtractive color mixing, which is the color formed by the white light filtering. ● Basic printing colors: cyan, magenta, yellow ● The basic colors of pigments by the subtractive color method are mixed in twos of cyan, magenta and yellow to form the basic colors of light color with the additive colors - red, green and blue. ● The so-called color space is made up of all colors that are generated based on a certain color system and the basic colors it contains. ● Although the pigment colors of subtraction and mixing play a great role in the printing process, when viewing pictures through impression scanning equipment and digital cameras or watching videos with computer monitors and projectors, we see the light colors of pseudo-addition mixing. ○ Generally, when taking pictures with digital cameras, the photos will be greenish, which is also compatible with the fact that there are many green vertebral cells in the human eye. ● The colors seen on monitors are more vivid. ● The printing basis of the CMYK color space is paper. ● The more basic the color components are, the darker the overprinted picture ○ The RGB color space is mixed on the basis of matteness and darkness. ● The higher the intensity of each color, the brighter the picture appears. 3.3 Other Color Spaces ● Lab: is a reference color space in PS and can play a role in the conversion of different color spaces. ● HSB: H = hue; S = saturation; B = brightness ● 7 types of contrast between different colors: ○ Light and dark contrast ○ Cold and warm contrast ○ Complementary contrast ○ Synchronous contrast ○ Color quality contrast ○ Color quantity contrast ○ Color relative contrast 3.4 Hue, Lightness, Saturation ● Saturation can be defined as the "purity", "chroma" or "vibrancy" of the color ○ High saturation = vivid colors ○ Low saturation = plain colors ○ Zero saturation = gray 3.5 Hue Value ● When people remove the saturation of a certain color, the hue value is the most obvious. ● We want to strive for the visual effect of the trademark to remain the same, even in black and white mode (or a change to another color). ○ Even the richest companies will inevitably have some black and white advertisements because certain media only releases monochrome products. ● You should also pay attention to the mutual influence of putting a certain color element in another color, especially when it comes to text. ○ If you don’t pay attention, it will destroy the visual effect. 3.6 Color Ring ● Color rings can help us understand the process of forming mixed colors based on the desired effect of the design. ● For graphic designers, the most significant complementary pairs are red and cyan, green and magenta, and blue and yellow. 3.7 Contrast of Colors ● 3.7.1 Hue Contrast ○ When we arrange two or three colors together, there will be a color contrast. This is the simplest among the comparisons, but also the strongest. ○ The contrast between the primary colors of the color space is particularly strong, such as red, green and blue or cyan, magenta and yellow ○ The contrast between the mixed colors is more peaceful, but just as sharp. ● 3.7.2 Light and Dark Contrast ○ Pure colors make people dazzled before they see the main message of the work. ○ The contrast between light and dark is of course not only between black and white and various gray tones, but also different brightness of various colors. ○ Among the basic colors, the contrast between blue and yellow is the highest, second only to the contrast of achromatic black and white. The basic colors with the lowest contrast between light and dark are magenta and green and some other colors that are adjacent to each other in the color circle. ● 3.7.3 Cold and Warm Contrast ○ In the fields of photography and science, blue light has a higher color temperature than red or yellow light, but in the eyes of designers, it is the opposite. ○ In the future, we will still use the psychological experience of color as a reference, and temporarily put the physical color temperature aside, so red is still warm, and blue is still cool. ● 3.7.4 Complementary Contrast ○ The three complementary colors in the basic colors have their own characteristics: ■ Blue and yellow are the pair of complementary colors with the highest contrast between light and dark ■ Red and cyan have the strongest contrast between warm and cold ■ Green and magenta have the lowest contrast between light and dark. ● 3.7.5 Synchronous Contrast ○ The theory of synchronous contrast shows that each color can produce its complementary color in a specific environment. ● 3.7.6 Color Quality Contrast ○ The most practical comparisons for the design process: color and complementary contrast, light and dark contrast, and color quality contrast. ○ Color quality contrast refers to the contrast high and low-saturated colors ○ Commercial designers should also learn the persistent spirit of artists, and occasionally put down the full palette, pick only one color, and use the different transformations of monochrome to create a good work. ● 3.7.7 Color Quantity Contrast ○ This concept involves the relationship of the size of different color areas. ○ It sums up a solution that allows different colors to be coordinated together: ■ Yellow (3) : orange (4) : red (6) : purple (9) : blue (8) : green(6) ● 3.7.8 Color Harmony ○ Harmonious three-phase color: an equilateral triangle in the center of the color circle shows the harmonious relationship between the three-phase colors. ○ Complementary three-phase color: an isosceles triangle whose top angle is a certain basic color, and the remaining two corners refer to two colors adjacent to the complementary colors of that basic color. ○ The contrast of these color combinations is strong, but they are not too cluttered and destroy the visual harmony. ○ In the design, the mixing of different fonts and different colors is very challenging ■ Some people think that the combination of colors based on squares and equilateral triangles produces extreme effects, which is a prejudice. ○ Harmonious complementary colors: Harmonious complementary colors do not appear in a certain shape on the color wheel, but form a line through the color circle. A bunch of complementary colors form a set of double colors, and the double colors increase to quadruple colors as the line segment passes through the center of the color ring. ○ Pictures, photos, and graphics created by the transformation of the same color tone value are called single-phase color works. ○ Harmonious near-phase color: In a harmonious near-phase color combination, each point is connected into an arc centered on the color ring. 3.9 Colors and Associations About Them ● 3.9.1 Red ○ Red is always prominent and eye-catching; it is the "closest color". ○ Red can express desire and love, but also hatred. ○ It is the color of blood and also represents war and violence ○ Associations about red: love, war, pornography, heat, danger, anger, enthusiasm, hatred, warning, spicy, fire, energy, communism, socialism, vitality, sports, intimacy, etc. ○ Red means “important” - we use red to mark important information. ■ Because red is very prominent, we rarely use it as the background color in the design, otherwise the theme image will appear dull compared to red ○ Red and black: danger ; Black, red, and yellow: casual and comfort ○ It is best to combine the red forecast colors in the design, which is bright and vibrant. ● 3.9.2 Blue ○ Blue represents knowledge, science, and wisdom, and is also an iconic color for health, sports, and technology ○ Blue is far away. Blue is obviously the best background color. The farther away the object is from us, the more blue it appears, so blue is easy to give people a sense of distance, which is the opposite of red. Blue feels calm, soft, and gentle. ○ Associations about blue: distance, cold, quiet, wide, clean, boundless, sky, water, harmony, relaxation, technology, seriousness, dream, longing, loyalty, fantasy, freedom, etc. ○ Blue is serious, free, the color of ordinary class, and is a union color ○ From a psychological point of view, the effects of blue and red are the strongest. ■ The combination of them is the epitome of all colors. ○ Blue + gray looks very calm and solemn → technical field characteristics ○ Bright blue + white looks vibrant → suitable for symbolizing ingenuity and innovative ability. ● 3.9.3 Green ○ Green is linked to the life of plants. ○ If a representative color of a certain social class is exclusive, then green is the color of the middle class, red is the color of the nobility, and blue (indigo) is the color of the general public. ○ Green makes people feel calm. ■ We know that blue produces a sense of distance, co-coloring and aggressiveness, and green is indeed peaceful and modest. ■ Blue is cold, red is hot, and the green temperature is just right ○ Associations about green: nature, health, ecology, spring, hope, vitality, life, fruitfulness, vitality, youth, growth, fertility, immaturity, jealousy, evil, hunting ○ If nature and ecology are the themes, green is the well-deserved color of choice. ■ Green not only reminds people of the growth of nature, but also heralds economic growth, so it is often used by some companies, such as banks and insurance companies ○ Red + green are the colors of Christmas. ○ Green + orange/yellow will make the green look fresh and full → fruit shops ○ The green grass and blue sky or water form a fresh and natural color space, which makes people not only think of leisure time and fresh air, but also feel relaxed and comfortable. ○ Green + purple/black has the meaning of hypocrisy and viciousness ● 3.9.4 Yellow ○ Yellow is the brightest and most sensitive of all colors ○ Its warm colors are suitable for creating a comfortable and warm atmosphere. ○ Yellow also means lively, optimistic, friendly and friendly. ○ It is an iconic color of the sun and summer, a symbol of good weather ○ Associations related to yellow: summer, sunshine, gold, optimism, vitality, maturity, blooming, shame, sulfur, jealousy, envy, angry, miserly, arrogant, cheating, dangerous, angry, etc. ○ With yellow as the background and black font, it has a good farsightedness effect ■ The combination of yellow and black can be a good warning ● 3.9.5 Orange ○ Orange is clearly seen in the distance, so it is often used as a warning color. The warning vests that every driver must equip today are orange or yellow. ○ Orange + black is very shiny, but also a bit dazzling. ○ Orange + brown make up the colors of autumn, which symbolizes maturity and harvest, but also the withering of vegetation. ■ This combination is quiet, warm, and comfortable, but also looks old and outdated, mainly when there are duller browns and oranges. ○ Orange + red look fresh, sweet, and full. ○ Orange + purple is full of high-profile and luxurious. ● 3.9.6 Purple ○ Purple-related associations: religion, personality, obscurity, magic, mystery, fantasy, sex, originality, homosexuality, feminism, rights, glitz, sin, seduction, depravity, contrition, ambiguity, emotional use ● 3.9.7 Pink ○ Pink-related associations: charming, polite, soft, sensitive, fragile, delicate, love, vanity, high-quality, sweet, petite, romantic, cute ○ Pink + white looks delicate and sweet ○ Pink +black are sexy and attractive, and it is even more exquisite with purple. ● 3.9.8 Brown ○ Associations related to brown: chocolate, coffee, land, leather, Nazis, dung, beer, disgust, stains, autumn, decay, plants, raw, natural materials ○ Brown also represents comfort, naturalness, and no modification. ○ Brown + orange/yellow looks fresh, natural, and vibrant. ○ Brown + red looks comfortable and traditional, but also conservative, outdated, or even vulgar. ● 3.9.9 Black ○ Black-related associations: death, sorrow, night, nothingness, neutral, hostility, abyss, solemnity, reliability, inability, evil, heaviness, integrity, cyan, truth ○ Black is elegant and very emotional. ○ Black objects look heavier than objects of other colors. Black as a background color can make other colors appear brighter. Black is just and selfless. Only when we see black on white paper can we believe the authenticity of an event. ● 3.9.10 White ○ Associations related to white: innocent, pure, upright, chaste, bright, daytime, empty, untouched, beautiful, pale, ghost ○ White is the ideal background color. On a white background, all colors can fully demonstrate their qualities. White gives a friendly, warm, and bright feeling. ■ In fact, no color is lighter than white. ○ Blank space is an important part of the design. ○ Like black, white has always been the darling of the fashion world. All other popular colors have a certain shelf life, but black and white are timeless classics. ● 3.9.11 Grey ○ Grey-related associations: bad weather, materials, numbness, old age, frustration, technology, theory, humility ○ Gray is the supporting role of oil. The light gray plane is a low-key and restrained design element, and the text on the dark gray or graphite background looks softer than the straight black on the white paper. ○ Gray is also the color of precious silver and platinum.