How Color Really Works: From Human Vision to Device Color Models

Take a second and look at the nearest screen around you, a phone, laptop, TV, maybe even a smart fridge. Notice the icons, images, or maybe just your favorite wallpaper. The colors feel real. But now, pull up the same image on another device. Odds are, the blues are suddenly too bright, the reds a little less fiery, the whole photo just… not quite right.


Why does this happen? Why does something as basic as “red” not always match between two screens, or between your screen and a printed photo? Why do brands care so much about “color accuracy,” and why is it so hard to get it right?


This blog will break down how color actually works, from what’s happening in your eyeballs, to what your phone, camera, or laptop is really doing when it “shows” you a color. No fluff. No engineering degree required. Just a straight shot from the real world to your screen.

Let’s start with a strange truth: color is an illusion. Not in a spooky, “is this all a simulation?” way, but because color doesn’t exist outside your head.


Here’s the science: The world is flooded with electromagnetic energy, some of which happens to fall into what we call the “visible spectrum”, basically, the colors our eyes can pick up. These wavelengths range from about 380 nanometers (violet) to about 750 nanometers (red).


But color isn’t in the light itself. It’s in your brain. Your eye acts as a fancy sensor; your brain interprets the signal. Color is the story your brain tells you about those wavelengths, so you can make quick decisions (“ripe banana,” “stop sign,” “beautiful sunset”).

1. Cone Cells: Deep in your retina, you have three types of cones, each tuned to a specific slice of the spectrum.
- S-cones: Most sensitive to short (blue-ish) wavelengths.
- M-cones: Most sensitive to medium (green) wavelengths.
- L-cones: Most sensitive to long (red) wavelengths.

2. Rods: Not color-sensitive, but great for low-light vision (like night and shadows).

Your brain takes the data from these three types of cones, compares them, and decides: “This must be purple,” or “That’s definitely green.” Different people see color slightly differently, some more than others, which is why color-blindness exists.

So how does a camera, phone, or scanner even begin to replicate this? It cheats. A lot. Here’s how:

Most cameras use filters arranged in a “Bayer pattern”, lots of green, plus red and blue. Why more green? Our eyes are most sensitive to it, so more green pixels help get the details right.
When you snap a photo, the sensor catches light through these filters and turns it into numbers.
These numbers are the digital “DNA” of your photo, usually something like 8, 10, 12, or even 16 bits per channel (more bits, more subtlety).

The device has to store that image as data, using a “color space.” Think of color spaces as different languages or recipes for mixing red, green, and blue.
The most common? sRGB (what most consumer tech uses), Adobe RGB (pro photographers and designers), and ProPhoto RGB (very wide for editing).
Each color space is basically a map: “If you want this specific red, use these numbers.”

Once encoded, your device saves the image, often as a JPEG or PNG, along with a color profile. That color profile is the “translation guide” telling other devices what the numbers mean.
You share the image with a friend… and the chaos begins.

So, you made your image look perfect in Photoshop. But on your friend’s phone, it’s… not.
Here’s Why:
- Every device has unique hardware: The “red” on your iPhone might not match the “red” on a Samsung Galaxy or a 10-year-old laptop.
- Color profiles aren’t always honored: If the app or device ignores the image’s color profile, the numbers can map to the wrong shades.
- Display tech matters: OLED screens, LCDs, and old CRT monitors all light up colors in slightly different ways.

Even though sRGB is meant to be the “standard,” not all screens or software actually stick to it. That’s why designers check their work on several devices, and why professional setups have expensive “calibrated” monitors.

If you’re a developer, designer, or just curious, you’ll hear a lot of terms thrown around. Let’s demystify the major color models:
- RGB (Red, Green, Blue): Used by screens, based on the three cone cells in your eye. Every color is a mix of red, green, and blue light.
- CMYK (Cyan, Magenta, Yellow, Black): Used for print. Works by absorbing certain wavelengths rather than emitting them. Printers use inks to block or mix colors.
- CIE XYZ: A mathematical model from the 1930s, based on lab experiments with real people. Not tied to any device, used as a “universal translator” between color spaces.
- Lab and LCH: Special color spaces that try to match human perception, so that the “distance” between two colors in the model matches how different they look to us.
- YUV/YCbCr: These split the brightness from the color data. Used for efficient compression in video and images (think JPEGs, YouTube, Netflix).

