人眼如何识别颜色?

2025年11月29日
研学小组
研学小组
美叶研学官方内容开发小组
已累计原创 86 篇文章查看全部

一、从“光”到“颜色体验”

当我们在设计软件里选一个 #FF6B4A,看上去好像是在“操作颜色本身”。但从生理学的角度看,你其实从来碰不到“颜色”,你能碰到的只有两件事:不同波长的光,以及眼睛和大脑对这些光的处理方式

设计师日常遇到的许多疑惑——比如“这块红在手机上很刺眼,在电脑上又还好”、“暗色模式为什么一关灯就脏了”、“同一个绿色有人觉得很显眼,有人却说看不到重点”,其实本质都不是色值的问题,而是视觉生理机制和显示环境共同作用的结果。

所以这一篇,我们暂时不讲配色公式、不讲情绪,只回答一个问题:一束光,从进入眼球到被你“看作某种颜色”,中间究竟发生了什么?

当你理解了这条链路,再去看 RGB、色域、色差、色盲、暗色模式,就不再是“背规则”,而是知道它们在这条生理链路上各自卡在哪一步、为什么会出问题。你可以先在脑中记住一条非常粗略的流程线:

光源 → 物体表面反射 → 角膜 / 瞳孔 / 晶状体成像 → 视网膜感光细胞 → 视神经 → 大脑视觉皮层

其中真正“做颜色计算”的关键角色,是视锥细胞和大脑的解码方式,接下来我们就顺着这条线,从“光学结构”讲到“神经编码”,再拉回设计实践。


二、眼球的光学系统

2.1 光线是怎么被“摆好位置”的

如果把眼球想象成一台相机,那角膜就像固定镜头的前组玻璃,主要负责折射;瞳孔像光圈,控制进光量;晶状体则像一块可以变厚变薄的镜片,用来对焦。

当外界物体反射的光进入眼睛时,首先通过透明而弯曲的角膜,光线在这里发生第一次折射;接着穿过瞳孔——也就是黑洞一样的“开口”,瞳孔会在强光下缩小,在暗光中放大,保证视网膜既不过曝也不过暗。之后,晶状体再做精细的折射,把来自不同距离的光线调整到尽量聚焦在同一个平面上,这个平面就是视网膜。

这套结构对设计有什么启发?最直接的一点是:眼睛并不是屏幕像素点的“被动接收器”,它在进光量和焦距上都在主动调节。

当用户在极亮的环境(户外、强背光办公室)或极暗的环境(关灯躺床上)看你的界面时,瞳孔和晶状体都在不断“忙碌”,

这会直接影响到对比度感知、细节分辨率以及色彩饱和度的主观体验。所以同一套 UI,在不同环境里看起来差很多,并不奇怪。


2.2 色彩分辨力最强的一小块区域

视网膜并不是一张性质均匀的“幕布”。在正中央有一块非常关键的区域叫黄斑,黄斑中心的小坑叫中央凹。中央凹区域有几个特点:

  1. 视锥细胞极度密集,几乎没有视杆细胞;
  2. 空间分辨率和色彩分辨力都达到最高;
  3. 我们阅读文字、看图标、识别按钮状态,几乎都依赖这块区域。

这意味着,只有落在中央凹附近的内容,用户才能真正看到细节与准确颜色;边缘视野更多只能提供“大概有块东西在那里”的信息。

对界面设计来说,这带来一个非常实用的思路:关键色彩信息要放在“会被中央视野扫到的地方”。例如:

  • 核心行动按钮,不要只靠颜色和位置在角落里“悄悄发光”,而是要设计成用户在主任务流程中自然会把视线停留的位置。
  • 细小的色彩提示(比如表格里状态小点、图表中的细线)不要放到屏幕极边,如果必须放,至少要配合文字或形状,因为用户对那里的色觉分辨力本来就不高。


三、视杆细胞与视锥细胞

3.1 黑白世界与彩色世界

