简介这是一份聚焦平面设计色彩搭配的PDF讲义适合平面设计初学者、UI/视觉从业者及需要系统梳理配色逻辑的设计爱好者。内容围绕色彩的情感影响、对比与调和、经典配色方案、色调选择及色彩心理学展开详细拆解红、黄、蓝、绿、紫、白等常用色相的调色变化与视觉性格并给出暖色调、冷色调、对比色调及十种基本配色设计等实用方法。资源为1个PDF文件整体大小412KB便于随时查阅与打印。目前已有112人学习浏览可供快速掌握配色底层规律并应用于海报、广告、网页等实际设计场景中帮助读者减少试错成本提升作品的专业感与传达效率。1. 平面设计色彩搭配不是玄学先把配色比例定下来配色差的人真不一定缺审美更多是缺一套决策顺序。我见过太多人把页面做得花是因为每一种颜色都觉得好看七种颜色摆一起就乱了。反过来颜色数量收敛到三个主色、辅助色、点缀色的面积先定死哪怕只用红黄蓝也能做到不乱。平面设计色彩搭配技巧这件事本质上不是“选哪个颜色好看”而是“每个颜色占多大面积、放在哪里、参数怎么定”。这篇笔记写给自己做海报、搭详情页、调PPT、管店铺装修的人也写给给前端提色值的运营同学目标很具体颜色怎么选、选几个、以及为什么你调了半天总觉得差一点。2. 用 HSL 而不是 RGB 调色三个参数和两种色彩模式的边界2.1 为什么我从 HSL 开始调色RGB 适合机器HSL 适合人RGB 三个 0 到 255 的数值描述的是发光元件怎么混合不描述人眼看到的颜色关系。你对着#FF6B35这个橙红色想把它调得“柔和一点”直接改 RGB 只能靠猜。换成 HSL 就不一样H 是色相决定这是红还是橙还是蓝S 是饱和度决定颜色浓不浓L 是明度决定亮还是暗。三者互不干扰改一个另外两个不动这才是给人用的调色方式。我一般开拾色器第一件事就是看 HSB 或者 HSL 数值先不看那段十六进制。花半天时间把下面这张表的位置记熟之后选方向就快了视觉印象色相 H 大致区间红0 到 10橙20 到 40黄45 到 65绿100 到 140青160 到 190蓝210 到 250紫270 到 310品红310 到 340注意不同软件的色相环起始位置不一定一致但百分比刻度相同。你需要做的是打开 Photoshop 或随便哪个带拾色器的软件输入一个已知颜色来回切 RGB 和 HSL 看联动连续调二十个颜色手感就出来了。这个过程不用背公式但要理解H 是方向S 和 L 是质感。2.2 想压暗一个颜色不要直接加黑直接把颜色加黑色相会偏移得到的是一个脏颜色。假设品牌色是橙红H20、S80%、L60%你要一个适合做背景的浅版和适合做文字的深版正确做法是固定 H只动 S 和 L。浅版把 L 拉到 85%、S 降到 45%深版把 L 降到 35%、S 提到 90%。这样三档颜色同属一个色系放在同一张图上不会互相打架。HSL 和 RGB 的换算可以只记一个大概逻辑把 RGB 每个通道除以 255 得到 0 到 1 的小数取最大值和最小值两者差越大饱和度越高。明度基本等于最大值和最小值的平均。所以你会看到纯红的 RGB 是 255,0,0HSL 里 S100%、L50%你手动把 RGB 的 G 加 50颜色变亮变淡本质是拉高了最小值S 下降、L 上升。想明白这一步以后调色就不用反复试了。我自己的调色习惯是想让颜色“高级一点”先降 S 而不是动 L想让颜色“稳重一点”优先降 L 而不是加黑想让颜色“活泼一点”H 保持不变、S 提到 80% 以上但只给小面积用。这个逻辑可以直接套在按钮、标题、背景、描边四个常见元素上。提示大面积使用的颜色S 建议控制在 50% 以内点缀色 S 可以放到 80% 以上。反过来用大面积高饱和是刺眼翻车的第一来源。2.3 别忘了 CMYK屏幕和印刷是两套色域RGB 是发光的屏幕色CMYK 是青品黄黑四种油墨叠出的吸收色。同一个颜色在屏幕上亮印到纸上会发灰、发闷这是色域差异不是印刷厂坑你。如果你做的东西要拿去打印最稳妥的流程是设计阶段用 RGB 的 HSL 把颜色定好交付前再转成 CMYK 微调。转换时机很关键。不要在新建文件时就定成 CMYK你会发现很多鲜艳颜色直接被压掉。我一般先把 RGB 设计做完色彩关系确认没问题另存一份 PDF 或文件创建一个“校样预览”检查转 CMYK 后的效果。看哪些颜色发闷了、哪些暗部糊掉了再单独改这几处。大面积深色区域要特别注意 K 通道黑色墨量太高印出来是一团死黑一般控制 K 在 80% 以内四色总和控制在 300% 左右具体数值要问印刷厂纸张不同上限不同。还有一个日常会被忽略的问题你自己的显示器可能是广色域别人的手机不是。所以屏幕内容交付时把预览模式切成 sRGB看到的效果才接近用户真实设备。不要在高色域模式下调完色直接发出去那等于拿自己的高配设备替用户做了决定。3. 色相环选色与 60-30-10 比例五套方案直接套3.1 五套经典位置关系相邻、邻近、对比、互补、分裂互补色相环是选方向的工具不是在环上随便挑几个顺眼的颜色。位置关系决定了颜色之间的张力选错了方向比例再对也救不回来。这套方法在任何设计软件里都可以用打开色相环图把主色 H 值定下来然后看其他颜色和它的角度差。单色方案所有颜色都在同一个 H 上只改 S 和 L效果最稳适合内容复杂、底色必须干净的页面。类似色方案取主色 H 左右各 15 度以内画面统一又有一点点层次适合海报背景加装饰元素。邻近色方案取 60 度以内的位置比如用蓝和青搭配科技感用红和橙搭配促销氛围操作时不用刻意去算度数凭“同一个冷暖区间”去判断就行。对比和互补是真正出彩也最容易失控的两套。互补色是色相环上正对的两个位置角度差约 180 度红色配青色、蓝色配黄色都属于这一类。想让对比更强可以在互补的基础上再拉大明度差但大头面积一定只给其中一个色另外一个只能当小面积点睛否则两股力量对冲视觉焦点就散了。分裂互补更温和先定主色再找到它的互补色然后取互补色旁边的两个颜色相当于把一个尖锐的对比拆成两个缓和对比适合想做抢眼又不想要火药味的设计。方案角度关系常用场景风险单色同 H后台页面、长篇内容容易单调类似色主色 ±15°品牌海报、插画层次不够邻近色主色 ±30°~60°科技、促销场景略普通互补色180° 正对促销、强焦点画面刺眼、扎心分裂互补互补色两侧电商头图、活动页控制不住数量我见过最多的翻车不是选错方案而是在一个画面里同时用了邻近色又加了互补色色环上空一格填一个颜色最后你都不知道让用户看哪里。记住一个画面选一套位置关系就够了。3.2 60-30-10 比例主色、辅助色、点缀色怎么分选好方向下一步就是定面积。60-30-10 是为数不多我能直接当公式用的规则主色占整体画面约 60%辅助色占 30%点缀色占 10%。这个比例是从室内设计里来的放到平面设计一样好用因为它保证了画面有一个明确的底、一个明确的内容层、一个明确的焦点。具体落法背景、底色给主色它决定页面第一印象辅助色给卡片、标题、次级按钮它负责信息结构点缀色给强调按钮、角标、提示点它的任务是让人一眼看到“这里最重要”。举两个实际的参数例子科技产品官网主色是白或浅灰占 60%辅助色用深蓝占 30%点缀色用青绿色占 10%电商促销页反过来主色用米白占 60%辅助色用咖啡色占 30%点缀色用朱红占 10%。实操的时候你可以先在画布上铺三个色块分别占 60%、30%、10% 的面积黑白关系顺了再往里面填内容。点缀色的面积不是绝对数值是视觉重量所以小按钮、细边框、图标这类元素加起来只要别超过 10% 就行。点缀色通常允许是画面里饱和度最高的那个颜色但面积一定要小小到让人感觉“被你点了一下”而不是“被灯晃了一下”。3.3 中性色不是偷懒灰色带承担过渡和呼吸感新手容易把中性色当成“没颜色”其实它是最便宜的后悔药。一片画面里全是彩色眼睛没有落脚点加一条浅灰色带、一块米白底、一段深灰文字信息才分得开。中性色指的是黑白灰以及带极低饱和度的米色、奶茶色它们不参与色相对比只调节明度节奏。真正要注意的是别用纯黑和纯白来做大面积底色。纯黑#000000会让周围颜色显得脏纯白在高亮度屏幕下有一种刺眼感而且和浅灰层次分不开。我常用的中性色是背景#F5F5F5文字主色#1F1F1F弱化文字#666666分隔线#E0E0E0这几个都不是纯黑白但搭任何彩色都很安分。想让页面更柔和就在中性色里加一点点主色比如白色背景里加 8% 的主色进去画面会立刻显出一种“定制感”而不是廉价的纯白底。说白了中性色不是让你少做事是帮你把彩色衬托得更值钱。4. 从图片和品牌色提取色板三步搭出可复用的色卡4.1 取色不是吸管吸一下就结束很多人看到一张好看的摄影图直接用吸管点一下觉得“这个颜色真高级”拿回自己页面里却发现压不住。原因是单点取出来的颜色脱离了它在原图中的面积和周围关系单独搬出来就是一块没有背景的色块。正确做法是先缩小图片或者给图片做一层高斯模糊把细节抹掉只留下大色块再从中取色。具体步骤我一般这样走第一步把参考图复制一张缩到 10% 大小缩到看不清细节时你才能看到“这张图到底有几个颜色”第二步在缩略图最大的那个色块中央取色这就是你的主色第三步在视觉重点附近取一个辅助色在背景或阴影里取一个点缀色。取样后打开拾色器把刚才取的色值拆成 HSL 看一遍如果三个颜色在色环上位置太近说明画面缺乏张力需要手动把一个颜色的 H 往反方向挪 15 到 30 度。这套方法比直接找现成配色网站靠谱因为它是从你的画面题材里长出来的。做美食海报就从实拍菜肴里取做科技大会主视觉就从产品渲染图里取色卡自带内容气质不会出现“颜色很好看但和行业气质不符”的尴尬。4.2 从主色扩展一套同色系深浅固定 H 改 S/L一个主色永远不够用设计稿里至少需要三档深浅深色用于文字和边界中色用于图标和按钮浅色用于背景和底纹。这三档不是靠记忆力临时拼的就是固定 H改 S 和 L 生成。假设你的主色是蓝H220、S70%、L50%下面这张表可以直接照抄色板命名建议 S建议 L用途主色-深80%30%文字、深色标题主色-中70%50%按钮、图标主色-浅40%80%背景、分隔区域主色-极浅25%92%页面底、卡片底注意浅色档的 S 如果太高看起来会像脏色调L 到 92% 以上时S 再高也只剩一点点倾向作为背景刚好。深色档的 L 如果低于 25%和黑色就没差别了色相感会丢失尽量别低于 25%。这套三档色板生成之后你不需要每次做图都重新调色直接从色板里取全稿色彩自然统一。统一感是平面设计看起来“专业”的第一来源不是某个单色好看而是整套色板有秩序。4.3 保存和管理色板的习惯色板不保存就等于每次重新发明一次颜色。我的做法是每做完一个项目就把最终确认的三档主色、辅助色、点缀色、中性色整理成一个色卡文件存进项目文件夹。保存之前每个颜色旁边标注它的 HSL 值和用途比如“主色-深-仅用于正文标题”“点缀-黄-仅用于价格数字”后面回看时不用凭记忆猜。建色板时我还会遵守一条硬规矩一套版面里最多保留五个非中性色。超过五个要么合并同类项把接近的颜色归成一个要么砍掉次要颜色把它降级成中性色的一个变体。不这么控制色板越多实际用起来越乱。我见过最典型的翻车案例是一个人建了一个二十色的色板做图时来回试最后每张图颜色都不一样一个品牌出来三种气质。把色板数量压住你的设计至少不败在一致性上。5. 配色翻车排查手册偏色、刺眼和打印色差的 5 个常见坑5.1 现象屏幕上调好的颜色换台设备就发灰、发黄原因有两个一是设备色域不同广色域屏上鲜艳的颜色在普通 sRGB 屏上显示不出来二是暖色护眼模式没关整块屏幕偏黄你调的颜色在人家的手机上一律偏暖。解决办法分两层调色时把显示预览固定在 sRGB 上别用 Adobe RGB 或 P3 色域模式交付前把手机亮度调到正常水平关掉护眼模式再检查。再稳一点的做法是在调色时留出“余量”关键文字色不要贴着色域边界S 值在 70% 到 80% 的橙色是最容易边缘溢出的往回收 10%多数设备就拉得回来。5.2 现象大面积高饱和色画面亮得睁不开眼新手常犯的错误是觉得饱和度高等于醒目于是整张海报的背景用 H210、S100%、L50% 的纯蓝配上纯白文字没看几秒眼睛就累。原因是人眼对大面积高饱和的感知是刺痛的醒目不等于耐看。解决如果主色做背景S 压到 30% 到 45%L 提到 75% 到 90%把高饱和留给你真正想突出的那 10% 面积。比如促销海报背景米白标题深红价格数字用高饱和黄这样价格才真的跳出来。大面积用规则小面积用刺激全图刺激等于全图没有重点。5.3 现象印刷成品和屏幕稿子差一个色号整体偏暗原因很简单RGB 色域比 CMYK 大屏幕上一些鲜艳颜色在油墨里根本调不出来印刷厂只能找邻近色代替。解决交付前转 CMYK 并做软校样重点看大面积色块变成什么样。转完后如果发现橙色发灰就把 M 值往上加、Y 值往下压一点慢慢靠近屏幕效果。另外提醒一句给印刷厂的文件不要用 RGB 的 JPG 直接发最好转成 CMYK 的 PDF 或 TIFF纸样选铜版纸还是胶版纸也会影响最终颜色定版之前打一次小样这是最便宜的后悔药。5.4 现象颜色数量没超但画面还是乱找不到视觉重心这种情况通常不是数量问题而是每个颜色都在抢话语权。辅助色和点缀色面积接近或者点缀色用了和辅助色同样高的饱和度焦点就散了。解决方式把画面当成三个角色去检查主色是背景辅助色是结构点缀色是焦点。角色重叠就得改。如果辅助色绑定了深蓝色点缀色就不要再用另一个深色改成高明度暖色如果点缀色面积实在控制不住就缩小元素尺寸或者调低它的 S 值让它从“喊叫”变成“提示”。视觉重心不是设计出来的是其他颜色让出来的。5.5 现象RGB 转 CMYK 后暗部变成一坨死黑原因是转换时暗部区域分别增加了 C、M、Y、K 四个通道的量油墨叠加过多K 通道被顶满。解决检查暗部色块的 K 值超过 80% 的一律拉回来这里有个经验值大面积深色背景的 K 控制在 60% 到 80% 之间让其他三个彩色通道承担一点色相倾向而不是全靠黑墨压暗。转换后如果暗部层次还是糊把暗部颜色的 L 值统一往上提 5% 到 10%印刷出来就不会是一团黑影。做印刷品设计的人最好在调色阶段就克制深色区域的饱和度给 CMYK 留出转换空间。注意以上五条有个共同规律几乎都是“参数用得太满”导致的。色相可以用得大胆饱和度和明度一定要留余地。留余地不是保守是给设备和工艺留容错空间。6. 验证一套配色是否成立灰度化、缩略图和色盲模拟6.1 转灰度看明度层次色彩关系再复杂最终都要落在黑白灰的明度结构上。把设计图去色如果灰阶看起来糊成一团、分不清前后层那彩色状态下一定也是乱的。验证方法很简单复制图层后去色或者直接在图层面板加一个黑白调整图层。我要求画面至少能看出三个层次背景一层、内容一层、焦点一层。如果三个层次黏在一起就把对应颜色的 L 值拉开至少保持 15% 到 20% 的明度差不需要动色相。6.2 缩略图验证主次关系把设计稿缩到 10% 到 15% 的大小眯着眼睛看这时候看不清文字只能看到色块和面积。如果视线第一落点不是你要强调的按钮或价格说明点缀色位置或面积有问题。这个方法我也用来验收活动页和海报验证的不是好不好看而是“用户在一屏距离外能不能知道先看哪里”。主次顺序比配色本身更影响转化一张看不明白焦点在哪的海报颜色再惊艳也没用。6.3 色盲模拟与对比度验收配色还要照顾色弱和色盲用户。红绿色盲看红和绿是接近的这时候“红色代表错误、绿色代表成功”就失效了必须配上图标或文字辅助。常用做法是用设计软件自带的模拟功能直接跑一遍红绿色盲模式看信息是否还能区分。文字可读性有一个硬指标正文和背景的对比度建议达到 WCAG 2.0 的 AA 标准约 4.5:1大字号可以放宽到 3:1。这个数值不一定要背但你可以在取色时留意深灰文字配白底很稳浅灰文字配白底很容易踩线别为了保护设计感牺牲可读性。这几步做完一套配色才算真正闭环。我自己的习惯是每次改完设计先缩略图再灰度最后模拟色盲十几秒的事但挡掉了无数次“回去我再调调”的返工。把选色、定量、调参、验证变成一套固定流程你不再需要每次从零开始凭感觉试。希望帮到你。本文还有配套的精品资源点击获取
