企业官网建设流程全解析

简介：这是一份聚焦平面设计色彩搭配的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 数值，先不看那段十六进制。花半天时间把下面这张表的位置记熟，之后选方向就快了：

注意，不同软件的色相环起始位置不一定一致，但百分比刻度相同。你需要做的是打开 Photoshop 或随便哪个带拾色器的软件，输入一个已知颜色，来回切 RGB 和 HSL 看联动，连续调二十个颜色，手感就出来了。这个过程不用背公式，但要理解：H 是方向，S 和 L 是质感。

2.2 想压暗一个颜色，不要直接加黑

直接把颜色加黑，色相会偏移，得到的是一个脏颜色。假设品牌色是橙红，H=20、S=80%、L=60%，你要一个适合做背景的浅版和适合做文字的深版，正确做法是固定 H，只动 S 和 L。浅版把 L 拉到 85%、S 降到 45%；深版把 L 降到 35%、S 提到 90%。这样三档颜色同属一个色系，放在同一张图上不会互相打架。

HSL 和 RGB 的换算可以只记一个大概逻辑：把 RGB 每个通道除以 255 得到 0 到 1 的小数，取最大值和最小值，两者差越大，饱和度越高。明度基本等于最大值和最小值的平均。所以你会看到，纯红的 RGB 是 255,0,0，HSL 里 S=100%、L=50%；你手动把 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 度，红色配青色、蓝色配黄色都属于这一类。想让对比更强，可以在互补的基础上再拉大明度差；但大头面积一定只给其中一个色，另外一个只能当小面积点睛，否则两股力量对冲，视觉焦点就散了。分裂互补更温和：先定主色，再找到它的互补色，然后取互补色旁边的两个颜色，相当于把一个尖锐的对比拆成两个缓和对比，适合想做抢眼又不想要火药味的设计。

我见过最多的翻车不是选错方案，而是在一个画面里同时用了邻近色又加了互补色，色环上空一格填一个颜色，最后你都不知道让用户看哪里。记住：一个画面选一套位置关系就够了。

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 生成。假设你的主色是蓝，H=220、S=70%、L=50%，下面这张表可以直接照抄：

注意，浅色档的 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 现象：大面积高饱和色，画面亮得睁不开眼

新手常犯的错误是觉得饱和度高等于醒目，于是整张海报的背景用 H=210、S=100%、L=50% 的纯蓝，配上纯白文字，没看几秒眼睛就累。原因是人眼对大面积高饱和的感知是刺痛的，醒目不等于耐看。解决：如果主色做背景，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。这个数值不一定要背，但你可以在取色时留意：深灰文字配白底很稳，浅灰文字配白底很容易踩线，别为了保护设计感牺牲可读性。

这几步做完，一套配色才算真正闭环。我自己的习惯是每次改完设计，先缩略图，再灰度，最后模拟色盲，十几秒的事，但挡掉了无数次“回去我再调调”的返工。把选色、定量、调参、验证变成一套固定流程，你不再需要每次从零开始凭感觉试。希望帮到你。

本文还有配套的精品资源，点击获取