Do you know that Photoshop is color blind?
  When I say "color blind", I do not mean small problems with the perception of shades of green and purple. I mean, he does not distinguish colors at all. All that Photoshop sees is black and white. Black, white and many intermediate shades of gray. The most powerful graphic editor in the world, the industry standard among photographers, designers and almost all creative professionals, capable of producing millions and even billions of colors, has no idea what color is.

You can look at your photo of the crystal blue water of the ocean, which was taken during the last vacation, but Photoshop sees it as a gray ocean. Have you been able to capture a rainbow crossing the sky after an evening summer hurricane? Photoshop sees her as a beautiful set of shades of gray. But what about the famous pot of gold? For Photoshop, this is just a big pot of something gray.
  Don't empathize with Photoshop. He is absolutely happy in his colorless world.

In fact, the only reason Photoshop shows us an image in color is because people themselves expect to see them in color. We would not know what to think if everything was displayed in black and white. But not Photoshop. For him there is nothing more expensive than black, white and gray.

So, Photoshop has no idea what color is in front of him, and all he knows and sees is black, white and gray, how does he show us images in color? I mean this image, which is open in Photoshop:

A photo opened in a Photoshop document window.

Obviously, this boy (or girl) is colored. Well, really, I don’t think there are more colorful birds than this. But here is not only a bird. Leaves on a colored background. The piece of wood on which the bird sits is also in color. Everything in the image is color! And this image is open in Photoshop, so how can this be if Photoshop does not distinguish colors? And if he really doesn’t see the color, how does Photoshop do such a great job of showing us something that he doesn’t see?

To answer this question, we need to consider two things. The first is color modes (colormode) and the second - color channels (channels).   Both are very interconnected, if you understand color modes (colormode),   then color channels (colorchannels)   will also become clearer to you.

We know, or at least agreed, with the fact that Photoshop does not see color. All he sees is black, white and gray. So how does he take these black, white and gray colors, turning them into the colors that we see on our screen? The answer is addiction. Dependence on what, you ask? This is a dependency color mode (colormode),   which uses Photoshop.

There are very few color modes in Photoshop, but the two main ones are RGB and CMYK. A couple of others you might have heard while working with Photoshop, this Grayscale   (Grayscale)and Lab (pronounced “al-hey-bi,” but not “Lab”). These are all examples of color modes, and they determine how Photoshop converts its black and white information to color, except for the color mode Grayscale   (Grayscale) that does not use colors. This is a strictly black and white mode, and quite often it is used to quickly convert a color image to black and white.

Of all the four modes that I named, the only one we will consider is RGB. CMYK mode is suitable for printing and publishing, we will return to it some other time. Mode Grayscale   (Grayscale)   as I said, it is used strictly for black-and-white images, and the Lab mode is not clear for most people living on this planet, as well as living on other planets, although it is often used in professional image editing, but even those people who they use it, do not have a complete understanding of how it works. Which leaves us with only RGB.

By far, the most widely used color mode of computers and technologies in the world is the RGB color mode. Photoshop uses it, other programs on your computer also use it, your monitor, digital camera and scanner, your TV, and even the small screen of your mobile or iPod use this mode, as well as portable game systems like Sony PSP or Nintendo DS . If it's a device that somehow displays or creates images, or image-editing software like Photoshop, it uses the RGB color mode. Sounds loud enough, right? And of course it is. For everything, it has a fairly broad meaning and importance, RGB is an abbreviation of three colors - red   (red) green   (green) and of blue   (blue).

RGB and color channels: the color world of red, green, and blue.
  What is so unusual in these three colors - red, green and blue? Yes, in general, only that they are the primary colors. What does it mean? This means that each color that we can see is created from some combination of red, green and blue. How do we get yellow? By mixing red and green. How do we get purple? By mixing red and blue. What about orange? 100% red and 50% green. And these are just simple examples. Each individual color that we see is created using a combination of these three colors. I know it sounds almost unrealistic, but it really is.
  When you mix the brightest variations of these colors among themselves, you will get a pure white color. When you completely remove all these three colors, you get pure black. And when you mix an equal amount in a percentage of 0 to 100%, you get shades of gray.
  Let's look at our image with a bird again:

