你在白底上挑好一种灰,放进深色画面里,却发现它显得亮了。颜色数值明明没改,哪里变了?
一块颜色的视觉效果,也取决于它周围的颜色。 这是学习绘画、配色和构图时,很早就值得建立的观察习惯。
这是「视觉基础」的第一篇。不需要会画画,也不需要记公式。读完并做完练习,你应当能区分“颜色数值相同”和“看起来相同”,并试着通过调整背景,改变一个形状在画面中的明暗角色。
先看:两块灰,哪一块更亮?
先按自己的感受判断,不用猜教程想要的答案。看过原图后,遮住背景再比较,最后把背景交换一次。
正在呈现知识画面
先凭眼睛判断,再遮住背景核对左右方块始终使用相同的灰色 RGB(128,128,128)。初始左背景为深灰,右背景为浅灰,左方块通常显得更亮;遮住背景后,两块都处在同一浅灰底上;交换背景时,只改变背景,不改变方块。
{"id":"gray-context-observe","title":"先凭眼睛判断,再遮住背景核对","summary":"左右方块始终使用相同的灰色 RGB(128,128,128)。初始左背景为深灰,右背景为浅灰,左方块通常显得更亮;遮住背景后,两块都处在同一浅灰底上;交换背景时,只改变背景,不改变方块。","height":520,"html":"<h2 data-i18n=\"heading\"></h2>\n<p class=\"intro\" data-i18n=\"intro\"></p>\n<div class=\"labels\" aria-hidden=\"true\"><span>A</span><span>B</span></div>\n<svg class=\"scene\" viewBox=\"0 0 640 280\" role=\"img\" data-i18n-label=\"scene\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"640\" height=\"280\" fill=\"#b0b0b0\"/>\n <rect id=\"surround-a\" width=\"320\" height=\"280\" fill=\"#202020\"/>\n <rect id=\"surround-b\" x=\"320\" width=\"320\" height=\"280\" fill=\"#e0e0e0\"/>\n <rect class=\"target\" x=\"112\" y=\"92\" width=\"96\" height=\"96\" fill=\"#808080\"/>\n <rect class=\"target\" x=\"432\" y=\"92\" width=\"96\" height=\"96\" fill=\"#808080\"/>\n</svg>\n<div class=\"actions\" role=\"group\" data-i18n-label=\"modes\">\n <button type=\"button\" data-mode=\"original\" aria-pressed=\"true\" data-i18n=\"original\"></button>\n <button type=\"button\" data-mode=\"masked\" aria-pressed=\"false\" data-i18n=\"masked\"></button>\n <button type=\"button\" data-mode=\"swapped\" aria-pressed=\"false\" data-i18n=\"swapped\"></button>\n</div>\n<div class=\"status-stack\"><p id=\"observation\" role=\"status\" aria-live=\"polite\"></p></div>\n<p class=\"hint\" data-i18n=\"fixed\"></p>","css":"\nbody { padding:24px; }\n.intro { color:var(--muted); margin:8px 0 20px; font-size:16px; }\nbutton, label, .hint { font-size:16px; }\nbutton { min-height:44px; }\n.scene { display:block; width:100%; height:auto; overflow:hidden; border-radius:2px; }\n.scene * { transition:none !important; }\n.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }\n.actions button { flex:1 1 auto; }\n.status-stack { display:grid; margin-top:16px; padding-top:14px; border-top:1px solid var(--rule); }\n.status-stack > * { grid-area:1/1; margin:0; font-size:16px; line-height:1.65; }\n.status-stack > [aria-hidden=true] { visibility:hidden; }\n@media(max-width:480px) { body { padding:18px 14px; } .actions { gap:6px; } }\n\n.labels { display:grid; grid-template-columns:1fr 1fr; text-align:center; margin-bottom:8px; color:var(--muted); font-size:16px; }\n","js":"const backgrounds={original:['#202020','#e0e0e0'],masked:['#b0b0b0','#b0b0b0'],swapped:['#e0e0e0','#202020']};\nconst status=document.querySelector('#observation');\nfor(const mode of Object.keys(backgrounds)) {\n const reserve=document.createElement('p'); reserve.textContent=viz.t('status_'+mode);\n reserve.setAttribute('aria-hidden','true'); status.parentElement.append(reserve);\n}\nfunction render(mode) {\n document.querySelector('#surround-a').setAttribute('fill',backgrounds[mode][0]);\n document.querySelector('#surround-b').setAttribute('fill',backgrounds[mode][1]);\n document.querySelectorAll('button[data-mode]').forEach(button=>button.setAttribute('aria-pressed',String(button.dataset.mode===mode)));\n document.querySelector('.scene').setAttribute('aria-label',viz.t('scene_'+mode));\n status.textContent=viz.t('status_'+mode);\n document.body.dataset.mode=mode;\n}\ndocument.querySelectorAll('button[data-mode]').forEach(button=>button.addEventListener('click',()=>render(button.dataset.mode)));\nrender('original');","audio":false,"strings":{"fixed":"核对:A 与 B 始终都是 RGB(128, 128, 128),也就是 #808080。","heading":"A 和 B,哪一块看起来更亮?","intro":"先看中间的两个小方块。记住你的感受,再点击“遮住背景”。","masked":"遮住背景","modes":"选择观察背景的方式","original":"原背景","scene":"两个灰色小方块,分别置于深灰和浅灰背景中。","scene_masked":"两个方块的填色不变,周围背景都替换为 RGB 176、176、176 的浅灰。","scene_original":"A 方块在深灰背景上,B 方块在浅灰背景上;两个方块的填色均为 RGB 128、128、128。","scene_swapped":"A 方块在浅灰背景上,B 方块在深灰背景上;两个方块的填色仍相同。","status_masked":"两边的背景现在都被同一浅灰覆盖,小方块的位置、大小和填色保持原样。再比较一次 A 和 B。","status_original":"先观察:A 在深灰底上,B 在浅灰底上。你觉得它们一样亮吗?没有明显差异也可以继续核对。","status_swapped":"只交换深浅背景。现在 B 在深灰底上。观察“更亮”的感觉是否跟着背景换了位置。","swapped":"交换背景"}}
常见的感受是:深灰背景里的小方块显得更亮,浅灰背景里的显得更暗。可是两个小方块从头到尾都使用同一填色。变化发生在它们的周围。
这类现象称为同时明暗对比:在同一个画面里,周围的明暗会影响一个区域看起来的明暗。“同时”强调它们一起出现在眼前;这里不需要长时间盯住画面,也不用先看另一幅图制造残像。现象与对照示例
遮住背景这个操作很有用:小方块的位置、大小和数值保持不变,只把周围换成相同的灰。这样,你就能比较“背景不同”和“背景相同”两种条件,而不是只听一句“它们其实一样”。
如果差异不明显,不必强迫自己看出效果。观察距离、画面大小、周围环境和显示条件都会影响体验;你看到的差异强弱,不是这道练习的对错标准。
分清:数值相同,不等于感受相同
先把下面两个问题分开:
| 你在问什么 | 怎样核对 | 本例里的结果 |
| 两块颜色的数值一样吗? | 查看填色,或在同一张截图上取样 | 一样,都是 RGB(128, 128, 128) |
| 两块颜色看起来一样亮吗? | 在当前背景中观察和比较 | 可能不一样,深背景中的通常更亮 |
RGB 是屏幕颜色的一种数字写法。这里三个通道相等,表示灰色;128 是 0—255 编码范围中的一个值,#808080 是它的另一种写法。它不表示“物理亮度的一半”,也不表示“感觉上正好一半亮”。 这篇说“两块灰相同”,指图形使用同一颜色数值,不是在测量你的显示器实际发出了多少光。
画画时常说的“明暗关系”,关心的是:这一块与旁边相比,偏亮还是偏暗?差别大还是小?先把关系看清楚,往往比孤立地问“这块究竟是几号灰”更有用。
为什么周围会参与判断?
视觉系统会处理相邻区域之间的差别,并把局部信息放到更大的图像结构中组织。你体验到的明暗,并不是给每个像素单独读出一个数值。
可以先用一句工作方法帮助自己观察:看这一块,也看它与周围的关系。 但不要把这句话理解成“眼睛总是把目标数值减去背景数值”。那个减法能描述一部分图像差别,不能直接算出人的感觉。
对于这里的经典明暗对比,实验研究支持早期视觉处理的重要作用;因此,也不宜把它全解释成“大脑觉得左边有阴影,于是猜它更亮”。本篇的实验没有画阴影,照样可以出现差异。Sinha 等,2020:同时亮度对比的机制研究
这个入门实验能帮助你确认“周围会影响外观”。它本身不能证明全部神经机制,也不能推出“只要周围更暗,中间就一定显得更亮”:更复杂的条纹、边界和分组方式,可能产生不同方向的效果。同时对比与 Munker–White 效应的比较
用起来:让同一个灰瓶子成为亮形或暗形
下面是一张只有瓶子剪影和背景的平面小画。瓶子始终用同一块灰,没有增加高光、投影或材质。
先试一个具体任务:保持瓶子不变,让它从“浅底上的暗形”变成“深底上的亮形”。 拖动背景时,留意途中有没有一个位置,瓶子的轮廓几乎看不见了。
正在呈现知识画面
只改背景,让同一个瓶子成为亮形或暗形瓶子的剪影始终为 RGB(128,128,128),滑杆只改变均匀背景的灰色编码值。背景低于 128 时瓶子比背景亮,高于 128 时瓶子比背景暗;等于 128 时,两者填色相同,轮廓消失。这是平面明暗关系练习,没有模拟光照或材质。
{"id":"gray-context-compose","title":"只改背景,让同一个瓶子成为亮形或暗形","summary":"瓶子的剪影始终为 RGB(128,128,128),滑杆只改变均匀背景的灰色编码值。背景低于 128 时瓶子比背景亮,高于 128 时瓶子比背景暗;等于 128 时,两者填色相同,轮廓消失。这是平面明暗关系练习,没有模拟光照或材质。","height":630,"html":"<h2 data-i18n=\"heading\"></h2>\n<p class=\"intro\" data-i18n=\"intro\"></p>\n<svg class=\"scene\" viewBox=\"0 0 640 340\" role=\"img\" data-i18n-label=\"scene\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect id=\"backdrop\" width=\"640\" height=\"340\" fill=\"#e0e0e0\"/>\n <path id=\"vase\" fill=\"#808080\" d=\"M287 66 H353 V120 C353 139 366 150 381 170 C397 192 400 215 394 241 L384 282 H256 L246 241 C240 215 243 192 259 170 C274 150 287 139 287 120 Z\"/>\n</svg>\n<div class=\"control-label\"><label for=\"background\" data-i18n=\"background\"></label><output id=\"background-value\" for=\"background\">224</output></div>\n<input id=\"background\" type=\"range\" min=\"32\" max=\"224\" step=\"1\" value=\"224\" aria-describedby=\"scale-note\"/>\n<div class=\"scale\" aria-hidden=\"true\"><span data-i18n=\"darker\"></span><span data-i18n=\"lighter\"></span></div>\n<div class=\"actions\" role=\"group\" data-i18n-label=\"presets\">\n <button type=\"button\" data-value=\"32\" aria-pressed=\"false\" data-i18n=\"dark\"></button>\n <button type=\"button\" data-value=\"128\" aria-pressed=\"false\" data-i18n=\"same\"></button>\n <button type=\"button\" data-value=\"224\" aria-pressed=\"true\" data-i18n=\"light\"></button>\n</div>\n<div class=\"status-stack\"><p id=\"relation\" role=\"status\" aria-live=\"polite\"></p></div>\n<p id=\"scale-note\" class=\"hint\" data-i18n=\"note\"></p>","css":"\nbody { padding:24px; }\n.intro { color:var(--muted); margin:8px 0 20px; font-size:16px; }\nbutton, label, .hint { font-size:16px; }\nbutton { min-height:44px; }\n.scene { display:block; width:100%; height:auto; overflow:hidden; border-radius:2px; }\n.scene * { transition:none !important; }\n.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }\n.actions button { flex:1 1 auto; }\n.status-stack { display:grid; margin-top:16px; padding-top:14px; border-top:1px solid var(--rule); }\n.status-stack > * { grid-area:1/1; margin:0; font-size:16px; line-height:1.65; }\n.status-stack > [aria-hidden=true] { visibility:hidden; }\n@media(max-width:480px) { body { padding:18px 14px; } .actions { gap:6px; } }\n\n.control-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; }\n.control-label output { min-width:3ch; font-size:18px; }\n.scale { display:flex; justify-content:space-between; color:var(--muted); font-size:14px; }\n","js":"const slider=document.querySelector('#background'), status=document.querySelector('#relation');\nfor(const key of ['status_dark','status_same','status_light']) {\n const reserve=document.createElement('p'); reserve.textContent=viz.t(key);\n reserve.setAttribute('aria-hidden','true'); status.parentElement.append(reserve);\n}\nfunction render() {\n const value=Number(slider.value), key=value<128?'dark':value>128?'light':'same';\n document.querySelector('#backdrop').setAttribute('fill',`rgb(${value}, ${value}, ${value})`);\n document.querySelector('#background-value').textContent=viz.number(value,0);\n document.querySelectorAll('[data-value]').forEach(button=>button.setAttribute('aria-pressed',String(Number(button.dataset.value)===value)));\n status.textContent=viz.t('status_'+key);\n slider.setAttribute('aria-valuetext',`${viz.number(value,0)} / ${viz.t('value_'+key)}`);\n document.querySelector('.scene').setAttribute('aria-label',viz.t('scene_'+key));\n document.body.dataset.relation=key;\n}\nslider.addEventListener('input',render);\ndocument.querySelectorAll('[data-value]').forEach(button=>button.addEventListener('click',()=>{slider.value=button.dataset.value;slider.dispatchEvent(new Event('input',{bubbles:true}));}));\nrender();","audio":false,"strings":{"background":"背景灰色数值","dark":"深灰底","darker":"32 · 较暗","heading":"瓶子不动,背景来决定它的明暗角色","intro":"试着让瓶子成为画面里的亮形。只动背景滑杆,观察边缘怎样变化。","light":"浅灰底","lighter":"224 · 较亮","note":"瓶子固定为 128。滑杆是 RGB 三个通道共用的编码值,不是亮度百分比,也不是视觉感受的刻度。","presets":"背景预设","same":"与瓶子同灰","scene":"浅灰背景上的中灰瓶子剪影。","scene_dark":"中灰瓶子剪影在更暗的均匀背景上,形成亮形。","scene_light":"中灰瓶子剪影在更亮的均匀背景上,形成暗形。","scene_same":"瓶子与背景的灰色数值完全相同,轮廓不可见;瓶子形状仍在原处。","status_dark":"瓶子比背景亮,形成亮形。靠近 128 时,瓶子与背景的差别变小;继续向深灰调整,边缘的明暗差别变大。","status_light":"瓶子比背景暗,形成暗形。靠近 128 时,瓶子与背景的差别变小;继续向浅灰调整,边缘的明暗差别变大。","status_same":"背景与瓶子现在同为 128。图形仍在原处,但两者填色完全相同,轮廓消失。向任意一侧移动滑杆,轮廓会重新出现。","value_dark":"背景比瓶子暗","value_light":"背景比瓶子亮","value_same":"背景与瓶子同灰"}}
你改变了两件相互关联、但需要分清的事:
- 明暗角色变了。 瓶子在浅底上比周围暗,在深底上比周围亮;这首先是目标与背景之间的实际数值关系。
- 瓶子的外观也可能变了。 即使它的填色始终相同,放进深浅不同的背景,仍可能显得一亮一暗,这与前面的观察有关。
背景和瓶子同为 128 时,轮廓消失,是因为图像在边界两侧已经没有颜色差别。这里不需要用错觉来解释。
下面把三种关系并排留下来。它是一张明暗关系速查图:中间图形的填色相同,变的是背景。
这给绘画一个很实用的调整方向:想让主体显得亮一些,除了改主体,也可以尝试调整它周围的明暗。 是否更合适,要放回整个画面里判断。强对比适合一些表达,柔和、接近的明暗也能服务另一些表达;这里没有“越鲜明越好”的审美评分。
完整示范:一间小屋,怎样从“灰成一片”变得清楚?
前面的实验解释了局部背景关系。现在换一个真实的绘画问题:你画了天空、山、小屋和草地,细节不少,缩小以后却什么都不突出。继续给屋顶添瓦片,通常解决不了这个问题。
A:先诊断,而不是马上加深。 天空、山、地面和房子的灰色都靠得很近,零碎线条又分散在各处。房子边界缺少清楚的差别,所以“画得更多”没有带来“看得更清楚”。把图缩到邮票大小,会更容易发现这一点。
B:先归成三个大组。 这里选择亮天空、中灰山、较暗地面,让小屋落在能与它形成差别的背景前。归组不是说组内必须只有一个灰,而是让组内的小变化服从组与组之间的大区别。画草时可以有几种灰,但不要让每根草都抢过房子。
C:再决定最强的反差放在哪里。 如果想表达暮色中的灯光,可以压暗房子,让小窗接近亮端。窗的面积很小,却因邻近深色墙面而形成清楚的重点。如果想介绍建筑外观,B 反而可能更合适:C 牺牲了墙体细节。取舍要由表达目标决定。
这组图同时展示了两种尺度的判断:远看时,检查大块明暗是否组织得清楚;近看时,检查某条边界两侧是否有足够差别。只看直方图里有没有纯黑纯白,不能替代这两次观察——同样的灰色数量,放在不同位置会产生不同画面。
高调、低调与反差:三个容易混淆的说法
“高调”通常指画面较大部分落在明度较高的范围,“低调”则偏向较暗范围。它们描述的是明暗分布,并不规定画面里绝不能有另一端的颜色。大片明亮雪地里可以有一棵深色树;大片夜色里可以有一盏亮灯。
反差关注的是差别。高调画面也可以让那棵黑树形成很强反差;低调画面也可以让暗墙与暗衣服之间的差别很微弱。所以不要把“高调=没有黑”“低调=所有东西都看不清”当作操作方法。
| 想表达什么 | 可以从哪里开始 | 修改后检查什么 |
| 轻、亮、空气感 | 让大面积保持较亮,只保留少量深色锚点 | 浅色主体的边界是否还读得出来 |
| 夜色、隐约的空间 | 把大部分区域放在较暗范围,留少数亮处 | 重要物体是否全部并入同一黑块 |
| 清楚的信息层级 | 给关键对象较明确的邻近反差 | 角落的无关细节是否拥有同样强的反差 |
这些是可试的画面策略,不是情绪公式。明亮场景也可能不安,暗场景也可能宁静,题材、形状和排列都会参与表达。
自己检查一张图的顺序
先写出希望看清的对象,再把画面缩小或眯眼看。用“亮、中、暗”描述三块最大的区域;如果三者无法分开,先改大块分配。接着沿主体轮廓找两处最弱的边界,决定要让它们清楚,还是有意融进背景。最后才恢复小细节。
这里的灰阶示意没有模拟真实照明。它教的是怎样组织平面关系;下一篇再解释为什么真实表面会形成不同明暗。
换张图判断:店招需要改哪里?
目标是保持 OPEN 字样的灰色不变,让它从招牌底色中更清楚地显现。A 是现状,B、C 是两个修改。先只看图:哪一个符合这个约束?如果没有“字色不变”的要求,另一个是否也可能成立?
先判断,再展开图解
B 只压暗招牌底色,字仍是同一灰色;C 改深了字色,能增加字与底的差别,但违反了本题的固定条件。两种做法都可能解决可辨认性,选择取决于哪些部分可以动。先说明目标与约束,再比较效果,才能把第一篇的背景实验用于实际图案。
自己试:把这个方法带出教程
一个不用电脑的观察练习
从同一张灰纸上剪下两小块,分别放到白纸和黑纸上,让它们受到相近的照明。先比较它们的外观,再把两块都移到同一张背景纸上。没有灰纸,也可以在绘图软件中复制同一个灰色方块,放在深浅两种底上。
记下两句话就够了:“我保持不变的是……”“我改变的是……”。在纸面练习中,也留意纸张位置、反光和照明是否同时发生了变化。
两个换了场景的问题
1.海报上的灰字,放到深色封面里显得太亮。你能据此断定设计软件改了字色吗?你会怎样核对?
展开参考思路
不能只凭外观断定。先核对文字的颜色数值、透明度等设置,再把两份文字放在相同背景上比较。如果颜色数值相同,而换背景后外观改变,就要把背景关系纳入判断。取色能帮助核对数值,却不能代替在最终背景上检查实际阅读效果。
2.中灰瓶子几乎融进同灰背景。瓶子的填色不能改,想让轮廓出现,只能把背景调暗吗?
展开参考思路
调暗或调亮都可以,只要背景与瓶子出现足够可见的差别。调暗后瓶子成为亮形,调亮后成为暗形。这个问题在检验你能否使用两者之间的明暗关系,而不是记住“背景要暗”这一种操作。
做完后,找一张自己喜欢的画、照片或海报,选一个局部,试着描述它“比周围亮还是暗”,再观察这种关系怎样影响它的显眼程度。先描述你看到的关系,再决定是否要修改。
接下来可以观察什么
这一篇先练习在平面中比较明暗。沿着这个问题继续走,可以研究:一个物体的亮面、暗面和投影,怎样让我们看见它的体积。那时需要进一步区分物体表面的颜色与照明造成的变化。
资料与延伸阅读
本文的方块、瓶子与关系图均为本教程绘制;交互用于观察与练习,不是视觉测量或显示器校准工具。