Pipette

Shades of Gray

In this article we would like to attend to the topic "grey values". For this purpose, we will first look at what characteristics and what form gray values have in the various common color models. We then contrast a series of different gray values from black to white in a table, where the gray values are graded in always the same steps from color to color. This table makes it easy to understand the explanations introduced in the sections regarding the color models. Finally, we will look at common terms used for the different shades of gray in different contexts.

This article is divided into the following sections:

• Gray Values in the RGB Color Model
• Gray Values in the CMY Color Model
• Gray Values in the CMYK Color Model
• Gray Values in the HSV Color Model
• Gray Values ​​in the XYZ / CIE Norm Valence System
• Gray Values ​​in the TColor System
• Color Chart with Gray Values
• Names for specific Gray Values
• Other Color Charts

Gray Values in the RGB Color Model

Within the RGB color model, when the proportions of red (R), green (G) and blue (B) are identical, always a gray value is the result. If each of these proportions is 0, the result is black (in hexadecimal notation #000 or #000000). On the other hand, if all shares are at 100 percent, the result is white (in hexadecimal notation #FFF or #FFFFFF respectively 255 in decimal notation). In between, there are all other gray values accordingly graded.

Gray Values in the CMY Color Model

The CMY color model behaves similar to the RGB color model. Here, too, a gray value arises with exactly the same proportions of the components cyan (C), magenta (M) and yellow (Y). Also in this model, the brightness value respectively gray value can be regulated by constantly varying these three values.

However, in the subtractive CMY color model, the direction is the opposite to the additive RGB color model: While in the CMY color model, for the color black, all components must be 100 percent and 0 percent for the color white, in the RGB color model it is exactly the other way around. In the RGB color model, white results when all components are at 100 percent and black when each of the 3 components is at 0 percent.

Gray Values in the CMYK Color Model

A grayscale value is obtained in the CMYK model by keeping the values for cyan (C), magenta (M) and yellow (Y) arbitrarily constant and regulating the gray value via the proportion of K (Key, Black). In this process, K can adopt values from 0 to 100 percent. Since "K" stands for the proportion of black, in the CMYK color model, assuming that cyan, magenta and yellow are at 0 percent, we automatically get pure black with a K value of 100 percent and the color white if we set the K value to 0 percent.

However, if we set the values of cyan, magenta and yellow to 100 percent, because of the subtractive color mixture, it behaves exactly the other way around: In this case we get a pure black with a K value of 0 percent and a pure white with a K value of value of 100 percent. If cyan, magenta and yellow have an identical value, which is between 0 and 100 percent, we still get gray values and a pure black by varying the K value, but no longer pure white. The higher the identical values of cyan, magenta and yellow, the darker the gray value starts at a K value of 0 percent. If cyan, magenta and yellow are even at 100 percent, we always get black, regardless of what percentage the K value is at.

Gray Values in the HSV Color Model

In the HSV color model, a gray value results from a saturation (S) of 0 percent. With this, the selected hue (H) no longer plays a role and the lightness (V, Value) determines where the gray is located between white and black.

This means that with a saturation of 0 percent, we can regulate the gray value solely through the lightness. With a brightness of 0 percent we get black, with a brightness of 100 percent we get white, in between there are the gray values. In this process, the hue can take any value without changing the result, since it is completely turned off by the saturation of 0 percent. However, typically, one does not use an arbitrary H value for black, white and gray values, but a value of 0 percent, as this best reflects the insignificance of this value.

Gray Values ​​in the XYZ / CIE Norm Valence System

The XYZ color model respectively the CIE standard color system developed by the International Commission on Illumination, behaves completely different from the color models presented so far. This model attempts to take human perception into account and to represent all possible colors (which the other models cannot).

To achieve this, this system defines different observers and lighting conditions in order to accommodate as many situations as possible. Depending on which lighting you choose, the values ​​resulting from the conversion from other color models will vary accordingly.

One of the most common and frequently used types of lighting is the CIE standard lighting D65 (medium daylight), which is also used for sRGB, Adobe RGB and the PAL/SECAM TV standard, for example. Under this lighting condition, the RGB white is at X = 95.047; Y = 100.000 and Z = 108.883, while the RGB black is at X = 0; Y = 0 and Z = 0. The gray shades ​​in between increase in the same ratio among themselves, but unlike all other color models presented so far, such as RGB, CMY, CMYK or HSV, they do not follow an exact linear gradation. For example, although the 50% RGB gray is exactly halfway up the scale in all other systems, in the XYZ system under D65 conditions it is at X = 20.518; Y = 21.586 and Z = 23.507 only at about 20% of the scale. The reason for this is that the colors in the XYZ color space are not evenly distributed. If you use other lighting conditions, the RGB black remains at 0 while only the maximum of the scale (where the RGB white lies) changes.

When using the standardized xyz variant Yxy (also known as xyY) under the condition of medium daylight (CIE standard illumination D65), the color white respectively the white point is in the middle of the CIE xy color space (in the middle of the standard color chart) at the position with the coordinates x = 0.313 and y = 0.328 with a brightness of Y = 100%. All gray values ​​including black are also at this point, but with a brightness value Y of 0% (black) through the corresponding shades of gray to 100% (white). If we choose a different type of lighting, the white point would shift to a different location. For example, the white point of the CIE standard illumination D55 (direct sunlight) is at x = 0.3324 and 0.3474, while the CIE standard illumination E (white point of the point with the same energy) is exactly one third for both values.

Gray Values ​​in the TColor System

The TColor value, which is based on the RGB color model, calculates the RGB components of red, green and blue into just one single number (more on the formula for the calculation in the linked article). This makes the TColor system the only one of all the color models presented here that only needs a single value to fully describe a color.

With this calculation, black results in a TColor value of 0, white results in the value 16777215. In between, always at the same distance of 65793, there are the 254 different integer gray levels from the RGB model (256 greyscale levels from black to gray to white). Every 65793rd TColor value is therefore a gray value. The number 65793 results from the complete run through two color channels (256 x 256 = 65536 colors) plus 256 + 1 colors of the third color channel.

Color Chart with Gray Values

To demonstrate these peculiarities of the different color models, the following table contains some shades of gray between black (top) and white (bottom) as well as their values in the different color models. Below the table you will find an explanation of the individual columns.

In the first column of the table you can see a small square with the gray tone of the respective table row. This is followed by the individual values ​​of the various color models presented:

• Directly behind the color field there are three columns, there are three columns whose values are based on the RGB color model. The first of these three columns shows the hexadecimal RGB notation (column "HEX"), followed by the percentage notation (column "%") and the absolute decimal value in the column “RGB”. Since the individual components of R, G and B are identical for gray values, these values ​​are not shown separately.
• The same applies for the CMY color model (column "CMY"). Here the value for C, M and Y have to be identical, too.
• In the fifth column, there is only the value for K for the CMYK color model, since the other three values must all be 0 for the effect of the K value shown in the table.
• In the HSV color model, the value for the lightness (V) is decisively, so here it is the only value, too. The saturation (S) has to be 0% and the hue (H) does not matter.
• The values for X, Y and Z from the XYZ color model, you can find in the penultimate three columns for the CIE standard illumination D65 (average daylight). The standardized xyz variant Yxy is not listed in the table, since its values ​​for x and y would be identical for all gray values ​​depending on the observer, while the brightness Y corresponds to the RGB percentage column.
• In the last column you will furthermore find the TColor value of each of the listed color shades.

If you would like to have other gray levels or more accurate values or you want to work with this colors, you can simply use the program pipette. Just pick up the colors from your browser window with the pipette function so that you do not have to enter them manually. The Pipette can also be used to understand the effect of varying each component of the different color models on the degree of darkness or brightness by gradually increasing or decreasing the proportions of each component in the program.

The table was generated automatically by an individual software solution by Stefan Trost Media.

Names for specific Gray Values

Some of the gray values ​​presented can be described not only by their numerical value in one of the different color models, as we saw in the last section, but also by their own names, which however may differ depending on the context.

The following table compares some of these terms from different contexts. Most of these color names and color constants come from the X11 / SVG / CSS3 color module, which can also be used for coloring web pages, others from programming languages ​​such as Java, Pascal (Delphi and Lararus) or VBA (Visual Basic for Applications), from the application framework and GUI toolkit Qt, as well as from the text and document markup language LaTeX and the standard PWG 5101.1 (Media Color Names) developed by the Printer Working Group (PWG).

The first four columns contain a color field for the respective gray value, the hexadecimal color code and the rounded percentage of all color channels from the RGB color model. This is followed by the individual names from the respective contexts. If a context does not provide its own name for one of the listed color values, the corresponding field is marked with a dash.

Across all contexts, there is a consensus to use the terms "black" and "white" for the colors with the hexadecimal RGB color codes #000000 (color share of red, green and blue of 0%) respectively #FFFFFF (color share of red, green and blue of 100%). But also the term "gray" is used comparatively uniformly for an RGB share of 50% on all channels, which corresponds to the RGB color code #808080.

However, already the terms "light gray" and "dark gray" are much more ambiguous. While most contexts refer to the RGB color value #404040 as dark gray, Qt instead defines the color value #808080 as "dark gray", which is referred to as "gray" in most other contexts, while CSS even uses this term for the color value #A9A9A9, which is lighter than the normal 50% gray. Also the term "light gray" can mean a color from #BFBFBF to #D3D3D3, depending on the context. Here you can find out why the CSS standard defines DarkGray lighter than the normal Gray.

Other terms for shades of gray are - listed according to their brightness from black to white - the words "cloudy gray" for #696969, "medium gray" for #A0A0A0, "dark silver" for #AFAFAF, "light gray" for #BFBFBF, "silver" for #C0C0C0, "gainsboro" for #DCDCDC, "pure silver" for #E0E0E0, "light silver" for #E1E1E1 as well as "smoke" for #F5F5F5. However, most of these additional terms are only used in one or just a few contexts. The CSS standard and the Printer Working Group define most terms for the shades of gray.

The ambiguity of the gray value definitions exists not only between the different contexts but also within some definition spaces. For example, the gray value #C0C0C0 is referred twice by Pascal as both "silver" (clSilver) and "light gray" (clLtGray). The Media Color Names of the Printer Working Group (PWG) also contain several multiple definitions. This is due to the approach of this color scheme to define almost all color values ​​not only in their pure variant but also in the shades "dark", "light" and "clear". In the group of color-valueless gray values, this gradation leads to the fact that not only "Gray" is assigned the gray value #808080 but also "Clear Black" and "Light Black" embody the same gray value. The same applies to #C0C0C0 ("Silver" or "Clear Gray") and #FFFFFF ("White" or "Clear White").

Another form of double definition can be found in the CSS standard: CSS not only accepts the American writing "Gray" with "a" but also the English writing "Grey" with "e" instead. The words "Grey", "DimGrey", "DarkGrey" and "LightGrey" can therefore be used equivalently to "Gray", "DimGray", "DarkGray" and "LightGray", even though older browsers such as the Netscape Navigator still insisted on the "a" variant.

Another and yet different type of double definition concerns the color constants of Java: Normally, the Java programming language is case-sensitive. However, the color constants shown in the table can be written in lowercase as well as in the uppercase variant shown. This peculiarity arose because the first definition of these constants was in lowercase. However, since the Java convention recommends capitalized constants, a corresponding redefinition was made while at the same time retaining the already defined variants for compatibility reasons. Otherwise, the usual approach in the respective programming language or environment applies to the writing of the color constants and color names, for example that CSS, Pascal and VBA are case-insensitive and therefore allow all writings and consider them to be equivalent, while LaTex and normally also Java, for example, are case-sensitive and only accept the writings shown.

Other Color Charts

Lightness and Saturation | Lightness | Saturation | Shades of Grey | Color Names | Web Colors