Why so many models?
Because every step of the image pipeline (capture, storage, display, print) has different needs. There’s no “perfect” model for all uses.

Let’s dig deeper. Say you email yourself a photo. Why do the colors sometimes shift?
- Every device interprets RGB values through its own “primaries”, the wavelengths its screen’s LEDs or pixels use.
- If a color profile is missing or ignored, the result can be wildly different colors.
- sRGB helps standardize things, but only if the whole pipeline (camera, app, OS, screen) uses it correctly.

Bottom line:
If you want your images to look the same everywhere, embed color profiles and always check how they look on multiple devices.

- The default for web, social, and most consumer devices.
- Designed to cover the average color range a regular monitor can display.
- Good for compatibility, but can’t represent the most vivid reds, greens, and blues.

- Wider gamuts, can show more colors.
- Used by pros for editing, video production, or high-end screens.

- These let you adjust color “distance” in a way that makes sense to the human eye.
- Designers love these for smooth gradients, blending, and accessibility tweaks.

Your eyes don’t see brightness in a straight line.
You can spot a subtle change in the shadows, but need a big jump to notice a difference in the highlights.
So, digital images use “gamma correction”, a math curve that squeezes more detail into the shadows, making images look more natural and saving storage space.
- sRGB gamma is about 2.2 (not linear).
- Without gamma, photos would look flat, and files would be bigger for no good reason.

Why do some JPEGs lose vibrancy, or why do videos look “blocky” sometimes?
-To save bandwidth and storage, formats like JPEG, MPEG, and AVIF split brightness (Y) from color info (U/V or Cb/Cr).
- Our eyes are much more sensitive to brightness than fine color detail, so these formats throw away some color data (“chroma subsampling”) to shrink files without us noticing much.
- Over-compression can cause visible artifacts, color banding, and a “muddy” look, watch out when saving for the web!

Ever heard of ICC profiles? These are like the “passports” for images, telling every device how to interpret the color numbers inside.
- A photo taken in Adobe RGB embeds a profile: “Treat these numbers as Adobe RGB!”
- Your browser or app should convert that to your display’s profile, so it looks right.
- If the chain breaks (missing profile, ignored metadata), colors shift.

Not every device/app supports color management. That’s why even a “standard” image can look different on your grandma’s tablet.

Heard about HDR on TVs or phones? High Dynamic Range means images can show way more shades of brightness and color.
- More bits per color (10, 12, 16 bits instead of 8).
- Wider color spaces (Rec. 2020, DCI-P3).
- More careful mapping to keep highlights and shadows visible at once.

Caveat: HDR only works if every step (file, software, hardware) supports it. Otherwise, it “dumbs down” to SDR and you lose the magic.

- CSS now supports lab() and lch() for web design, letting you work in perceptual color.
- Oklab: A new, open color model for more accurate blends, gradients, and accessible color schemes.
- These are game-changers for designers and devs, no more guessing if your color math “feels” right to the eye.

- For casual users: Always save and share images in sRGB for the web. Don’t stress too much, social networks force everything into sRGB anyway.
- For creators/pros: Keep your originals in wide-gamut spaces; export to sRGB for sharing.
- Embed ICC profiles in files, especially if you’re handing them off for print or professional use.
- Preview your work on the target device or print proof, never trust one screen.
- Use reliable tools (LittleCMS, Color.js, ImageMagick) for conversion.
- Expect some differences: Hardware, lighting, and even viewing angle matter.

Let’s walk through a real example:
- Capture: You take a RAW photo on a DSLR. The camera stores as much color info as possible, often in Adobe RGB.
- Edit: You adjust in Photoshop or Lightroom, usually in a device-independent space like Lab.
- Export: You save as JPEG with sRGB profile for Instagram or email.
- View: Your browser reads the profile, tries to match colors to your device.
- Display: Your phone or monitor shows you what it thinks the colors are, based on its hardware.

At each step, info can be lost or changed. Color management is all about losing as little as possible and controlling the end result.

Color isn’t a fixed property “out there.” It’s the sum of biology, physics, engineering, and a little bit of luck.
From your cones and brain, to your device’s filters and math, to the standards and profiles we invent, every color you see on a screen is the product of decades of work, compromise, and a dash of magic.
So next time a photo looks different on your phone and your laptop, don’t get frustrated. Now you know the story, and how many heroes had to work together to make color “just work” at all.