In fact, a very colorful image, but where do all these colors come from? I’ll explain for beginners, let's look at the information that is reported to us at the top of the window of a Photoshop document:

Information at the top of the document window.

What I marked with a red circle, Photoshop explains to us that the image is used in the RGB color mode, which means that every color that we see in the photo is created from some combination of red, green and blue. If you want to make sure of this, all you need to do is hover over any part of the image and look at Information Panel (Info) in Photoshop.
  I will hover over the tip of the beak in the area of \u200b\u200bthe bright red area.

Hovering mouse over the tip of a bird's beak.

Let's turn to the panel Information   (Info) in Photoshop to see what he tells us about this point in the image:

Information panel (Info) Photoshop.

The part that interests us in the panel Information   (Info) Photoshop, located at the top left, it shows us the RGB values. The only thing you should understand is that Photoshop does not display RGB colors as a percentage, that is, we will not see a value like “10% red   (red), 40% green   (green) and 50% of blue   (blue). " Instead, RGB has values \u200b\u200bfrom 0 to 255, where 0 means the complete absence of the specified color in the image, and 255 indicates that full color is used.

Thus, if we look at the area that I highlighted, we will see that the point contains 216 values \u200b\u200bfor red   (red) (very important), 59 green   (green) (rather small value) and 1 of blue   (blue) (it could be 0), which means that at this point there is practically no blue color, and a very small amount of green. The vast majority of the color comes from red, which, in general, is natural, since the beak of a bird definitely has a red color.
  Let's look at another point. I hover over a section of the bird’s back:

Hovering over a point in the back of a bird.

This site looks green enough for me, and if we look at what the panel tells us Information   (Info):

Photoshop Info panel showing us the RGB values \u200b\u200bfor a portion of the image.

Then we will make sure that green   (green) is the dominant color with a value of 180. Red   (red) has a value of only 20, which is a very small value, and blue   (blue) even less than 16.
  Let's do it one more time. I will hover over somewhere near the bird’s head:

Hovering mouse over a point near the bird’s head.

This time blue should have a higher value in the panel Information   (Info):

Photoshop Info Panel showing RGB information for a point selected on a bird’s head.

And again made sure that this time blue   (blue) color has a predominant value of 208 and is the dominant color. Of course, the bird's head is not pure blue. She's more purple-blue, which explains why green   (green) is very important 100, and even red   (red) has a large enough value of 90. All three colors mixed together on the screen to form the purplish-blue color that we see.

