HEX/HTML

HEX color is nothing but a hexadecimal representation of RGB.

Colors are represented as three groups of hexadecimal digits, where each group is responsible for its own color: #112233, where 11 is red, 22 is green, 33 is blue. All values must be between 00 and FF.

Many applications allow a shortened form of hexadecimal color notation. If each of the three groups contains the same characters, for example #112233, then they can be written as #123.

h1 ( color: #ff0000; ) /* red */
h2 ( color: #00ff00; ) /* green */
h3 ( color: #0000ff; ) /* blue */
h4 ( color: #00f; ) /* same blue, shorthand */

RGB

The RGB (Red, Green, Blue) color space consists of all possible colors that can be created by mixing red, green, and blue. This model is popular in photography, television, and computer graphics.

RGB values are specified as an integer from 0 to 255. For example, rgb(0,0,255) is displayed as blue because the blue parameter is set to its highest value (255) and the others are set to 0.

Some applications (particularly web browsers) support percentage recording of RGB values (from 0% to 100%).

h1 ( color: rgb(255, 0, 0); ) /* red */
h2 ( color: rgb(0, 255, 0); ) /* green */
h3 ( color: rgb(0, 0, 255); ) /* blue */
h4 ( color: rgb(0%, 0%, 100%); ) /* same blue, percentage entry */

RGB color values are supported in all major browsers.

RGBA

Recently, modern browsers have learned to work with the RGBA color model - an extension of RGB with support for an alpha channel, which determines the opacity of an object.

The RGBA color value is specified as: rgba(red, green, blue, alpha). The alpha parameter is a number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).

h1 ( color: rgb(0, 0, 255); ) /* blue in regular RGB */
h2 ( color: rgba(0, 0, 255, 1); ) /* the same blue in RGBA, because opacity: 100% */
h3 ( color: rgba(0, 0, 255, 0.5); ) /* opacity: 50% */
h4 ( color: rgba(0, 0, 255, .155); ) /* opacity: 15.5% */
h5 ( color: rgba(0, 0, 255, 0); ) /* completely transparent */

RGBA is supported in IE9+, Firefox 3+, Chrome, Safari, and Opera 10+.

HSL

The HSL color model is a representation of the RGB model in a cylindrical coordinate system. HSL represents colors in a more intuitive and human-readable way than typical RGB. The model is often used in graphics applications, color palettes, and image analysis.

HSL stands for Hue (color/hue), Saturation (saturation), Lightness/Luminance (lightness/lightness/luminosity, not to be confused with brightness).

Hue specifies the position of the color on the color wheel (from 0 to 360). Saturation is the percentage value of the saturation (from 0% to 100%). Lightness is a percentage of lightness (from 0% to 100%).

h1 ( color: hsl(120, 100%, 50%); ) /* green */
h2 ( color: hsl(120, 100%, 75%); ) /* light green */
h3 ( color: hsl(120, 100%, 25%); ) /* dark green */
h4 ( color: hsl(120, 60%, 70%); ) /* pastel green */

HSL is supported in IE9+, Firefox, Chrome, Safari, and Opera 10+.

HSLA

Similar to RGB/RGBA, HSL has an HSLA mode that supports an alpha channel to indicate the opacity of an object.

The HSLA color value is specified as: hsla(hue, saturation, lightness, alpha). The alpha parameter is a number ranging from 0.0 (fully transparent) to 1.0 (fully opaque).

h1 ( color: hsl(120, 100%, 50%); ) /* green in normal HSL */
h2 ( color: hsla(120, 100%, 50%, 1); ) /* the same green in HSLA, because opacity: 100% */
h3 ( color: hsla(120, 100%, 50%, 0.5); ) /* opacity: 50% */
h4 ( color: hsla(120, 100%, 50%, .155); ) /* opacity: 15.5% */
h5 ( color: hsla(120, 100%, 50%, 0); ) /* completely transparent */

CMYK

The CMYK color model is often associated with color printing and printing. CMYK (unlike RGB) is a subtractive model, meaning that higher values are associated with darker colors.

Colors are determined by the ratio of cyan (Cyan), magenta (Magenta), yellow (Yellow), with the addition of black (Key/blacK).

Each of the numbers that define a color in CMYK represents the percentage of ink of a given color that makes up the color combination, or more precisely, the size of the screen dot that is output on the phototypesetting machine on film of that color (or directly on the printing plate in the case of CTP).

For example, to obtain the PANTONE 7526 color, you would mix 9 parts cyan, 83 parts magenta, 100 parts yellow, and 46 parts black. This can be denoted as follows: (9,83,100,46). Sometimes the following designations are used: C9M83Y100K46, or (9%, 83%, 100%, 46%), or (0.09/0.83/1.0/0.46).

HSB/HSV

HSB (also known as HSV) is similar to HSL, but they are two different color models. They are both based on cylindrical geometry, but HSB/HSV is based on the "hexcone" model, while HSL is based on the "bi-hexcone" model. Artists often prefer to use this model, it is generally accepted that the HSB/HSV device is closer to the natural perception of colors. In particular, the HSB color model is used in Adobe Photoshop.

HSB/HSV stands for Hue (color/hue), Saturation (saturation), Brightness/Value (brightness/value).

Hue specifies the position of the color on the color wheel (from 0 to 360). Saturation is the percentage value of the saturation (from 0% to 100%). Brightness is a percentage of brightness (from 0% to 100%).

XYZ

The XYZ color model (CIE 1931 XYZ) is a purely mathematical space. Unlike RGB, CMYK, and other models, in XYZ the principal components are “imaginary,” meaning you cannot associate X, Y, and Z with any set of colors to mix. XYZ is the master model for almost all other color models used in technical fields.

LAB

The LAB color model (CIELAB, “CIE 1976 L*a*b*”) is calculated from the CIE XYZ space. Lab's design goal was to create a color space in which color changes would be more linear in terms of human perception (compared to XYZ), that is, so that the same change in color coordinate values in different regions of the color space would produce the same sensation of color change.

Color and its models

Sofia Skrylina, teacher at the Art training center, St. Petersburg

In CompuArt No. 7 "2012, an article was presented about harmonious color combinations and patterns of the influence of color on human perception, which modern designers undoubtedly take into account in their projects. But when working at a computer and mixing colors on a monitor screen, specific problems arise. The designer must obtain on the monitor screen or on a hard copy exactly the color, tone, tint and lightness that is required. The colors on the monitor do not always match natural colors. It is very difficult to get the same color on the screen, on the printout of the color printer and on the printing press. The fact is that colors in nature, on a monitor and on a printed sheet are created in completely different ways.
To unambiguously determine colors in various color environments, there are color models, which we will talk about in this article.

RGB model

The RGB color model is the most popular way to represent graphics and is suitable for describing the colors visible on a monitor, TV, video projector, as well as images created during scanning.

The RGB model is used to describe colors obtained by mixing three rays: red (Red), green (Green) and blue (Blue). The model name is made from the first letters of the English names of these colors. The remaining colors are obtained by combining the basic ones. This type of color is called additive because when two rays of primary colors are added (mixed), the result becomes lighter. In Fig. 1 shows what colors are obtained by adding the basic ones.

In the RGB model, each base color is characterized by brightness, which can take 256 values - from 0 to 255. Therefore, you can mix colors in different proportions, changing the brightness of each component. Thus, you can get 256x256x256 = 16,777,216 colors.

Each color can be assigned a code using decimal and hexadecimal representations of the code. Decimal notation is a trio of decimal numbers separated by commas. The first number corresponds to the brightness of the red component, the second to the green, and the third to the blue. Hexadecimal representation is three two-digit hexadecimal numbers, each of which corresponds to the brightness of the base color. The first number (first pair of digits) corresponds to the brightness of red, the second number (second pair of digits) corresponds to green, and the third (third pair) corresponds to blue.

To check this fact, open the color picker in CorelDRAW or Photoshop. In the R field, enter a maximum red brightness value of 255, and in the G and B fields, enter a value of zero. As a result, the sample field will contain red, the hexadecimal code will be: FF0000 (Fig. 2).

Rice. 2. Representation of red color in the RGB model: on the left - in the Photoshop palette window, on the right - CorelDRAW

If you add green at maximum brightness to red by entering 255 in the G field, you get yellow, whose hexadecimal representation is FFFF00.

The maximum brightness of all three basic components corresponds to white, the minimum to black. Therefore, the code for white color in decimal is (255, 255, 255), and in hexadecimal it is FFFFFF16. Black color is coded accordingly (0, 0, 0) or 00000016.

All shades of gray are formed by mixing three components of the same brightness. For example, R = 200, G = 200, B = 200, or C8C8C816 produces a light gray color, while R = 100, G = 100, B = 100, or 64646416 produces a dark gray color. The darker shade of gray you want, the lower the number you need to enter in each text box.

What happens when an image is printed, how are colors transmitted? After all, paper does not emit, but absorbs or reflects color waves! When transferring a color image to paper, a completely different color model is used.

CMYK model

When printing, ink is applied to paper - a material that absorbs and reflects color waves of different lengths. Thus, the paint acts as a filter, transmitting strictly defined rays of reflected color, subtracting all others.

The CMYK color model is used for mixing paints by printing devices - printers and printing presses. The colors of this model are obtained by subtracting the base colors of the RGB model from white. That's why they are called subtractive.

The following colors are basic for CMYK:

blue (Cyan) - white minus red (Red);
purple (Magenta) - white minus green (Green);
yellow (Yellow) - white minus blue (Blue).

In addition to these, black color is also used, which is the Key color in the color printing process. The fact is that real paints have impurities, so their colors do not exactly correspond to the theoretically calculated cyan, magenta and yellow. Mixing three basic colors that should produce black produces instead a vague dirty brown. Therefore, black is included among the main printing inks.

In Fig. Figure 3 shows a diagram from which you can see what colors are obtained when mixing base colors in CMYK.

It should be noted that CMYK inks are not as pure as RGB inks. This explains the slight discrepancy between the base colors. According to the diagram presented in Fig. 3, at maximum brightness the following color combinations should be obtained:

mixing magenta (M) and yellow (Y) should produce red (R) (255, 0, 0);
mixing yellow (Y) and blue (C) should give green (G) (0, 255, 0);
mixing magenta (M) and cyan (C) should produce blue (B) (0, 0, 255).

In practice, it turns out somewhat differently, which we will check next. Open the Color Picker dialog box in Photoshop. In the M and Y text boxes, enter 100%. Instead of the base red color (255, 0, 0), we have a red-orange mixture (Figure 4).

Now in the Y and C text boxes enter the value 100%. Instead of the base green color (0, 255, 0), the result is green with a slight hint of blue. When setting the brightness to 100% in the M and C fields, instead of the blue color (0, 0, 255), we have a blue color with a purple tint. Moreover, not all colors in the RGB model can be represented in the CMYK model. RGB color gamut is wider than CMYK.

The primary colors of the RGB and CMYK models are in the relationship shown on the color wheel diagram (Fig. 5). This scheme is used for color correction of images; examples of its use were discussed in CompuArt No. 12"2011.

RGB and CMYK models are hardware dependent. For the RGB model, the values of the base colors are determined by the quality of the phosphor for CRTs or the characteristics of the backlight lamps and panel color filters for LCD monitors. If we turn to the CMYK model, then the values of the base colors are determined by real printing inks, features of the printing process and the media. Thus, the same image can look different on different equipment.

As noted earlier, RGB is the most popular and frequently used model for representing color images. In most cases, images are prepared for display through a monitor or projector and for printing on color desktop printers. In all these cases it is necessary to use the RGB model.

Comment

Although color printers use CMYK ink, most images must be converted to RGB before being printed. However, the printed image will appear slightly darker than on your monitor, so you will need to lighten it before printing. The amount of brightening for each printer is determined empirically.

The CMYK model must be used in one case - if the image is being prepared for printing on a printing press. Moreover, it should be taken into account that the CMYK model does not contain as many colors as the RGB model, therefore, as a result of conversion from RGB to CMYK, the image may lose a number of shades that are unlikely to be restored by the reverse conversion. Therefore, try to convert the image to CMYK model at the final stage of working with it.

Model HSB

The HSB model simplifies working with colors, since it is based on the principle of color perception by the human eye. Any color is determined by its hue (Hue) - the color itself, Saturation - the percentage of white paint added to the color and Brightness - the percentage of black paint added. In Fig. Figure 6 shows a graphical representation of the HSB model.

Spectral colors, or color tones, are located along the edge of the color wheel and are characterized by a position on it, which is determined by the angle in the range from 0 to 360°. These colors have maximum (100%) saturation (S) and brightness (B). Saturation varies along the radius of the circle from 0 (in the center) to 100% (at the edges). A saturation value of 0% makes any color white.

Brightness is a parameter that determines lightness or darkness. All colors on the color wheel have a maximum brightness (100%) regardless of hue. Decreasing the brightness of a color means darkening it. To display this process on the model, a new coordinate is added, directed downward, on which brightness values from 100 to 0% are plotted. The result is a cylinder formed from a series of circles of decreasing brightness, the bottom layer being black.

To test this statement, open the color selection dialog in Photoshop. In the S and B fields enter the maximum value of 100%, and in the H field enter the minimum value of 0°. As a result, we get the pure red color of the solar spectrum. The same color corresponds to the red color of the RGB model, its code is (255, 0, 0), which indicates the relationship of these models (Fig. 7).

In the H field, change the angle value in 20° increments. You will get colors in the order in which they appear on the spectrum: red will change to orange, orange to yellow, yellow to green, etc. An angle of 60° gives yellow (255, 255, 0), 120° gives green (0, 255, 0), 180° - blue (255, 0, 255), 240° - blue (0, 0, 255), etc.

To get a pink color, in the language of the HSB model - faded red, you need to enter the value 0° in the H field, and reduce the saturation (S) to, for example, 50%, setting the maximum brightness value (B).

Gray for the HSB model is hue (H) and saturation (S) reduced to zero with brightness (B) less than 100%. Here are examples of light gray: H = 0, S = 0, B = 80% and dark gray: H = 0, S = 0, B = 40%.

The white color is set as follows: H = 0, S = 0, B = 100%, and to get black, it is enough to reduce the brightness value to zero for any hue and saturation values.

In the HSB model, any color is obtained from the spectral color by adding a certain percentage of white and black paints. Therefore, HSB is a very easy-to-understand model that is used by painters and professional artists. They usually have several basic colors, and all the others are obtained by adding black or white to them. However, when artists mix paints derived from base paints, the color goes beyond the HSB model.

Model Lab

The Lab model is based on the following three parameters: L— brightness (Lightness) and two chromatic components — a And b. Parameter a varies from dark green through gray to purple. Parameter b contains colors from blue through gray to yellow (Fig. 8). Both components change from -128 to 127, and the parameter L— from 0 to 100. A zero value of color components at a brightness of 50 corresponds to gray. A brightness value of 100 produces white, while a brightness value of 0 produces black.

The concepts of brightness in the Lab and HSB models are not identical. As in RGB, mixing colors from scales a And b allows you to get more vibrant colors. You can reduce the brightness of the resulting color using the parameter L.

Open the color picker in Photoshop, in the brightness field L enter the value 50 for the parameter a enter the smallest value -128, and the parameter b reset. The result is a blue-green color (Figure 9). Now try increasing the parameter value a per unit. Note that the numerical values did not change in any model. Try increasing the value of this parameter to achieve changes in other models. You'll most likely be able to do this with a value of 121 (the green RGB component will decrease by 1). This circumstance confirms the fact that the Lab model has a O Larger color gamut compared to RGB, HSB and CMYK models.

In the Lab model, brightness is completely separated from the image, so in some cases this model is convenient to use for repainting fragments and increasing the saturation of the image, affecting only the color components a And b. It is also possible to adjust the contrast, sharpness and other tonal characteristics of the image by changing the brightness parameter L. Examples of image correction in the Lab model were given in CompuArt No. 3 "2012.

The Lab model's color gamut is wider than RGB, so each repeated conversion from one model to another is practically safe. Moreover, you can put the image into Lab mode, perform corrections in it, and then painlessly convert the result back to the RGB model.

The Lab model is hardware independent, serves as the core of the color management system in the Photoshop graphic editor and is used in hidden form during each conversion of color models as an intermediate one. Its color range covers the RGB and CMYK ranges.

Indexed colors

To publish an image on the Internet, not the entire color palette of 16 million colors is used, as in the RGB mode, but only 256 colors. This mode is called Indexed Color. A number of restrictions are imposed on working with such images. Filters, some tonal and color correction commands cannot be applied to them, and all operations with layers are not available.

With an image downloaded from the Internet (usually in GIF format), the following situation often arises. You can only draw something in it with a color different from the chosen one. This is because the selected color is outside the color palette of the indexed image, meaning that the color is not in the file. As a result, the color selected in the palette is replaced with the closest similar color from the color table. Therefore, before editing such an image, it is necessary to convert it to the RGB model.

The article was prepared based on materials from the book by Sofia Skrylina “Photoshop CS6. The most necessary things": http://www.bhv.ru/books/book.php?id=190413.

Why are different color models needed and why the same color can look different

Providing design services both in the field of web and in the field of printing, we often come across a question from the Client: why do the same corporate colors in the design layout of the website and in the design layout of printed products look different? The answer to this question lies in the differences between color models: digital and printed.

The color of a computer screen varies from black (no color) to white (the maximum brightness of all components of color: red, green and blue). On paper, on the contrary, the absence of color corresponds to white, and the mixing of the maximum number of colors corresponds to dark brown, which is perceived as black.

Therefore, when preparing for printing, the image must be converted from additive ("folding") flower models RGB into subtractive (“subtractive”) CMYK model. The CMYK model uses the opposite colors of the original colors - the opposite of red is cyan, the opposite of green is magenta, and the opposite of blue is yellow.

Digital RGB color model

What is RGB?

The abbreviation RGB means the names of three colors used to display a color image on the screen: Red (red), Green (green), Blue (blue).

How is RGB color formed?

The color on the monitor screen is formed by combining rays of three primary colors - red, green and blue. If the intensity of each of them reaches 100%, then the color white is obtained. The absence of all three colors produces black.

Thus, any color that we see on the screen can be described by three numbers indicating the brightness of the red, green and blue color components in the digital range from 0 to 255. Graphics programs allow you to combine the required RGB color from 256 shades of red, 256 shades of green and 256 shades of blue. The total is 256 x 256 x 256 = 16.7 million colors.

Where are RGB images used?

RGB images are used to display on a monitor screen. When creating colors for viewing in browsers, the same RGB color model is used as a basis.

Printing color model CMYK

What is CMYK?

The CMYK system is created and used for typographic printing. The abbreviation CMYK stands for the names of the primary inks used for four-color printing: cyan (Cyan), magenta (Magenta) and yellow (Yellow). The letter K stands for black ink (BlacK), which allows you to achieve a rich black color when printing. The last letter of the word is used, not the first, to avoid confusion between Black and Blue.

How is CMYK color formed?

Each of the numbers that define a color in CMYK represents the percentage of paint of that color that makes up the color combination. For example, to get a dark orange color, you would mix 30% cyan, 45% magenta, 80% yellow, and 5% black. This can be expressed as follows: (30/45/80/5).

Where are CMYK images used?

The scope of application of the CMYK color model is full-color printing. It is this model that most printing devices work with. Due to color model mismatches, there is often a situation where the color you want to print cannot be reproduced using the CMYK model (for example, gold or silver).

In this case, Pantone inks are used (ready-made mixed inks of many colors and shades), they are also called spot inks (since these inks are not mixed during printing, but are opaque).

All files intended for printing must be converted to CMYK. This process is called color separation. RGB covers a larger color range than CMYK, and this must be taken into account when creating images that you later plan to print on a printer or printing house.

When viewing a CMYK image on a monitor screen, the same colors may appear slightly differently than when viewing an RGB image. The CMYK model cannot display the very bright colors of the RGB model; the RGB model, in turn, is not able to convey the dark, dense shades of the CMYK model, since the nature of the color is different.

The color display on your monitor screen changes frequently and depends on lighting conditions, monitor temperature, and the color of surrounding objects. In addition, many colors seen in real life cannot be output when printed, not all colors displayed on screen can be printed, and some print colors are not visible on a monitor screen.

Thus, when preparing a company logo for publication on the website, we use the RGB model. When preparing the same logo for printing in a printing house (for example, on business cards or letterhead), we use a CMYK model, and the colors of this model on the screen may be visually slightly different from those we see in RGB. There is no need to be afraid of this: after all, on paper, the colors of the logo will closely match the colors that we see on the screen.

A color TV or your computer monitor is based on the principle of this division of light. To put it very roughly, the monitor you are looking at now consists of a huge number of dots (their number vertically and horizontally determines the resolution of the monitor) and three “lights” shine at each of these dots: red, green and blue. Each “light bulb” may shine with different brightness, or may not shine at all. If only the blue “light” shines, we see a blue dot. If only red, we see a red dot. Same with green. If all the light bulbs shine with full brightness at one point, then this point turns out to be white, since all the gradations of this white again come together. If no light bulb is shining, then the point appears black to us. Because black is the absence of light. By combining the colors of these “light bulbs”, glowing with different brightness, you can get different colors and shades.

The brightness of each such light bulb is determined by the intensity (division) from 0 (the “light bulb” is turned off) to 255 (the “light bulb” shining with full “power”). This division of colors is called the RGB color model from the first letters of the words “RED” “GREEN” “BLUE” (red, green, blue).

Thus White color our point in the RGB color model can be written in the following form:

R (from the word "red", red) - 255

G (from the word "green", green) - 255

B (from the word "blue", blue) - 255

A "rich" red would look like this:

The yellow color will look like this:

Also, to record colors in rgb, the hexadecimal system is used. The intensities are shown in #RGB order:

White - #ffffff

Red - #ff0000

Black - #00000

Yellow - #ffff00

CMYK color model

So, now we know in what cunning way our computer conveys to us the color of a particular point. Let's now use our acquired knowledge and try to get white using paints. To do this, we’ll buy gouache at the store, take jars of red, blue and green paint, and mix them. Happened? Neither do I.

The problem is that our monitor emits light, that is, it glows, but in nature many objects do not have this property. They simply reflect the white light that falls on them. Moreover, if an object reflects the entire spectrum of white light, then we see it as white, but if part of this light is absorbed by it, then not completely.

Something like this: we shine white light on a red object. White light can be thought of as R-255 G-255 B-255. But the object does not want to reflect all the light that we directed at it, and brazenly steals all the shades of green and blue from us. As a result, only R-255 G-0 B-0 is reflected. That is why it appears red to us.

So for printing on paper it is very problematic to use the RGB color model. For this, as a rule, the CMY (tsmi) or CMYK (tsmik) color model is used. The CMY color model is based on the fact that the sheet of paper itself is white, that is, it reflects almost the entire RGB spectrum, and the colors applied to it act as filters, each of which “steals” its own color (either red or green, or blue). Thus, the colors of these paints are determined by subtracting RGB colors from white one at a time. The resulting colors are Cyan (something like blue), Magenta (one might say pink), Yellow (yellow).

And if in the RGB color model each color was graded according to brightness from 0 to 255, then in the CMYK color model the main value for each color is “opacity” (the amount of paint) and is determined by percentages from 0% to 100%.

Thus, white color can be described as follows:

C (cyan) - 0%; M (magenta) - 0%; Y (yellow) - 0%.

Red - C-0%; M-100%; Y-100%.

Green - C-100%; M-0%; Y-100%.

Blue - C-100%; M-100%; Y-0%.

Black - C-100%; M-100%; Y-100%.

However, this is only possible in theory. But in practice, it’s impossible to get by with CMY colors. And the black color when printed turns out to be more of a dirty brown, the gray does not look like itself, and it is problematic to create dark shades of colors. Another paint is used to adjust the final color. Hence the last letter in the name CMYK (TsMIK). The decoding of this letter may be different:

It may be short for blacK (black). And in the abbreviation it is the last letter that is used so as not to confuse this color with the Blue color in the RGB model;

Printers very often use the word "Outline" in relation to this color. So it's possible that the K in CMYK is short for the German word "Kontur";

It can also be an abbreviation for Key-color (key color).

However, it is difficult to call it key, since it is rather additional. And this color doesn’t quite look like black. If you print only with this ink, the image turns out to be rather gray. Therefore, some are of the opinion that the letter K in the CMYK abbreviation stands for “Kobalt” (dark gray, German).

Typically, the term "black" or "black" is used to refer to this color.

Printing using CMYK colors is called "full color" or "process".

*It’s probably worth saying that when printing CMYK (CMIK) paints do not mix. They lie on the paper in “spots” (raster patterns) one next to the other and mix in the person’s imagination, because these “spots” are very small. That is, the image is rasterized, because otherwise the paint, falling on one another, blurs and moiré or dirt is formed. There are several different rasterization methods.

Grayscale color model

Many people mistakenly call an image in the grayscale color model black and white. But that's not true. A black and white image consists of only black and white tones. While grayscale (grayscale) has 101 shades. This is a Kobalt color gradation from 0% to 100%.

Device-dependent and device-independent color models

The CMYK and RGB color models are device-dependent, meaning they depend on the way color is transmitted to us. They tell a specific device how to use their corresponding dyes, but have no knowledge of how the final color is perceived by humans. Depending on the brightness, contrast and sharpness settings of the computer monitor, the room illumination, and the angle at which we look at the monitor, color with the same RGB parameters is perceived differently by us. And a person’s perception of color in the “CMYK” color model depends on an even larger number of conditions, such as the properties of the printed material (for example, glossy paper absorbs less paint than matte paper, so the colors on it are brighter and more saturated), characteristics of the paint, air humidity , at which the paper dried, the characteristics of the printing press...

To convey more reliable information about color to a person, so-called color profiles are attached to device-dependent color models. Each of these profiles contains information about a specific method of transmitting color to a person and regulates the final color by adding or subtracting parameters from any component of the original color. For example, when printing on glossy film, a color profile is used that removes 10% Cyan and adds 5% Yellow to the original color, due to the characteristics of the particular printing machine, the film itself and other conditions. However, even attached profiles do not solve all the problems of transmitting color to us.

Device-independent color models do not carry information to convey color to humans. They mathematically describe the color perceived by a person with normal color vision.

HSB and HLS color models

This color space is based on the familiar RGB rainbow ring. Color is controlled by changing parameters such as:

Hue- shade or tone;

Saturation- color saturation;

Brightness- brightness.

The hue parameter is the color. Determined in degrees from 0 to 360 based on the colors of the rainbow ring.

The saturation parameter - the percentage of white paint added to this color has a value from 0% to 100%.

The Brightness parameter - the percentage of adding black paint also varies from 0% to 100%.

The principle is similar to one of the representations of light from a fine art perspective. When white or black paint is added to existing colors.

This is the easiest color model to understand, which is why many web designers love it. However, it has a number of disadvantages:

The human eye perceives the colors of the rainbow ring as colors that have different brightnesses. For example, spectral green has greater brightness than spectral blue. In the HSB color model, all colors in this circle are considered to have a brightness of 100%, which, unfortunately, is not true.

Since it is based on the RGB color model, it is still hardware-dependent.

This color model is converted to CMYK for printing and converted to RGB for display on a monitor. So guessing what color you will end up with can be very problematic.

The HLS color model is similar to this model (interpretation: hue, lightness, saturation).

Sometimes used to correct light and color in an image.

LAB color model

In this color model, a color consists of:

Luminance - illumination. This is a combination of the concepts of brightness (lightness) and intensity (chrome)

A- a color range from green to purple

B- color range from blue to yellow

That is, two indicators together determine the color and one indicator determines its illumination.

LAB - This is a device-independent color model, that is, it does not depend on the way color is transmitted to us. It contains both RGB and CMYK colors, and grayscale, which allows it to convert an image from one color model to another with minimal loss.

Another advantage is that, unlike the HSB color model, it corresponds to the peculiarities of color perception by the human eye.

Often used to improve image quality and convert images from one color space to another.

CMYK color model- a four-channel color model for preparing not screen, but printed images, used in printing for color printing. It was proposed in 1951 by Andy Muller.
The combination of the three primary colors absorbs almost all the incident light, and from the outside the image appears almost black. Unlike the RGB model, increasing the amount of paint does not lead to an increase in visual brightness, but rather to a decrease. Therefore, to prepare printed images, not an additive (summing) model is used, but a subtractive (subtractive) model. The color components of this model are not the primary colors, but those resulting from subtracting the primary colors from white:
cyan (Cyan) = White - red = green + blue (0,255,255)
purple (lilac) (Magenta) = White - green = red + blue (255,0,255) yellow (Yellow) = White - blue = red + green (255,255,0).
These three colors are called complementary colors because they complement the primary colors to white.
A significant difficulty in printing is the color black. Theoretically, it can be obtained by combining three primary or additional colors, but in practice the result turns out to be unsuitable. Therefore, a fourth component has been added to the CMYK color model - black. This system owes the letter K in its name (blacK) to him.
Numerical values in CMYK are represented as numbers. Each of the numbers that define a color in CMYK represents the percentage of ink of a given color that makes up the color combination, or more precisely, the size of the screen dot that is output on a phototypesetting machine on film of a given color. For example, to obtain khaki color, you should mix 30% blue ink, 45% purple, 80% yellow and 5% black. This can be denoted as follows: (30,45,80,5).
In printing houses, color images are printed in several stages. By placing cyan, magenta, yellow and black prints on paper in turn, a full-color illustration is obtained. Printing with four CMYK inks is also called process ink printing. Therefore, the finished image obtained on a computer is divided into four components of a single-color image (CMYK) before printing. This process is called color separation. Modern graphic editors have tools to perform this operation. At the same time, colors may be reflected differently on different monitors, which is a significant drawback.
Adding a second paint to the primary color leads to the formation of a secondary color, while adding a third paint here leads to neutrality. To carry out color correction in CMYK space, this table, like a multiplication table, must be perceived automatically by the color channel. Contrast and color in CMYK space are interrelated - changing the contrast with curves or levels leads to a change in colors, just as changing the color with the appropriate tools leads to a change in contrast.
Cyan (Cyan), magenta (Magenta), yellow (Yellow) paints differ from ideal paints of subtractive color synthesis. Let's start with the fact that ideal paints should be completely transparent and absorb light from only one zone of the spectrum; naturally, such paints do not exist. All paints (not just printing ones) have incomplete absorption of light in two spectral zones and incomplete reflection in the main zone. To characterize a triad of printing inks, it is not enough to know what spectral absorption and colorimetric values the single-color areas have, since the color is obtained by autotypical synthesis, it is important to know the characteristics of the secondary and composite (three-color) areas.
Falling on the outer surface of the paint layer, the white illumination light is partially reflected from it (2), partially refracted (1), and part of the light passes into the paint layer. Since the binder is almost transparent, this light does not change its spectral composition until it encounters pigment particles and is again divided into reflected and refracted, but has already changed its spectral composition - colored. Some of this light comes to the surface, while some penetrates deeper into the layer. Encountering more and more pigment particles on its way, the light continues to be reflected and refracted. Moreover, the color saturation increases after each refraction. The light formed in the depths of the paint layer, making its way back, is again reflected and refracted - this light will be highly colored. If the paint layer is thick or the paint is not very transparent (covering paint), all the light will either be reflected or absorbed in the thickness of the layer and will not reach the substrate. If the paint is transparent or its layer is thin, the light, reaching the white substrate, will be reflected from it and, passing the paint layer in the opposite direction, will come out on the surface. When examining a print, we do not distinguish the colors of the radiation reflected from one or another depth of the layer, but we see the color of a mixture of these radiations. Triad paints are low-covering paints that provide transparency and do not cover pre-painted areas even with a significant thickness of the applied layer. At the same time, printing inks still scatter light, and therefore the total color of the overlays turns out to be different than with ideal subtractive synthesis. The sequence of layers plays an important role in the formation of color.
When printing in CMYK, the image is rasterized, that is, it is represented as a collection of dots of colors C, M, Y and K. At a distance, dots located close to each other merge, and the colors appear to be superimposed on each other. The eye mixes them and thus obtains the desired shade. Rasterization is divided into amplitude (the most commonly used, in which the number of dots is unchanged, but their size varies), frequency (the number of dots changes, but the size is the same) and stochastic, in which there is no regular structure of the arrangement of dots.

Sources used
1. igor-bon.narod.ru.
2. mini-soft.ru.
3. sketchpad.net.
4. Pre-press preparation. Donnie O'Queen. 2002.