How Color Works: Light, Perception & Color Models

Most designers work with color by feel: a choice looks right or it doesn't. That works, sometimes. But when it doesn't, feel can't tell you why - and it can't defend the decision in a design review or fix what's broken.

Color

Color is the use of light to create meaning, hierarchy, and relationships in design.

Done well, it works without being noticed. The user doesn't stop to think about why the primary button is obvious, why the error state feels urgent, or why the interface feels trustworthy. The color does that work in the background.

Done badly, it is felt as confusion. A red success message, a CTA that does not stand out from the rest of the page, or a status indicator relying on red against green as the only signal, which roughly 8% of men cannot distinguish reliably.

Color does two things simultaneously, and both happen before the user consciously reads anything.

Communicates meaning.Color carries information faster than language. A red badge signals urgency. A muted gray label says "secondary." Years of brand association arrive in a single blue. The meaning is formed before the reading begins.

Builds system.The same red badge means the same thing on every screen because the color system holds it consistent. That's why color designed as a system scales - and why color chosen by feel breaks down across a product.

How We See Color

Color isn't a property of objects. A tomato isn't red - it reflects light at wavelengths your brain interprets as red. Change the light source and the same tomato looks different. This isn't philosophy; it has real consequences for how you design.

Light and the Visible Spectrum

Light travels in waves, and each wavelength produces a different color. The human eye can detect wavelengths roughly between 380 and 700 nanometers - that's the visible spectrum, the slice of electromagnetic radiation we call light.

The shortest wavelengths (around 380-450nm) produce violet and blue. The longest (around 620-700nm) produce red and orange. In between sit green and yellow. This is why the spectrum always appears in the same order - it follows wavelength, not convention.

Wavelength is also why warm colors feel energetic and cool colors feel calm. Longer wavelengths (red, orange) are physically more stimulating to the eye. Shorter wavelengths (blue, violet) require less effort to process. The emotional associations designers rely on are partly grounded in physics.

Rods and Cones

You have two kinds of light-sensitive cells in your retina, and only one of them cares about color.

Rods handle low-light vision - dim rooms, night, the outer edges of your visual field. They detect brightness but not hue, which is why everything drains to gray when the lights go low. Rods outnumber cones by about 20 to 1, but since you're designing for lit screens, they're mostly beside the point.

Cones need more light and detect color. You have three types, each tuned to a different slice of the spectrum: S-cones for short wavelengths (blues and violets), M-cones for medium (greens), and L-cones for long (reds and oranges).

Your brain doesn't read these signals one at a time - it reads the ratio between them. Yellow isn't registered by a "yellow cone," because there isn't one. Yellow is what you see when L-cones and M-cones both fire strongly and S-cones barely respond. White is all three firing equally. Every color you see is a calculation, not a direct measurement.

One number worth knowing: about 64% of your cones are L-type (red-sensitive). That's why red demands attention so reliably - more of your eye is literally wired to catch it.

What This Means for Design

Color blindness is a cone problem.The most common forms - red-green color blindness (deuteranopia and protanopia) - occur when M-cones or L-cones are absent or malformed. About 8% of men and 0.5% of women are affected. This is why using red and green as the only way to distinguish states (error vs success, pass vs reject) breaks down for a significant portion of users. The fix isn't to avoid red and green - it's to add a second signal: an icon, a label, a pattern.

Screens work by mixing colored light.A monitor produces color by mixing red, green, and blue light at the pixel level, directly stimulating the three cone types. This is the basis of the RGB color model - it mirrors the biology.

Context changes perception.The same gray square looks darker on a white background and lighter on a black one, because the eye reads colors relative to their surroundings. Josef Albers documented this extensively: there is no fixed appearance for any color. Every color only exists in relation to what's next to it. This matters every time you pick a color in an isolated swatch and then place it in an interface.

Pro tip: When checking color contrast, don't rely on your eye in isolation. Use a contrast checker tool - the eye adjusts to surrounding colors and consistently underestimates contrast problems.