在视网膜上,大致有两种主要感光细胞:视杆细胞(Rods)和视锥细胞(Cones)

视杆细胞数量多、对光极其敏感,但几乎不负责色彩,只擅长在微光下告诉你“这里有亮、有暗、有移动”。你在夜里走路,大部分靠的就是视杆细胞。

视锥细胞数量相对少,对光没那么敏感,但对不同波长的光有不同响应,负责把世界从灰度“上色”。

分布上,两者也不一样:视锥细胞集中在黄斑尤其是中央凹,视杆细胞则更多地分布在周边。

于是出现了一个很设计相关的事实:在弱光环境中,你的彩色世界会迅速“褪色”,周边视野主要只剩形状和运动感,中央区域还能勉强维持一些色彩。这就是为什么:

  • 很多用户在暗色模式下,觉得“颜色都差不多、看不清层级”,因为此时视杆细胞参与更多,色感本来就降低了;
  • 用高饱和小色块去提示关键状态,在昏暗环境下可能完全失效——用户只看到一团灰暗的小点,并不能分辨那是绿色还是红色。


3.2 L/M/S 并不是简单的 RGB

进一步看视锥细胞本身,科学上通常分三类:

  • L 型(Long)对较长波长敏感,峰值大致对应我们称为“红—黄”一带;
  • M 型(Medium)对中等波长敏感,大致对应“绿”;
  • S 型(Short)对短波长敏感,大致对应“蓝—紫”。

很多教材会把这三类视锥简单画成红、绿、蓝三种“独立通道”,但从生理上讲,它们的响应曲线是高度重叠的。同一种波长的光,往往会同时刺激多类视锥,只是程度不同。因此,眼睛看到的“红色”,并不是某一个通道单独被激活,而是某种特定的激活比例组合

对设计师来说,这件事的重要性在于:

  • 人眼并不是真的内置一个“sRGB 模式”,它只是对三类视锥的响应做混合;
  • 屏幕用三个子像素(R、G、B)就能模拟出大量颜色,正是因为大脑只关心“L/M/S 三类视锥被激活的比例组合”,而不在乎光谱是不是连续完整;
  • 不同人的视锥数量、灵敏度稍有差别,就可能造成色偏感受不同。


四、大脑如何“解方程”

4.1 颜色是一个“激活向量”

当一束光(或者一个屏幕像素发出的复合光)进入眼睛时,它实际上会在 L/M/S 三类视锥上产生一组三维信号,我们可以想象成一个向量:

颜色约等于 (L 激活量, M 激活量, S 激活量)

大脑要做的事情,就是从这个向量“猜”出一种主观颜色体验。有意思的是,有时候不同的物理光谱,可能产生完全相同的视锥激活向量。例如:

  • 一束接近 580nm 的窄带黄光;
  • 一束由红光和绿光混合而成的光;

在三类视锥上可能产生几乎一样的响应组合,于是大脑就会把二者都感知为类似的“黄色”。这类现象叫做同色异谱(Metamerism)

会员文章
开通美叶 Pro会员,即可阅读此篇文章的全部内容,同时可阅读全站会员文章

0 人收藏了本文

Hover、Pressed、Disabled 状态的选色逻辑Hover、Pressed、Disabled 状态的选色逻辑
辅助色到底是什么?它和主色、强调色到底怎么分工辅助色到底是什么?它和主色、强调色到底怎么分工
同时对比:为什么颜色一旦放进界面里就不再是原来的样子同时对比:为什么颜色一旦放进界面里就不再是原来的样子
深色模式:为什么不是把颜色反过来?深色模式:为什么不是把颜色反过来?
什么是 HCT Color?什么是 HCT Color?
色彩应用的6个原则色彩应用的6个原则
如何制作一组可控的 12 或 24 个颜色 HEX如何制作一组可控的 12 或 24 个颜色 HEX
屏幕为何会偏色?屏幕为何会偏色?