Color models enable the definition of colors by using three parameters. Besides the device oriented color model RGB, there are the user oriented color models HSV and HSL. In this article, I would like to present the two color models HSG and HSP.
| Parameter | Range | |
| R | Red | 0 - 255 |
| G | Green | 0 - 255 |
| B | Blue | 0 - 255 |
The standard color model for computer monitors is RGB. Its parameters define the intensities of the three primary colors red, green and blue. A color is created by additive color mixing of this primaries. The three parameters are completely independent of each other, any combination leads to a unique color.
For the purpose of a more intuitive color definition than in RGB, there are some alternatives. The following sections present an overview about these color models. First we'll have a look at the well known color models HSV and HSL, then we'll get to know the two new color models HSG and HSP.
| Parameter | Range | |
| H | Hue | 0 - 360° |
| S | Saturation | 0 - 100% |
| V | Value | 0 - 100% |
The Hue parameter defines the pure chromatic color. Figure 3 shows an RGB cube in which the gray scale axis points to the observer. Along the outer edges you can see the course of the pure chromatic colors. Derived from this is the color hexagon which can be used to create color compostions (Figure 4).
Since the pure chromatic colors are arranged circularly, we can use a graduation from 0 to 360° (Tab. 1).
| Color | Hue | |
| Red | 0° | |
| Yellow | 60° | |
| Green | 120° | |
| Cyan | 180° | |
| Blue | 240° | |
| Magenta | 300° | |
| Red | 360° | |
The Saturation parameter specifies the degree of the chromaticity. Colors with a low Saturation always tend to a gray scale. If the Saturation equals zero, the Hue no longer has any influence.
The Value parameter specifies a gray scale and also affects the chromaticity. Pure chromatic colors can only be obtained at Value = 100%. Colors with a low Value always tend to black. If the Value equals zero, the Saturation no longer has any influence.
| Parameter | Range | |
| H | Hue | 0 - 360° |
| S | Saturation | 0 - 100% |
| L | Lightness | 0 - 100% |
The Lightness parameter specifies a gray scale and also affects the chromaticity. Pure chromatic colors can only be obtained at Lightness = 50%. Colors with a low Lightness always tend to black, colors with a high Lightness always tend to white. If the Lightness equals 0 or 100%, the Saturation no longer has any influence.
| Parameter | Range | |
| H | Hue | 0 - 360° |
| S | Saturation | 0 - 100% |
| G | Gray Scale | 0 - 100% |
The Gray Scale parameter specifies a gray scale. A color is defined as a mixture of a pure chromatic color and the gray scale, with the Saturation as mixing ratio. If the Saturation equals 0% the Hue isn't considered anymore, if it equals 100% the Gray Scale isn't considered anymore.
The perceived brightness value approximates the brightness impression in a human eye, caused by a distinctive color. It's calculated from an RGB color using the following weighted average:
This formula is based on the luminosity function. Tab. 2 shows that the perceived brightness values of the six basic pure chromatic colors are quite regularly distributed in the range between black and white.
| Color | P | |
| Black | 0 | |
| Blue | 11 | |
| Red | 30 | |
| Magenta | 41 | |
| Green | 59 | |
| Cyan | 70 | |
| Yellow | 89 | |
| White | 100 | |
The perceived brightness is an important feature of a color, but the above presented color models do not respect this. They do not allow to change a parameter without changing the perceived brightness automatically and they do not allow to alterate the perceived brightness directly.
The following section presents HSP, a color model which takes the perceived brightness into account. It works like the HSL color model, except that the third parameter, the Lightness, is replaced by the Perceived Brightness. With this color model you can change the Hue and the Saturation at a constant perceived brightness level. And you can manipulate the perceived brightness directly.
| Parameter | Range | |
| H | Hue | 0 - 360° |
| S | Saturation | 0 - 100% |
| P | Perceived Brightness | 0 - 100% |
The Perceived Brightness parameter specifies a gray scale and also affects the chromaticity. Pure chromatic colors can only be obtained, if the Perceived Brightness equals the perceived brightness value of the corresponding pure chromatic color. Colors with a low Perceived Brightness always tend to black, colors with a high Perceived Brightness always tend to white. If the Perceived Brightness equals 0 or 100%, the Saturation no longer has any influence.
My software UnioGraph implements all the presented color models. The following example images have been created with this software.
Figures 13-15 show color compositions using HSV, HSL and HSP. In horizontal direction the Hue is varied, in vertical direction the respective third parameter. The Saturation of the chromatic colors is always set to 100%. Corresponding gray scales are displayed at the left and right margins.
Figures 16-23 show variations of the Hue and the Saturation using HSL. Each image has its own character in terms of color emphasis, because the variations also change the perceived brightness values. This results were the reason for the development of the HSP color model.
Figures 24-31 show the same variations using HSP. Alterations no longer lead to a change of the perceived brightness values, which better preserves the original character of the image.
In the project HspGradator the presented color models are used for image gradation.
The CmLibDemo project was created with Visual Studio Community 2022 using C++ and MFC. Its purpose is the demonstration and visualization of the different color models.
The CmLibDemo project introduces the C++ template libraries Color.h and ColorModels.h.
All classes and functions use the namespace ama.
Color.h contains the generic data structure ama::Color and user defined operators for arithmetic operations with this type.
ColorModels.h contains the generic data structures ama::Rgb (an alias for ama::Color), ama::Hsv, ama::Hsl, ama::Hsg and ama::Hsp and the respective conversion functions to and from ama::Rgb. The data structures can be instantiated with any data type, but if they are used together with the conversion functions, it must be a floating point type. The conversion functions always operate in the range from 0.0 to 1.0 for each parameter of the involved data structures.
In the CmLibDemo project all available color model structures are instantiated with the data type double and all available conversion algorithms are used.
CmLibDemo calculates the image in the memory before it's displayed on the screen. The size of this image can be changed with Edit > Change Image Size... and it can be saved in various image formats with File > Save Image As...
Figure 32 shows the user interface of the software with an HSP diagram. The Hue runs along the x-axis, the Saturation along the y-axis and the Perceived Brightness along the z-axis. The Perceived Brightness is set to 50%. That means the displayed diagram is located in the mid range of the z-axis, as shown in Figure 33.
Figure 34 shows the user interface of the software with the contours of the HSG Saturation, based on the HSP diagram in Figure 32.
Download CmLibDemo (64-Bit executable file)
CmLibDemo is distributed under the MIT software license.
Copyright © 2020-2024 Adrian Maurer. All Rights reserved.