Color Formats, Variables and Their Importance

Making Zeniths 2026-04-05 - Source

Intro

In art, color functions as both emotion and signal. It guides attention, creates contrast, and evokes meaning. Digitally, however, color is not just aesthetic. It is the result of physical light interacting with sensors and displays. This makes color a bridge between art and mathematics/sciences.

What is a Color?

Digitally, color can be represented as a combination of red, green and blue light, so it is fundamentally represented as an RGB value, an ordered triple representing the proportions of each of these three components:

\begin{equation} \langle R, G, B \rangle \quad | \quad R, G, B \in [0,255] \label{eq:rgb_range} \end{equation}

Each component represents the intensity of red, green, and blue light, and usually this intensity is measured on a \( 0 - 255 \) scale. Within this format, there are eight main colors that can be created through combinations of red, green and blue values at either there maximum proportion or minimum proportion. These are:

Additive Luminance (RGB)

K = 0

Red (R) adds red wavelengths to darkness: R = K + R
Green (G) adds green wavelengths to darkness: G = K + G
Blue (B) adds blue wavelengths to darkness: B = K + B

Mixing Additive Primaries

Combining the light wavelengths yields the subtractive primaries and white light:

R + G → Yellow
G + B → Cyan (C)
B + R → Magenta (M)
R + G + B → White (W)

Black = (0, 0, 0)
White = (255, 255, 255)
Red = (255, 0, 0)
Green = (0, 255, 0)
Blue = (0, 0, 255)
Yellow = (255, 255, 0)
Cyan = (0, 255, 255)
Magenta = (255, 0, 255)

Mathematically, this format is a vector with three dimensions of real numbers (decimals) or \(\mathbb{R}^3\) in mathematical settings. Thus, the entire RGB color space can be viewed as a cube, where the lengths of each side are 255. Each of the eight vertices of these cubes are the eight colors listed above: Red, Green and Blue are the primary colors; Yellow, Cyan and Magenta the secondary colors, and black/white are the extremes. Also, every other color we can think of can be created by combining these red, green and blue components. The site, csfieldguide.org, provides a cool rgb mixer app that illustrates this very well, RGB mixer. Interpreting colors as spatial coordinates allows engineers and technical artists to easily adjust digital imagery using mathematics.

RGB cube — Each color takes on its own meaning psychologically. Though these meanings may differ based on culture and experience, by and large, they are very similar

You can play with this geometric interpretation with the module on infinityinsight.com here RGB mixer

Different Formats

While RGB is mathematically convenient, it is not intuitive for artists. For example, if an artist wants to make a vivid red look slightly dirtier, darker, or more pastel, determining the adjustments needed across all three independent red, green, and blue channels simultaneously can be annoying. For that reason and others, there are other formats such as HSL (Hue, Saturation, Luminance), which is very popular in the art community.

HSL Color Format — Many of my digital artists will instantly recognize this image, and it shows an HSL color format. In this case luminance is called (B)rightness

The Color Wheel

\begin{equation} (R,G,B) \rightarrow (H,S,L) \label{eq:rgbtohsl} \end{equation}

This change in coordinate system unwraps the RGB cube, separates direct color values into three variables hue, saturation and luminance, which align directly with human vision and creative intent. Mathematically, it is effectively a nonlinear transformation separating the color channels into perceptual components.

Hue

Hue represents the fundamental base color identity itself, mapping neatly onto the traditional 360-degree layout of a color wheel. Expressing hue provides a method for easily defining color relationship:

ColorFamilies — In addition to the primary, colors the color wheel also had secondary colors and tertiary colors that work well together

\begin{equation} H \in [0^\circ, 360^\circ] \label{eq:huecircle} \end{equation}

For example:

0° = Red
120° = Green
240° = Blue

Color Wheel Angle — When hues are represented as angles, the relationship between colors becomes more intuitive way to explain the relationship between colors

When hues are represented as degrees around a circle, calculating aspects of color harmony become mathematical and easy to define. Complementary pairings sit exactly \(180^\circ\) across from one another, while triadic palettes form a perfect equilateral triangle spaced exactly \(120^\circ\) apart. For example, the RGB colors are \(120^\circ\) apart.

Saturation

Saturation measures the absolute purity and vibrance, it also measures how far a color is from gray. In RGB terms, this relates to how unequal the components are. Mathematically, saturation is a measure of the "imbalance" between the the three RGB channels.

