Color surrounds us in everyday life, whether we’re admiring the vibrant hues of a sunset or scrolling through images on our phones. But did you know the way color works in physical print differs from how it works on digital screens? In this blog post, we’ll explore the difference between reflected and projected color, and then dive into how digital images store and display color. We’ll also break down the key concepts of indexed color and 24-bit color with examples of how each is used.
Reflected Color (Ink) vs. Projected Color (Screens)
When you look at a printed image, the colors you see come from light bouncing off the ink on the surface. This is called reflected color, and it works through a process known as subtractive color mixing. Printed images use the CMYK model, which stands for Cyan, Magenta, Yellow, and Key (Black). Each of these inks absorbs certain wavelengths of light while reflecting others, which is why printed materials rely on light from the environment to be visible.
For instance, in a magazine, cyan ink absorbs red light but reflects green and blue, giving you the perception of the color cyan. As the various inks overlap and blend, they subtract certain wavelengths of light, creating the colors you see in print. Without light to reflect, you wouldn’t see the color at all.
In contrast, projected color—what you see on a screen—relies on additive color mixing. Here, colors are produced by shining light directly into your eyes. Screens use the RGB color model, blending Red, Green, and Blue light at different intensities. Instead of relying on light reflection, screens actively project light. For example, when your phone displays white, it’s actually projecting red, green, and blue light at full intensity. This additive process is how every color you see on your screen is created.
How Digital Images Represent Color
Now that we’ve covered how color works in the real world versus on screens, let’s discuss how digital devices store and display color. Digital images use numerical models to represent colors, and the two main formats are indexed color and 24-bit color.
Indexed color is a technique used to simplify and compress images by reducing the number of colors they need to store. Instead of each pixel in the image carrying full color information, the image uses a color palette—a pre-defined set of colors—and each pixel simply points to an index in that palette. This limits the number of available colors (often to 256), which can reduce file size. However, this also reduces the richness of the color, as only a limited range of shades can be used. You’ve probably encountered indexed color in GIFs, which often look pixelated or lack smooth gradients because of this color limitation.
24-bit color, on the other hand, allows for far greater detail. It uses 8 bits for each of the three primary colors (red, green, and blue), meaning each color channel can represent 256 different shades. When combined, this results in a total of 16.7 million possible colors (256 x 256 x 256). This gives digital images a wide range of color possibilities, allowing for smooth transitions between shades and more vibrant, detailed images. Most high-quality photographs you see online or in editing software are stored using 24-bit color because of the level of detail it allows.
Let’s take a moment to compare how these color formats show up in your everyday life. Have you ever noticed how animated GIFs sometimes look blocky or limited in their color range? That’s indexed color at work. By reducing the number of colors an image uses, file sizes are kept small, but the image quality is reduced in return. This is why simple web graphics and low-resolution icons often use indexed color—they’re small and don’t require the full spectrum of colors.
On the other hand, when you view a detailed photo, like a landscape or portrait, you’re likely seeing the power of 24-bit color. With millions of color possibilities, the transitions between light and dark, or between shades of one color, are smooth and natural. This is essential for digital photography, where you need the highest possible fidelity to capture real-world scenes.
From ChatGPT 4o mini
Prompt: Tell about How color works
Explain the difference between reflected color (ink) and projected color (the screen on your computer or phone). Illustrate your explanation with examples.
Explain how color is represented in a digital image. Include a discussion of indexed color as well as 24 bit color. Give examples of each.
Response: How Color Works: Reflected vs. Projected Color and Digital Representation
Color is an essential part of how we experience the world, whether it’s through art, nature, or digital media. However, the way color works in physical materials like ink and on digital screens is different. In this post, we’ll explore how these differences play out and how color is represented digitally through various formats, including indexed color and 24-bit color.
Reflected Color (Ink) vs. Projected Color (Screen)
When we see colors in printed materials, such as a magazine or a painting, we’re observing reflected color. Conversely, when we view images on a computer or phone screen, we’re seeing projected color. Let’s break down the key differences between the two:
Reflected Color (Ink):
How it works: Colors in print are created through subtractive color mixing. This means that ink pigments absorb certain wavelengths of light and reflect others. The ink used in printers typically relies on the CMYK color model, where Cyan, Magenta, Yellow, and Black inks are combined in various proportions.
Example: When you print a photograph, the printer combines the CMYK inks. For example, yellow ink reflects yellow light while absorbing blue and other colors. Mixing different inks together subtracts light wavelengths, leaving only certain colors visible.
Use case: Posters, brochures, or book covers rely on reflected color. You’re seeing what’s left of the light after it interacts with the ink.
Projected Color (Screen):
How it works: On screens, colors are created through additive color mixing. This means that different colors of light are projected together to create various colors. Screens use the RGB (Red, Green, Blue) color model. Red, green, and blue light combine in different intensities to form colors.
Example: On your phone, the display projects red, green, and blue light to create other colors. When the screen shows pure white, it’s because red, green, and blue are all projected at their highest intensity.
Use case: Everything you see on a screen—websites, movies, and mobile apps—relies on projected color.
How Color is Represented in a Digital Image
In the digital world, color is represented numerically, usually through specific models that describe how colors are mixed and stored. Two key formats for digital images are indexed color and 24-bit color. Let’s explore how each works:
Indexed Color:
What it is: Indexed color is a way to reduce the amount of data needed to represent an image by limiting the total number of colors. Instead of having every pixel store its own color value, the image uses a color palette (an index) of a limited number of colors (often 256 or fewer). Each pixel in the image stores an index referring to a color in this palette.
Example: GIF images use indexed color, which is why they are typically smaller in size but may show less color detail or have a limited color range.
Use case: Indexed color is often used in images where file size needs to be minimized, like icons or simple graphics for websites.
24-Bit Color:
What it is: In 24-bit color, each pixel contains information for red, green, and blue, with 8 bits dedicated to each channel. This means that each color channel can have 256 possible values (from 0 to 255). In total, 24-bit color can represent 16.7 million colors (256 x 256 x 256), providing a wide range of color possibilities and more nuanced gradations.
Example: Most digital photos you see online or in photo-editing software are stored using 24-bit color. This allows for high-quality images with smooth transitions between shades.
Use case: High-resolution photographs and detailed digital art take advantage of 24-bit color to ensure that subtle differences in color are captured.
Examples in Everyday Use
Indexed Color: If you’ve ever seen a GIF with pixelated gradients or limited color transitions, it’s because it’s using indexed color with a limited palette. These files are ideal for animations and simple graphics.
24-Bit Color: When you look at a high-quality image of a sunset, with all the subtle variations in hue from red to orange to purple, you’re experiencing the rich detail of 24-bit color.
Conclusion
Understanding the difference between reflected and projected color, and how digital images store color information, gives you a deeper appreciation for how color works both in the physical and digital realms. Whether you’re looking at a print or a screen, the science behind the colors you see is fascinatingly different.