How Human Vision Shapes Smart Color Design for UI

Human Eye and Color Models

Understanding how humans capture and perceive colors starts with the retina's two types of photoreceptor cells: rods for low‑light vision without color discrimination, and cones for color differentiation.

Light consists of wavelengths; when reflected, certain wavelengths are absorbed while others reach the eye. Three cone types (S, M, L) each respond to specific wavelength ranges, enabling color perception that is interpreted by the brain rather than existing as intrinsic colors in the physical world.

More cone types mean a broader color gamut. About 1 % of males lack L‑cones (red‑green color blindness), causing red and green to appear identical.

Monochromats: marine mammals, night monkeys, sea lions – see only black‑white.

Bichromats: most non‑human mammals – see two colors.

Trichromats: primates and humans – see three colors.

Tetrachromats: many birds, fish, amphibians, reptiles, insects, and some mammals – see four colors.

Color‑blind individuals in China number around 20 million, with varying degrees of deficiency caused by missing or reduced cone function.

General Color Models

Color models express colors as numeric tuples. Common models include CMYK for printing and RGB, HSV, HSL for screens.

RGB mixes red, green, and blue light but is not intuitive for humans. HSL/HSV improve usability by separating hue, saturation, and lightness/brightness.

CIELAB, defined by the CIE in 1976, provides a device‑independent perceptual space where L* denotes lightness and a*, b* represent chromatic axes.

Teaching Machines to Understand and Generate Color

Designers must translate experience into rules that machines can apply, considering cultural semantics (e.g., red meaning danger or profit) and emotional impact.

Element size influences perceived saturation and contrast; visual perception follows the “just noticeable difference” principle.

Color Generation Methods

Single‑Hue Adjustments

Shade mixes a color with black, Tint mixes with white, and Tones mix with gray, altering brightness without changing hue.

Multi‑Hue Schemes

Complementary: opposite hues on the color wheel.

Split‑Complementary: two hues adjacent to the complement.

Analogous: neighboring hues for natural harmony.

Triadic: three equally spaced hues.

Tetradic: two complementary pairs.

Monochromatic: variations of a single hue with added black or white.

Application Scenarios

Skin Generation

When applying a theme color (e.g., #3173E5) to a UI, all related elements can be recolored by adjusting hue while preserving saturation and brightness.

Accessibility Contrast

WCAG 2.0 requires a minimum contrast ratio of 4.5:1 (AA) or 7:1 (AAA). Contrast is calculated from relative luminance using the sRGB formula L = 0.2126 R + 0.7152 G + 0.0722 B.

<code>// Example design token definition
purple100: rgb(184, 121, 240); // light purple
purple200: rgb(159, 101, 208);
purple300: rgb(130, 80, 170); // dark purple

primarybackgroundcolor: $purple200; // background
primarytextcolor: $purple300; // text

primarybuttonbackgroundcolor: primarybackgroundcolor;
primarybuttonquiettextcolor: primarytextcolor;</code>

Dark Mode

Switching to dark mode changes background brightness, requiring adjustments to foreground colors to maintain readability, as perceived contrast differs from calculated contrast.

Context‑Aware Color Rendering

Environmental factors such as weather, lighting, or user mood can influence color choices to create a more empathetic UI experience.

Building an Intelligent Design Color System

Base Palette Design

Define primary, secondary, and tertiary brand colors, along with neutral and functional colors (success, warning, error, etc.).

Existing Tools

Tools like TinyColors.js, Adobe Color, ColorBox, and Ant Design provide algorithms for generating harmonious palettes and checking accessibility.

Engineering Approach

Integrate design tokens with a design‑system management (DSM) workflow to enable scalable, automated color generation across components.

By quantifying UI design principles and feeding them to machine‑learning models, designers can produce personalized, accessible, and context‑aware interfaces at scale.