Learn Color Theory
Master color with interactive guides.
Your Eyes Are Lying to You
How your brain's assumptions about lighting silently reshape every color you see
In 2015, a single photograph split the internet. Some people saw a dress as white and gold; others saw it as blue and black. Both groups were absolutely certain. The scientific explanation? Each viewer's visual system made a different unconscious assumption about the lighting in the photograph. Those who assumed cool daylight subtracted blue from the scene, perceiving white and gold. Those who assumed warm artificial light subtracted yellow, perceiving blue and black. Same pixels, same screen, profoundly different colors.
This is not a quirk of one photograph. Your visual system constantly adjusts what you perceive based on assumptions about illumination, surrounding context, and overall luminance. These perceptual shifts matter for every design decision you make — especially when your UI operates in both light and dark modes.
Chromatic Adaptation (Von Kries)
Your visual system continuously adjusts its white point based on the assumed illuminant. This is the same process that makes a white sheet of paper look "white" under both warm incandescent light and cool fluorescent light, despite the reflected wavelengths being quite different. In UI design, switching from light to dark mode is a significant illuminant change that triggers chromatic adaptation — your users literally perceive the same hex values differently.
Simultaneous Contrast
Identical colors look different depending on what surrounds them — try it yourself
Both center patches are #888888 — the same color.
Why This Matters for Dark Mode
The identical hex value #888888 can look noticeably lighter on a dark UI background and duller on a light one. If you share palette hex codes between light and dark themes without adjustment, your users experience different colors even though the code says otherwise. Context is inseparable from color.
Perception Is Inference, Not Measurement
Your brain corrects for shadows automatically — even when there is no real shadow
Both outlined squares are #999999
Adelson's Checker-Shadow Illusion (1995)
Edward Adelson demonstrated that two squares on a checkerboard can be physically identical in luminance but appear dramatically different when one sits in a cast shadow. Your brain "knows" the shadowed square should be lighter than it appears and compensates accordingly. The same mechanism operates in every UI layout: colors in a dark sidebar vs. a bright content area are never perceived at face value.
Why Dark Mode Needs Different Colors
The Stevens and Hunt effects explain why your light-mode palette breaks in dark mode
Light Mode
Dashboard
Your weekly summary is ready to review.
Dark Mode
Dashboard
Your weekly summary is ready to review.
Stevens Effect (1961)
As overall luminance decreases, perceived contrast between lighter and darker elements compresses. A contrast ratio that feels comfortable on a bright white background may feel insufficient on a dark one. WCAG minimum ratios are necessary but may not be sufficient for dark-mode readability.
Hunt Effect (1952)
Colors appear more vivid in bright environments and duller in dim ones. In dark mode, the low ambient luminance of the surrounding UI reduces perceived colorfulness. Bumping saturation 10–15% for dark-mode accent colors compensates for this perceptual loss without changing the color's identity.
Hue Shifts with Brightness
The same hue looks different at different luminance levels — not just lighter or darker, but a different color
Slide through different hues and watch the lightness ramp. At lower lightness values, reds can appear to drift toward deeper crimson. At higher lightness, they shift toward orange or yellow. Blues intensify toward violet at low lightness and shift toward cyan at high lightness. These are not rendering artifacts — they reflect how the human visual system processes hue at different luminance levels.
Bezold-Brücke Shift
Discovered in the 19th century and confirmed by modern psychophysics, this effect shows that hue perception is not independent of luminance. When you lighten or darken a color to create tints and shades, you are not just changing brightness — you are subtly changing the perceived hue. This explains why a brand red that looks perfect at medium lightness may appear slightly orange when used as a highlight tint. Always verify that your lightest and darkest tints still read as the intended color family.
Designing for Perception
Practical rules for building palettes that work across contexts
Never Use One Palette for Both Modes
Light and dark modes are different perceptual environments. Create separate palette variants that account for the Stevens and Hunt effects. PerfectPalette can evaluate both variants independently to ensure they each meet accessibility thresholds.
Test Colors in Context
A swatch in your design tool looks different than the same color surrounded by your actual UI elements. Always test palette colors on their intended backgrounds — what passes in a color picker may fail in your layout.
Boost Saturation for Dark Mode
Increase saturation by 10–15% for accent colors in dark mode to compensate for the Hunt Effect. Without this adjustment, colors will appear washed out compared to their light-mode counterparts.
Increase Contrast for Dark Mode
The Stevens Effect compresses perceived contrast in low-luminance environments. If 4.5:1 is your light-mode minimum, aim for 5.5:1 or higher in dark mode to achieve the same perceived separation between foreground and background.
Watch for Hue Shifts in Tint Ramps
The Bezold-Brücke shift means that tinting and shading a color can subtly change its perceived hue. Verify that your lightest and darkest tints still read as the intended color family, especially for brand-critical colors.