I could continue to hover over any point in the photo (I don't want, but I could), and we could watch how the values \u200b\u200bchange red   (red) green   (green) and of blue   (blue) in the panel Information   (Info), since each individual color in the image consists of a specific combination of these three colors.
  This is how the RGB mode works. Again, RGB means nothing more than Red (Red) Green (Green) and Blue (Blue), and since this image is in RGB mode, Photoshop renders each color using combinations of red, green, and blue.
  The next thing we will look at in the second part of the image is color channels   (color channel).

At the moment, we have found that Photoshop does not see color. Everything in the world of Photoshop is created from black, white and some shades of gray. We also learned that Photoshop uses the RGB color mode to display colors on the screen by mixing different combinations. red   (red) green   (green) and of blue   (blue). But how does Photoshop know how much red, green, and blue you need to mix to get a separate color on the screen when it does not know what color should be? I mean, it's great that Photoshop can display pure yellow by blending full color red   (red) with a value of 255, and also green   (green) with the same value, but how does he know that it needs to be displayed in yellow?
  The answer is no way. How, no way?

That's how. Photoshop does not know that you expect to see yellow in a specific part of the image. He only knows that he is displayed when red   (red) with a value of 255 and green   (green) with a value of 255, and excludes blue   (blue). If this combination creates exactly the color that you and I call "yellow", then that's great, but Photoshop does not stand aside. All he knows is “display red   (red) with a value of 255, green   (green) - 255 and blue   (blue) 0 at a specific pixel. " When adding various colors to images, Photoshop is an artist, "coloring numbers".

So, since Photoshop adds a certain amount red   (red) green   (green) and of blue   (blue). How does he know how much each color needs to be added when all he understands is black, white and gray? Two words… Color channels   (Color Channels).
  Let's look at the image with the bird again:

So we see this image with you. That's how Photoshop sees it:

But hey. He also sees it like this:

But how does he see it in two different black and white versions? Good question. The answer is no way. He sees it in three different black and white versions. Here is another third:

Everything that we see in one color image, Photoshop sees in three separate black and white images. Each of these images represents a color channel. The first is the red channel, the second is green, and the third is blue. Three separate channels for three different colors, combined together will create a full-color image.

Think of color channels as color filters. While Photoshop displays a color image on the screen, it knows which colors to display due to the brightness of the light passing through the filters. First, it is highlighted through the red filter (red channel). If the light does not pass through the filter, Photoshop knows that it is necessary to display red with a value of 0. If all the light passes through the filter, then Photoshop fully displays red with a value of 255. If the amount of light passing through the filters is slightly less, Photoshop displays red a color with a value between 0 and 255, depending on how much light passes through the filter. Then he does the same with the green filter (green channel), setting it to 0 if the light does not pass through the filter, and 255 if the light completely passes through the filter, and some value between 0 and 255 if a little light passes. Then he does the same with the blue filter (blue channel). After that, he knows what value to set for red, green and blue, and combines them to create the color that we see. It does all this for every pixel of your image, so if your image contains millions of pixels, like most photos taken with a digital camera these days, Photoshop does this a million times and just to display the image you see on the screen. See how much Photoshop loves you? So, a second ago I said that Photoshop does not stand aside. We move on.
  Photoshop "Filters" use the three separate black and white images that we saw. Red:

So how does Photoshop use this black and white image as a red filter? Remember how I said that Photoshop ascribes red values \u200b\u200bfrom 0-255, based on how much light passes through the filter? So, how much light passes through the filter depends on how bright the area of \u200b\u200bblack and white in the image. Any area of \u200b\u200bpure black will not allow any light to penetrate, which means that in these areas of the image the value of red will be 0. Any area of \u200b\u200bpure white will allow light to penetrate completely, in these areas the value of red will be 255. And in areas with different shades of gray, which are the majority in the image, a certain amount of light passes, depending on how light or dark a portion of gray is represented.

In the image above we can see that the brightest areas of the image fall on the beak and chest of the bird, which confirms what I just said: these areas contain a greater amount of red in the full-color image. As well as areas of the back, wings and abdomen are very dark, therefore, in these areas there should not be much red or it is completely absent.
  Let's look at the full color version of the image again:

We said that the beak and chest should contain a lot of red, and as you can see, it is! We also said that the back, wings and stomach should not contain a lot of red, or it should not be present at all, and I really do not see red on them.
  Let's look again at the black and white image that Photoshop uses for the green channel:

This black and white image contains many bright areas, which means that a lot of green should be present in the photo. It is also strange that one of the brightest areas in the image is located next to the breast of the bird, but I do not remember that it was green. Let's check this by looking again at the full color image:

The image, of course, has a lot of green, which explains the many bright shades of gray in the black and white image. If I look at that side of the bird’s chest, which had the brightest area in the black and white image, it will not be green. In fact, it is very yellow! How is this possible? Simply. Red and green in combination give yellow, so Photoshop mixed red and green together to display yellow.
  Let's look at another black and white image that Photoshop uses as a blue channel:

In this image there are many very dark areas, especially on the bird itself, with the exception of the head, which is very light. This should mean that only one part of the bird will be displayed in blue - its head. Although her tummy should also have a noticeable amount of blue, so are the legs and the piece of wood on which she sits. Let's get a look:

We made sure that the bird's head is very blue, we also saw that its belly, as well as its legs and a piece of wood, are also blue. The rest of the bird does not have noticeable blue areas, therefore, dark areas appeared in these places on a black and white image.
We found out all about how the RGB color mode and color channels work in Photoshop, all but one thing. We still have not seen where you can access these color channels. You will find them in the correspondingly named panel Channels   (Channels), which are grouped together with the palette layers   (Layers).

Channels Panel Photoshop.

Palette Channels   (Channels) looks about the same as the palette layers   (Layers), only it shows information about color channels   (color channels) instead of layers. Here you see one Red   (Red) one Green   (Green) and one Blue   (Blue) channel, and each of them contains its own version of a black-and-white image, exactly like I showed in this lesson. The topmost RGB channel is not really a channel. It’s just a combination of three channels giving us a full-color photo. You can click separately for each channel in the palette. Channels   (Channels) to display its black and white image in the document window.
  That's all. We now know that Photoshop sees everything through the prism of black, white, and gray. We know that using the RGB mode (in any case, set by default) mixes different amounts of red, green and blue to get the full color image that we see on our screens. And we also know that depending on how much red, green and blue the black and white version of the image for each of the three channels will have its own, that all these operations are done for each individual pixel in the image. And thus, you and I can see the full-color version of the image, while Photoshop is content with black and white.
  Now we know how Photoshop loves us. This concludes this lesson.

Why do we need different color models and why the same color may look different

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

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

Therefore, in preparation for printing, the image must be converted from additive ("folding") color models RGB   subtractive (subtracting) cMYK model. The CMYK model uses the opposite of the original colors - the opposite of red cyan, the opposite of green magenta and the opposite of blue yellow.

RGB Digital Color Model

What is RGB?

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

How is RGB color formed?

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

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. Graphic 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 \u003d 16.7 million colors.

Where are RGB images used?

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

Printing color model CMYK

What is CMYK?

The CMYK system is created and used for typographic printing. CMYK abbreviation means the names of the basic 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, not the first letter of the word is used so as not to confuse Black and Blue.

How is CMYK color formed?

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

Where are CMYK images used?

The scope of the CMYK color model is full color printing. It is with this model that most printing devices work. Due to color model mismatch, a situation often arises where the color to be printed cannot be reproduced using the CMYK model (for example, gold or silver).

In this case, Pantone paints are used (ready mixed paints of many colors and shades), they are also called spot paints (since these paints do not mix when printing, but are opaque).

All files intended for printing should be converted to CMYK. This process is called color separation. RGB covers a wider color range than CMYK, and this must be taken into account when creating images, which are later planned to be printed on a printer or printing house.

When viewing a CMYK image on a monitor screen, the same colors may be perceived a little differently than when viewing an RGB image. In the CMYK model, it is impossible to display 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 the monitor screen often changes and depends on the lighting, the temperature of the monitor and the color of the surrounding objects. In addition, many colors visible in real life cannot be displayed during printing, not all colors displayed on the screen can be printed, and some printing colors are not visible on the monitor screen.

So, preparing the company logo for publication on the site, 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 the CMYK model, and the colors of this model on the screen may visually differ slightly from those that we see in RGB. You should not be afraid of this: after all, on paper the colors of the logo will correspond as much as possible to those colors that we see on the screen.

Different color modes:

1. RGB mode (millions of colors)
2. CMYK mode (four-color printing colors)
3. Indexed Color Mode (256 colors)
4. Grayscale mode (256 shades of gray)
5. Bit mode (2 colors)

The color mode, or image mode, determines how colors are combined based on the number of channels in the color model. Different color modes give different levels of color detail and file size. For example, use the CMYK color mode for images in a full-color print brochure, and the RGB color mode for images intended for the Internet or email to reduce file size while maintaining color fidelity.

RGB color mode

Photoshop's RGB mode uses the RGB model, assigning an intensity value to each pixel. In images with 8 bits per channel, the intensity values \u200b\u200brange from 0 (black) to 255 (white) for each of the RGB color components (red, green, blue). For example, bright red color has the value R \u003d 246, G \u003d 20 and B \u003d 50. If the values \u200b\u200bof all three components are the same, a neutral gray dimming results. If the values \u200b\u200bof all components are 255, then pure white is obtained, and if 0, then pure black.

To reproduce the colors on the screen, RGB colors use three colors, or channel. In images containing 8 bits per channel, each pixel contains 24 bits (3 channels of 8 bits) of color information. In 24-bit images, three channels can reproduce up to 16.7 million colors per pixel. In 48-bit (16 bits per channel) and 96-bit (32 bits per channel) images, each pixel can reproduce even more colors. Besides the fact that the RGB model is the default mode for new images created in Photoshop, it is also used for displaying colors by computer monitors. This means that when working in color modes other than RGB (for example, in CMYK), Photoshop converts the image to RGB for display on the screen.

Although RGB is the standard color model, the exact range of colors displayed may vary depending on the application and output device. Photoshop's RGB mode changes depending on the workspace settings that are set in the dialog box. "Color Adjustment".

CMYK mode

In CMYK mode, a pixel is assigned a percentage for each of the process colors. The lightest colors (backlight colors) are assigned a lower value, and the darker (shadow colors) are assigned a larger value. For example, a bright red color may consist of 2% cyan, 93% magenta, 90% yellow, and 0% black. If all four components are equal to 0% in CMYK images, a pure white color is obtained.

CMYK mode is used to prepare images for printing using process colors. Converting an RGB image to CMYK results in color separation. If the original image was RGB, it is best to edit it in RGB mode and only at the very end of the editing convert to CMYK. RGB mode commands "Color proofing options"   allow you to simulate the effects of conversion to CMYK, without changing the data itself. In CMYK mode, you can also work directly with CMYK images received from a scanner or imported from professional systems.

Although CMYK is a standard color model, the exact range of reproducible colors may vary depending on the press and printing conditions. Photoshop's CMYK mode changes depending on the workspace settings that are set in the dialog box. "Color Adjustment".

Lab color mode

The color model L * a * b * (Lab) of the International Lighting Commission is based on the perception of color by the human eye. In Lab mode, numerical values \u200b\u200bdescribe all the colors that a person with normal vision sees. Because Lab values \u200b\u200bdescribe how a color looks and not how much specific paint a device (such as a monitor, desktop printer, or digital camera) needs to reproduce colors, the Lab model is considered device independent   color model. Color management systems use Lab as a color guide to get predictable results when converting colors from one color space to another.

In Lab mode, there is a brightness component (L), which can be in the range from 0 to 100. In the Adobe color palette and in the Color panel, the components a   (green-red axis) and b   (blue-yellow axis) can have values \u200b\u200branging from +127 to –128.

Lab images can be saved in the following formats: Photoshop, Photoshop EPS, Large Document Format (PSB), Photoshop PDF, Photoshop Raw, TIFF, Photoshop DCS 1.0, and Photoshop DCS 2.0. 48-bit (16 bits per channel) Lab images can be saved in Photoshop, Large Document Format (PSB), Photoshop PDF, Photoshop Raw, and TIFF.

Note.

Files in DCS 1.0 and DCS 2.0 formats at the time of opening are converted to CMYK.

Grayscale Mode

In grayscale mode, images use different shades of gray. In 8-bit images, up to 256 shades of gray are allowed. Each pixel in a grayscale image contains a brightness value ranging from 0 (black) to 255 (white). In 16- and 32-bit images, the number of shades of gray is much larger.

Grayscale values \u200b\u200bcan also be expressed as a percentage of the total black ink coverage (0% is equivalent to white and 100% to black).

Grayscale mode uses the range defined by the workspace settings specified in the dialog box. "Color Adjustment".

Bit mode

Bit mode represents each image pixel in one of two values \u200b\u200b(black or white). Images in this mode are called bit (1-bit), since there is exactly one bit for each pixel.

duplex mode

Duplex mode creates monotone, duplex (two-color), triotone (three-color) and tetratone (four-color) grayscale images using one to four custom inks.

Indexed Colors Mode

The Indexed Colors mode produces 8-bit images containing no more than 256 colors. When converted to indexed color mode, Photoshop builds image color chart (CLUT)in which the colors used in the image are stored and indexed. If the color of the source image is not in this table, the program selects the closest available color or executes dithering   to simulate the missing color.

Although the color palette of this mode is limited, it allows you to reduce the size of the image file, while maintaining the image quality required for multimedia presentations, web pages, etc. The editing options in this mode are limited. If you need a lot of editing, you should temporarily switch to RGB mode. In indexed color mode, files can be saved in the following formats: Photoshop, BMP, DICOM (medical digital image and communication format), GIF, Photoshop EPS, large document format (PSB), PCX, Photoshop PDF, Photoshop Raw, Photoshop 2.0, PICT, PNG, Targa® and TIFF.

Multi-channel mode

Images in multi-channel mode contain 256 gray levels for each channel and can be useful in specialized printing. Such images can be saved in the following formats: Photoshop, Large Document Format (PSB), Photoshop 2.0, Photoshop Raw, and Photoshop DCS 2.0.

When converting images to multi-channel mode, the following information may be helpful.

Layers are not supported, and therefore they are flattened.

The color channels of the original image become spot color channels.

When you convert a CMYK image to multi-channel mode, cyan, magenta, yellow, and black spot color channels are created.

When converting an RGB image to multi-channel mode, cyan, magenta, and yellow spot color channels are created.

Removing a channel from an RGB, CMYK or Lab image automatically converts this image to multi-channel mode by converting layers.

To export a multi-channel image, you need to save it in Photoshop DCS 2.0 format.

Note.

Images with indexed and 32-bit colors cannot be converted to Multi-Channel.

HEX / HTML

HEX color is nothing but a hexadecimal representation of RGB.

Colors are represented in the form of 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 \u200b\u200bmust be between 00 and FF.

In many applications, an abbreviated form for writing hexadecimal colors is allowed. If each of the three groups contains the same characters, for example # 112233, then they can be written as # 123.

1. h1 (color: # ff0000;) / * red * /
2. h2 (color: # 00ff00;) / * green * /
3. h3 (color: # 0000ff;) / * blue * /
4. h4 (color: # 00f;) / * same blue, abbreviated notation * /

RGB

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

RGB values \u200b\u200bare given by an integer from 0 to 255. For example, rgb (0,0,255) is displayed as blue, since the blue parameter is set to its highest value (255), and the rest are set to 0.

Some applications (in particular web browsers) support percentage recording of RGB values \u200b\u200b(from 0% to 100%).

1. h1 (color: rgb (255, 0, 0);) / * red * /
2. h2 (color: rgb (0, 255, 0);) / * green * /
3. h3 (color: rgb (0, 0, 255);) / * blue * /
4. h4 (color: rgb (0%, 0%, 100%);) / * same blue, percentage record * /

RGB color values \u200b\u200bare supported in all major browsers.

RGBA

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

The RGBA color value is set as: rgba (red, green, blue, alpha). The alpha parameter is a number in the range from 0.0 (completely transparent) to 1.0 (completely opaque).

1. h1 (color: rgb (0, 0, 255);) / * blue in plain RGB * /
2. h2 (color: rgba (0, 0, 255, 1);) / * same blue in RGBA, because opacity: 100% * /
3. h3 (color: rgba (0, 0, 255, 0.5);) / * opacity: 50% * /
4. h4 (color: rgba (0, 0, 255, .155);) / * opacity: 15.5% * /
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 presents colors in a more intuitive and readable way than typical RGB. The model is often used in graphic applications, in color palettes, and for image analysis.

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

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

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

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

HSLA

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

The HSLA color value is set as: hsla (hue, saturation, lightness, alpha). The alpha parameter is a number in the range from 0.0 (completely transparent) to 1.0 (completely opaque).

1. h1 (color: hsl (120, 100%, 50%);) / * green in regular HSL * /
2. h2 (color: hsla (120, 100%, 50%, 1);) / * same green in HSLA, because opacity: 100% * /
3. h3 (color: hsla (120, 100%, 50%, 0.5);) / * opacity: 50% * /
4. h4 (color: hsla (120, 100%, 50%, .155);) / * opacity: 15.5% * /
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, which means that higher values \u200b\u200bare associated with darker colors.

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

Each of the numbers that defines the color in CMYK represents the percentage of ink of a given color that makes up the color combination, or rather, the size of the dot of the raster displayed on a photographic device on a film of that color (or directly on a printed form in the case of CTP).

For example, to get the PANTONE 7526 color, mix 9 parts of cyan, 83 parts of magenta, 100 of yellow, and 46 of black. This can be denoted as follows: (9.83,100.46). Sometimes they use the following designations: 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 these are two different color models. Both are based on cylindrical geometry, but the HSB / HSV is based on the hexcone model, while the 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 sets the position of the color on the color wheel (from 0 to 360). Saturation is a percentage of saturation (0% to 100%). Brightness is a percentage of brightness (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 main components are "imaginary", that is, you cannot correlate X, Y, and Z with any set of colors for mixing. XYZ is a master model of almost all other color models used in technical fields.

LAB

The LAB color model (CIELAB, "CIE 1976 L * a * b *") is computed from the CIE XYZ space. When developing Lab, the aim was to create a color space, the color change in which would be more linear in terms of human perception (compared to XYZ), that is, so that the same change in the color coordinate values \u200b\u200bin different areas of the color space produces the same feeling of color change.

CMYK and RGB - why is it brighter on the monitor than on paper?

RGB (the abbreviation of the English words Red, Green, Blue - red, green, blue) is an additive color model that usually describes a method of color synthesis for color reproduction. The choice of primary colors is determined by the physiology of color perception by the retina of the human eye. The RGB color model is widely used in technology. Four-color autotype (CMYK: Cyan, Magenta, Yellow, BlacK) is a subtractive color formation scheme used primarily in printing for standard process printing. CMYK has comparatively lower RGB color gamut compared to RGB.

If you are a designer, then it is not for me to explain to you what it is and what is the difference. But, if you don’t work in graphic editors and often order print products from printing houses, you wonder why the colors do not look so bright, then this post is for you. On duty, you often hear the following phrases:

“- It was bright, juicy on the monitor, and they printed faded” “- I didn’t say it, it faded - redo it” ... etc.

Difference of perception and specificity of models

»CMYK is used in printing. Consists of 4 colors Cyan (cyan), Magenta (magenta), Yellow (yellow), and Blak (black). Each of the color numbers used in this color model determines the percentages of paint that make up the color combination. On the monitor, the absence of color is black, and white is obtained by mixing all colors, on paper, on the contrary, the absence of color is white, and the mixing of all colors is black. RGB is used for web, consists of three colors R (red) red, G (green) green, B (blue) blue. “The monitor emits these colors, but only the scanner perceives these colors. The rest of the colors are obtained by mixing these three primary colors. ”- this can be most clearly formulated (taken from the Internet) And now in more detail ... The main color rendering method in RGB is based on the object emitted light, ie the picture on your monitor is a light source. The principle is described in detail in Figure 1 below:

So, from the figure it is clear how the RGB model works, in fact from the definition it is clear that it is designed specifically for these purposes. In other words, RGB is not a paint at all, but rather the heating temperature of the pixels that make up the screen transmitting the image. Unlike RGB, CMYK is created directly for printing, where colors and shades are formed from the colors mentioned in the definition. Figure 2 shows how color reproduction is perceived any printed product:

(1 - light source, 2 - object, 3-eye)

Just in case, I’ll clarify that human vision is arranged in such a way that we can distinguish at the expense of the LIGHT of the reflected or if the object is a light source. Perhaps this is the main argument why the “pictures are brighter” on the monitor. Simply put, the red light on the Christmas tree garland will be brighter than drawing with a red felt-tip pen on paper because the garland emits light, and the drawing reflects. That’s the whole difference.

Can I print RGB?

It is possible, but the colors are still interpreted in CMYK, because the latter are the paint from which the shades are formed. The main thing to understand is that with such an operation you can distort the colors of your image. I hope I managed to explain in simple words why the image is brighter on the monitor.

Prepress Prepress in printing. Prepress layouts. Prepress courses. Prepress publication. Prepress book. Prepress Specialist. Printing and prepress in photoshop. Jobs prepress. Prepress processes. Prepress department. Prepress design. Printing and prepress. Prepress stages. Download prepress. Digital prepress. Prepress image preparation. Prepress work.