\begin{equation} S \approx \frac{\max(R,G,B) - \min(R,G,B)}{\max(R,G,B)} \label{eq:saturationeq} \end{equation}

When:

S = 0 → grayscale
S = 1 → fully vivid color

ColorSaturations — In this figure, the concentric circles increase in saturation from the inside to the outside. Remember, black, white and greys have zero saturation

From a linear algebra perspective, saturation can be interpreted as distance from the diagonal line \(R = G = B\) in RGB space. To make this illustration clearer, the vertices (corners) of the RGB cube are black and white as well the three primary colors and the secondary colors.

GreyLine — In this figure, the line containing the different shades of pure grey is shown

Luminance

Luminance represents the perceived brightness of a color to the human eye. Crucially, our eyes do not perceive all wavelengths of light equally; our retinas are, first and foremost, biological sensors, so they are packed with more green-sensitive photoreceptors. To account for this asymmetry, digital luminance profiles apply weighted coefficient tracking rather than a simple flat average. In \(\eqref{eq:luminationeq}\) notice how the green component "G" is much more weight than the Red and Blue component.

\begin{equation} L = 0.2126R + 0.7152G + 0.0722B \label{eq:luminationeq} \end{equation}

This equation explains why a pure, absolute green channel \( (0, 255, 0) \) looks brilliantly radiant on screen, while an absolute blue channel \( (0, 0, 255) \) at identical hardware power looks deeply dark and recedes into shadows.

Black & White Gradient — Luminance gradient from Black (0) to White (1)

Color Theory Meets Mathematics

When you truly analyze every one of the common artistic adjustments, you can describe them as a mathematical operations layer operating vast data matrices. For example, blending two colors together isn't an arbitrary mixing process. Instead, it is a fundamental linear combination mapping across vector space. When computing a cross-fade or rendering an alpha-blended transparent overlay, the software evaluates a classic linear interpolation equation explaining the the distance between two color coordinates:

\begin{equation} C = \alpha C_1 + (1-\alpha) C_2 \label{eq:rgb_range} \end{equation}

Here, alpha (\(\alpha\)) acts as a scalar weight scaling between 1.0 and 0.0. As alpha smoothly scales down, the color vector shifts along a straight line trajectory inside the color cube, transitioning smoothly from the starting color \(C_1\) to the destination color \(C_2\).

Color Gradients — Color interpolation mathematically

We can also think of color distributions statistically. If we treat pixel intensities as random variables, we can analyze images using expectation:

This connects color directly to information theory and compression.

[Histogram of Image Colors]

Color Theory In Nature

In the natural world, color is governed by physics and biology rather than digital light and code.

Additive vs. Subtractive Systems

Digital screens rely on additive mixing of the light before it reaches our eyes, combining emissive beams of Red, Green, and Blue before they hit our retinas. Together in perfect proportion these beams form white light. In contrast, nature and traditional print rely on subtractive mixing, where physical pigments absorb specific wavelengths of incoming white light and reflect others back to our eyes. When sunlight hits a leaf, the chlorophyll molecules absorb red and blue wavelengths, subtracting them from the visible spectrum and reflecting only green light back to our eyes. In subtractive systems (like paintings or CMYK printing), the primary colors switch to Cyan, Magenta, and Yellow, and mixing them all together creates a dark, muddy black rather than white.

The primary colors switch in subtractive mixing because instead of having a primary color based on a core component that added with other primaries makes white, we have a primary pigment that only absorbs one color! Cyan only absorbs red, Magenta only absorbs green and Yellow only absorbs blue! When you mix colors in painting you are the new mixed pigment to absorb more colors, you are stripping components from white light! Whereas, when adding components of light to make color in additive mixing you are starting black, the absence of light, and adding base components. It is physics, and our world is art!

Subtractive Absorbance

Red (R)

Green (G)

Blue (B)

Cyan (C) subtracts only Red: C = W - R
Magenta (M) subtracts only Green: M = W - G
Yellow (Y) subtracts only Blue: Y = W - B

Mixing Subtractive Primaries

Combining the wavelengths they absorb yields the additive primaries:

C + M = (W - R) + (W - G) → Blue
M + Y = (W - G) + (W - B) → Red
Y + C = (W - B) + (W - R) → Green

