3.3.1 Color Models
A color model is a system for describing and organizing colors. Some models define colors using numeric values, while others are based on practical mixing methods.
The most commonly used color models include:
There are two methods in which colors mix: additive mixing and subtractive mixing. Additive color mixing combines light, where increasing values result in lighter colors and full white. Subtractive color mixing combines pigments, where more ink or paint absorbs more light, resulting in darker colors.
RYB
The RYB (Red, Yellow, Blue) color model defines the primary colors for subtractive mixing and is commonly used in traditional art forms like painting, where pigments are physically blended. One of its most influential visual representations was developed by Bauhaus teacher Johannes Itten, who introduced a twelve-part color wheel (see Figure 13) (Stokley, 2018).
At the center of Itten’s model are the primary colors: red, yellow, and blue. These colors cannot be created by mixing other hues. Between them are the secondary colors: green, orange, and violet. Secondary colors are created by mixing equal parts of two primary colors. Finally, the outer ring includes the tertiary colors, which are created by mixing a primary color with a neighboring secondary color, such as red-orange or blue-green. When all primary pigments are mixed, the result tends toward a dark neutral tone, such as brown or gray, due to the absorption of light (Itten et al., 1996). As a foundational model in art and traditional design, RYB remains a valuable tool for understanding visual relationships between colors and guiding expressive color choices.
RGB
The RGB (Red, Green, Blue) color model is the standard system for representing color in digital media. It is based on additive color mixing, where different intensities of red, green, and blue light are combined to produce a wide range of colors. When two RGB primaries are combined, they form the secondary colors:
Red and green = yellow
Green and blue = cyan
Red and blue = magenta
When all three primary colors are combined at full intensity, the result is white light (see Figure 14).
On digital displays, RGB colors are typically encoded using 8 bits per channel, resulting in values ranging from 0 to 255 for each primary color. This is often referred to as RGB24, where 24 bits (8 x 3) define a single color. 0 means no light, and 255 means full intensity of that color channel (W3C, 2021).
For example:
rgb(255, 0, 0)= pure redrgb(0, 255, 0)= pure greenrgb(0, 0, 255)= pure bluergb(255, 255, 255)= pure white, because all colors are shown at full intensityrgb(0, 0, 0)= pure black, because all colors are shown at zero intensity
HEX Color
In web design and development, RGB values are often written using hexadecimal notation, a format commonly known as HEX color values. These have the format #RRGGBB, where RR (red), GG (green), and BB (blue) are hexadecimal values ranging from 00 to FF.
Hexadecimal is a numbering system based on 16 digits instead of 10, so FF represents the highest intensity (equal to 255 in decimal), and 00 represents no intensity (equal to 0) (W3C, 2021).
For example:
#FF0000= pure red#00FF00= pure green#0000FF= pure blue#FFFFFF= pure white#000000= pure black
RGB is essential for screen-based media, offering a precise and efficient way to reproduce color using light.
CMYK
The CMYK color model is the standard system for color printing and is based on subtractive color mixing (see Figure 15). It uses four inks: cyan (C), magenta (M), yellow (Y), and key (black, K) to create a wide range of colors. The term "key" refers to the black printing plate traditionally used to define the detail and contrast in printed images.
Mixing the primary inks gives us the secondary colors:
Magenta + Yellow = Red
Yellow + Cyan = Green
Cyan + Magenta = Blue
In this model, colors are created by layering varying amounts of each ink in precise dot patterns. The more ink that is applied, the less light is reflected, resulting in darker tones. This principle of light absorption makes CMYK a subtractive color model. Each channel is defined by a percentage value from 0 to 100, indicating the amount of ink coverage.
For example:
C = 0, M = 50, Y = 100, K = 0 => a bright orange.
C = 0, M = 0, Y = 0, K = 100 => standard black; this is suitable for text and fine details.
C = 60, M = 60, Y = 60, K = 100 => creates a rich black suitable for larger black areas and backgrounds.
Although subtractive theory suggests that combining 100% cyan, magenta, and yellow (C = 100, M = 100, Y = 100) should result in black, in practice, this combination produces a dark brown. This is due to the imperfect absorption properties of real inks. The inclusion of the separate black channel (K) allows for the production of consistent, neutral black tones (Figma, n.d.-f). CMYK remains indispensable for translating digital designs into high-quality printed output.
HSL
The HSL color model stands for Hue, Saturation, and Lightness. It offers a more human-readable alternative to RGB by organizing colors in a cylindrical coordinate system (see Figure 17).
Hue describes the color we see. It is represented as an angle from 0° to 360° as seen on the color wheel (see FIgure 16). The color wheel starts at 0° with red, passes through green at 120°, continues through blue at 240°, before it circles back to red at 0°/360°. The angles in between reflect different shades. Knowing the angles of common hues in HSL makes it easier to work with colors effectively. The hue can be modified by saturation and lightness. Saturation describes how much of the given hues is present. It ranges from 0% to 100%, where 0% is a completely desaturated gray, and 100% gives a fully saturated hue. As seen in (FIGURE HSL Cylinder Diagram), saturation increases with distance from the center of the color wheel, where colors become progressively more vivid and pure. Lightness defines how light or dark a color is. It also ranges from 0% to 100%, forming the vertical axis in the cylindrical HSL model. A lightness value of 0% represents pure black, 100% represents pure white, and 50% reflects the full color with neither added darkness nor brightness. Together, saturation and lightness determine how a hue is visually perceived, allowing for a wide range of expressive variation.
Some HSL examples are:
hsl(0, 100%, 50%)= pure red, equivalent torgb(255, 0,0)hsl(120, 100%, 25%)= dark greenhsl(240, 100%, 75%)= light blue
HSL separates color into perceptually meaningful components, making them more intuitive for working with color variations in digital interfaces and CSS-based design workflows (W3C, 2011).
HSV
The HSV also known as the HSB color model, stands for Hue, Saturation, and Value (see Figure 18). Like HSL, it is an alternative representation of RGB and is based on how the human eye perceives color.
While the hue and saturation definitions remain the same as in HSL. Value defines how bright the color appears, from 0% (black) to 100% (full brightness).
While HSV and HSL often produce similar results, value in HSV is based on the highest RGB component, whereas lightness in HSL is based on the average of the highest and lowest RGB components (Figma, n.d-g).
Last updated