Sand color rgb. Converting bright colors to CMYK

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.

1. h1 ( color: #ff0000; ) /* red */
2. h2 ( color: #00ff00; ) /* green */
3. h3 ( color: #0000ff; ) /* blue */
4. 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%).

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 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).

1. h1 ( color: rgb(0, 0, 255); ) /* blue in regular RGB */
2. h2 ( color: rgba(0, 0, 255, 1); ) /* the 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 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%).

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 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).

1. h1 ( color: hsl(120, 100%, 50%); ) /* green in normal HSL */
2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* the 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, 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.

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 the gradation of each color occurred 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 can 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 is possible that the letter K in the abbreviation CMYK is an abbreviation 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, since otherwise the paint, falling on one another, will blur and moiré or dirt will form. 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 quite 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.



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 obtain a dark orange color, you would mix 30% cyan paint, 45% magenta paint, 80% yellow paint and 5% black paint. 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.

Abbreviation for Cyan-Magenta-Yellow-Black - cyan-magenta-yellow-black. CMYK is a color model that describes all colors as a mixture of these four processed colors. CMYK is the standard color model used in color printing. Because It uses four primary colors of ink and is also called four-color printing.

The CMYK color model, unlike RGB, describes the colors that are absorbed. Colors that use white light by subtracting certain parts of the spectrum from it are called subtractive. These are the colors used in the CMYK model. They are obtained by subtracting the additive colors of the RGB model from white.

The primary colors in CMYK are cyan (Cyan), magenta (Magenta) and yellow (Yellow). Cyan is obtained by subtracting red from white, magenta from green, and yellow from blue.

The figure shows what colors are obtained by mixing CMYK base colors. Now, when all three colors are mixed, the color black is obtained, i.e. adding colors in CMYK is additive.

The CMYK color model is the main one for printing. This model is also used in color printers. It turns out that in order to print black, a large amount of ink is needed. In addition, mixing all the colors of the CMYK model actually produces not black, but a dirty brown color. Therefore, to improve the CMYK model, one additional color was introduced into it - black. It is the key color when printing, so the last letter in the model name is K (Key), not B. Thus, the CMYK model is four-channel.

The fact is that CMYK has a narrower color gamut than RGB. Therefore, when converting from RGB to CMYK, some colors are lost. This must be taken into account if you work in graphic editors. On the other hand, you can use the conversion to see what the RGB image will look like when printed on a printer.

hsb color model.

This color model is the easiest to understand. In addition, it is equally applicable to both additive and substrative colors.

HSB is a three-channel color model. It was named after the first letters of English words: hue, saturation, brightness. In the HSB system, color is decomposed into three components:

HUE (Hue) is the frequency of the light wave reflected from the object you see.

SATURATION is the purity of color. This is the ratio of the main tone and its equal brightness, colorless gray. The most saturated color contains no gray at all. The lower the color saturation, the more neutral it is, the more difficult it is to unambiguously characterize it.

BRIGHTNESS is the overall brightness of a color. The minimum value of this parameter turns any color to black.

When working in graphics programs, it is very convenient to select a color, since the representation of color in this model is consistent with its perception by a person.

Application. The HSB model is mainly used by computer artists.

CMYK colors are the primary colors used to create all printed shades. They were designed to minimize the amount of ink and while art inks necessarily contain white, in printing it is replaced by a white surface of the material. Another difference is the replacement of red with bright pink, and blue with bright blue.

CMYK decoding

The abbreviation CMYK stands for:
C – cyan (Cyan) – bright blue;
M – magenta (Magenta) – bright pink;
Y – yellow (Yellow) – bright yellow;
K – black (BlacK) – black paint, where the abbreviation includes not the first, but the last letter, so as not to be confused with the color Blue, which is used in the RGB color model.

CMYK is not only the basic colors for printing, but also a color model that can describe any shade as a percentage. This property is very important in order to explain to the printing machine already inside the image: what colors to print and in what proportion.
So the image can be expressed in numerical form, where the limit will be 100% for each of the CMYK colors.

For example, blue-green would have the following formula:
C – 100%; M – 25%; Y – 25%; K – 10%;

100% is considered the volume of ink that the machine produces when printing one of the primary colors in this system. This volume is configured via the press profile (software). The correct print settings are verified by reproducing CMYK tones.

CMYK black

What is the formula: C – 100%; M – 100%; Y – 100%; K – 100%?
In the specifics of printing, 100% of at least one of the primary inks gives the brightest tone in the palette. However, a total dye percentage of more than 300% (on average) is not allowed in printing. A color consisting of 100% ink of all tones (that is, 400%) is a deep black that is likely to disrupt the clear contours of an object on any printing surface.
Often when printing, deep black color is very important, but pure black ink (C - 0%; M - 0%; Y -0%; K - 100%) does not meet these requirements. Therefore, when preparing an image for printing, pure black is replaced with a composite one, which must meet the requirements of the printing house (you always have the right to request them). On average (the figure will vary depending on the machine settings) this is C - 40%; M – 40%; Y – 40%; K – 100%, maximum C – 70%; M – 60%; Y – 60%; K – 100%.
IMPORTANT! The K value in black should be 100%.

Often, when converting from an RGB model to CMYK, the black color acquires a chaotic value, for example: C – 75%; M – 68%; Y – 67%; K – 90%. In total, this gives 300%, but on printing the shade may behave in an unpredictable way: for example, it may produce a dark gray color with a blue tint (depending on the machine settings).

CMYK palette

The main goal of the printing industry is to produce rich, vibrant images. And if the artist can spend a lot of time selecting the right tone, then the print has no room for error, since we are not talking about a piece product, but about a mass product. Therefore, the CMYK system has a set of the most advantageous colors that will not fail when printing.
You should rely on the rules:
1) The richest color is obtained if any primary color is 100%.
2) Composite colors have an advantage over single paint.
3) Blue color is usually more intense than other dyes.

Gray needs to be made composite. All colors are involved in its creation:
C(20%); M(20%); Y (20%); K (20%) = light gray
C(40%); M(40%); Y (40%); K (40%) = medium gray
C(60%); M(60%); Y (60%); K (60%) = dark gray

Red is one of the main printing colors. Its brightness is very important. In the classic version, the brightest shade is the result of mixing 100% pink and 100% yellow. Any darkening can be achieved with the addition of blue and black.
C(0%); M(100%); Y (100%); K (0%) = red
C(0%); M(90%); Y (100%); K (0%) = scarlet
C(30%); M(100%); Y (100%); K (30%) = burgundy