[Fix this section vv]

Why is there an RYB Wheel? (The History)During the 1700s and 1800s, early art theorists and scientists experimented with the limited paint pigments available at the time. They discovered that they could mix a broad variety of shades using red, yellow, and blue paint, so they labeled them the "true" primary colors.Because centuries of art education, classic oil painting techniques, and color harmony theories (like complementary colors) were built on this foundation, it remains the standard tool taught to children and used by traditional fine artists.Why CMYK is Scientifically BetterModern color science reveals that the true physical primary pigments are actually Cyan, Magenta, and Yellow.The Physics of Reflection: Primary pigments must absorb exactly one type of light wavelength (Red, Green, or Blue) and reflect the other two.The Paint Problem: Pure Red and pure Blue paint absorb too much light. When you try to mix Red and Blue in the RYB model to make purple, they absorb almost all the light wavelengths, resulting in a dull, muddy plum or brown color instead of a vibrant violet.The CMYK Solution: Mixing Magenta (which reflects red+blue light) and Cyan (which reflects green+blue light) allows the blue wavelengths to pass through cleanly, producing a vivid, beautiful purple.

Additive Color Wheel — The two color wheels (left: additive/subtractive and right:traditional)

Traditional Color Wheel — The two color wheels (left: additive/subtractive and right:traditional)

Importance in Design

Understanding color as a structured mathematical system gives designers a significant advantage. By transforming complex RGB coordinates into independent HSL sliders, artists can establish precise, strategic visual messages within their designs.

HSL is powerful because it decouples artistic control variables:

Hue → what color it is
Saturation → how intense it is
Luminance → how bright it is

Guiding Visual Attention

High saturation Draws immediate focus to critical areas in the composition. The human brain naturally notices vivid colors first, making highly-saturated elements ideal for focal points or user-interface buttons.
Low luminance Causes objects to recede into the background. Darker, less vibrant tones can be used to anchor framing layouts and ambient backdrops without distracting from primary elements.
Hue contrast Creates explicit visual separation, using complementary colors side-by-side makes both elements pop cleanly against each other.

Over the course of history, different colors have taken on different meanings across cultures psychologically Thus, as designers we can also embue a scene or character with emotion or a theme using hue and saturation, where hue controls the color and saturation is like an intensity of this feeling or emotion that it produces. For example:

Color Emotions — Each color takes on its own meaning psychologically. Though these meanings may differ based on culture and experience, by and large, they are very similar

Ultimately, understanding color as both an artistic and mathematical vector gives you more control. Instead of relying on only your artistic visual intuition you can also use patterns and geometry to guide your color choices.

Visual Storytelling

Because distinct hues trigger specific psychological associations, artists can use different color grading choices to establish an overall mood or thematic message. One famous cinematic example of this technique is found in The Matrix. The filmmakers applied a heavy green tint to every scene taking place inside the digital simulation, the Matrix, creating an uncomfortably artificial, sterile environment. In contrast, scenes set in the real-world city of Zion were color-graded with a distinct, heavy blue tone. Blue tones are more natural to real-world environments, so these scenes were more grounded in reality but also cold and harsh.

Matrix Hues — For example, in the Matrix. The color grading was heavily green when character were in the matrix simulation, but there was a heavy blue tone in the real world.

Character Design

Color can be used as a foundational storytelling tool. Because of the psychological associations that we have with color, certain palettes and contrasts can automatically embue characters with personality, morality, and emotion. Different palettes, and contrast can also be used to make characters pop, guide the viewer's eye, and ensure visual distinction.

In addition, Character designers often use geometric arrangements on the color wheel to establish relationships between different characters. In the Sonic the Hedgehog universe, the primary character designs form an almost perfect clean color wheel layout:

Sonic Riders Color Wheel — The main characters of the Sonic universe represent the primary colors in the traditional color wheel, and the design of other characters in the universe seem to be guided by secondary or tertiary colors and geometric color schemes.

This geometric arrangement visually anchors the primary cast, using distinct color relationships to reinforce their contrasting personalities and roles within the story.

Conclusion

Ultimately, understanding color as an element of language in both art and mathematics provides unparalleled creative control. Instead of relying solely on visual intuition, you can utilize patterns, geometry, and equations to make precise, impactful design choices that place messages and anchors within your compositions.