Ray by Day JS

Day 11 - Digital Color Representation

In the previous pages, we explored the nature of light and how human vision perceives color. Now we turn to the practical question: how do computers represent and manipulate color for display on digital devices?

The RGB Color Model

Most digital color systems are based on the RGB (Red, Green, Blue) color model. While other color models exist (such as CMYK for printing, HSV for color selection, or YUV for video), RGB has become the standard for computer graphics and display devices.

Display devices—whether LCD screens, OLED panels, or LED displays—create colors by emitting different mixtures of red, green, and blue light. Each pixel on your screen contains three sub-pixels, one for each primary color. By varying the intensity of these three colors, the display can reproduce a wide range of visible colors.

Digital Color Values

In digital systems, each color channel (Red, Green, Blue) is represented by a numerical value. The most common format uses one-byte integers, giving each channel a range from 0 to 255. This provides 256 possible intensity levels per channel.

With three channels, each using 8 bits (one byte), we get what's called "24-bit color" or "true color," offering 16,777,216 possible color combinations (256³). This is often written as RGB(255, 128, 64) or #FF8040 in hexadecimal notation.

While 8-bit per channel is standard, other bit depths are certainly possible and used in specialized applications:

Beyond these standard formats, specialized fields use entirely different approaches. For example, the ASDF format used in astronomy enables the recording of quantities across a rich variety of wavelengths, far beyond the three-color RGB model. Such formats are essential for scientific applications where precise spectral data is required.

The Bounded Nature of Digital Color

Unlike color in the natural world, digital color representation has a fundamental limitation: there is an upper bound to the values. In nature, light can theoretically have any intensity, from complete darkness to the brightness of the sun. But in digital systems, we must work within fixed limits.

This bounded nature has important implications for ray tracing:

For example, if our ray tracing calculations produce a color value of RGB(300, 150, 75), we must clamp the red channel to 255, resulting in RGB(255, 150, 75). This is why proper lighting calculations and exposure control are crucial in ray tracing.

Beyond RGB: A Brief Note

While RGB dominates digital displays, it's worth noting that printed color works differently. Printers typically use the CMYK (Cyan, Magenta, Yellow, Key/Black) color model, which is subtractive rather than additive. Instead of emitting light, printed materials absorb certain wavelengths and reflect others. This fundamental difference means that the same RGB values will look different on screen versus in print, requiring careful color management for cross-media applications.

For our ray tracing work, we'll focus primarily on RGB, as our goal is to create images for digital display. Understanding how computers represent color digitally is essential for implementing realistic lighting and material effects in our ray tracer.

However, while the 0-255 integer range serves well for final display, it becomes cumbersome for the mathematical calculations involved in ray tracing. Working with arbitrary integer values like 255 as a cap makes lighting calculations, color mixing, and material interactions unnecessarily complex. For these purposes, we will prefer using floating-point numbers for our primary values. This approach simplifies our mathematical operations and provides better precision for intermediate calculations. We'll explore this color model in more detail in subsequent pages when we discuss a representation that better suits our ray tracing needs. While our final output (whether image on the browser or a file) will be in RGB, we will use floating-point numbers for our intermediate calculations, and the benefit of that approach will be apparent when we discuss the details on later pages.

Prev Home Next