企业官网建设流程全解析

1. 颜色类站点到底在解决什么问题

我收藏夹里有一类链接，常年躺在“设计参考”那个文件夹里，平时几乎不点，一旦项目开工就全得翻出来——在线调色板生成器、图片吸色工具、对比度校验站、渐变色生成器、色盲模拟器。标题说的“一些和颜色有关的网站”，本质上就是这一整套围绕色彩决策的轻量工具链，它们谁都不能独立完成一个项目，但少任何一个，配色环节就得多花两三个小时。这类站点解决的不是“美术能力”问题，而是把主观的色彩判断，翻译成可测量、可复现、可交付的数值：主色定成哪个十六进制、文字和背景差几档、暗色模式下要不要换一套、打印出来会不会发灰。

这篇内容适合三类人看。第一类是前端和独立开发者，你需要一套能直接写进 CSS 变量的色板，而不是一张看着好看的截图；第二类是刚接手视觉工作的新手，你大概经历过“调了四十种蓝，最后一个都没用上”的阶段；第三类是做 PPT、做手工、做自媒体封面的非设计岗，你需要的是一个能快速出结果的流程，而不是色彩理论课。下面我按“为什么这么选—每个环节看什么参数—完整走一遍—踩过的坑”这个顺序讲，能直接抄的部分我都给了代码和数值。

2. 颜色类站点的四种类型与选型逻辑

2.1 先分清四类站点，别拿锤子拧螺丝

市面上的颜色站点粗分四类，混着用会非常低效。调色板生成类输入一个主色，输出一组协调配色，核心价值是“发散”，适合项目刚起步找方向；吸色提取类从图片里取色，核心价值是“还原”，适合照着参考图或品牌物料做延伸；校验检测类算对比度、模拟色觉障碍，核心价值是“否决”，它不给你灵感，只负责告诉你这套色不合规；生成器类包括渐变、阴影、色阶、纹理，核心价值是“量产”，把一个颜色扩成九级、把两个颜色插成一条平滑过渡。

为什么一定要分类？因为它们的输出可信度完全不同。生成类站点吐出来的色阶是算法算的，可以直接用；生成灵感类站点吐出来的方案是随机的，十个里能用一个就不错，必须人工筛。我见过有同事把随机生成的五色方案直接当品牌色用，结果两个颜色在色盲模拟下几乎重合，返工重做。选型的第一原则是：发散类工具只用来找方向，决策必须交给校验类工具。

2.2 我用四条硬指标筛掉大部分站点

收藏了几十个之后，我慢慢固定成四条标准，基本能过滤掉八成。

这四条里最容易被忽略的是第二条。只给 HEX 的站点看着简洁，但它把颜色当成一个不可拆的整体，你想把主色整体压暗 10%，只能靠肉眼来回试。而给了 HSL 分量的站点，你可以精确地把 L 从 55 降到 45，其余不动，这才是可维护的做法。

2.3 一个反直觉的结论：好用的站点往往很“丑”

我长期观察下来，功能扎实的颜色站点界面普遍朴素，白底、灰字、几个色块、一排输入框。原因是这类工具的用户是带着明确任务来的，界面越花哨，越干扰对色块的判断——你背景要是带个渐变，旁边那个待选颜色的观感就被污染了。所以我评价一个站点时会刻意看它的画布区域：待评估的颜色必须放在中性灰或纯白背景上，这是判断它是否专业的一个隐藏信号。

3. 核心细节解析：生成、吸色与校验的关键参数

3.1 调色板生成器的三种算法，输出差别很大

同样是“输入一个色出五个色”，背后的算法路线完全不同，用错了方向会差很远。

第一类是基于色相环的几何关系，取主色色相 H，然后按固定角度偏移：互补是 +180°，三角是 +120°/+240°，分裂互补是 +150°/+210°，近似色是 ±30°。这类输出可预测，适合需要明确色彩关系的场景，缺点是饱和度、亮度不做处理，五个颜色明度可能挤在一起，界面上一片糊。

第二类是基于色彩空间的插值，在两个颜色之间按 LAB 或 OKLCH 均匀取样。这类输出过渡自然，做渐变和图表色阶特别好用，缺点是没法保证每个色都有辨识度。

第三类是规则化的明度阶梯，固定色相和饱和度，只动亮度，输出 9 级或 11 级。这是做设计系统最需要的一类，也是我日常用得最多的。

实际选型时我的判断是：要“关系”用第一类，要“过渡”用第二类，要“系统”用第三类。三者不冲突，一个项目里通常会先用第一类定两三个主色，再用第三类把每个主色展开成色阶，最后用第二类生成图表渐变。

3.2 图片吸色：采样窗口比吸色精度更重要

从参考图取色这件事，新人常犯的错是放大到像素级去吸一个点。这样取到的颜色几乎一定不是设计者本来用的色，原因有三个：图片经过有损压缩，相邻像素被平均过，边缘处全是过渡色；设计稿可能带半透明叠加，吸到的是混合后的结果；屏幕截图受缩放算法影响，一个 1 像素的描边会被插值成三四个渐变层。

正确做法是框选一块区域取平均值，而不是取单点。一块 20×20 像素的纯色区域取平均，误差能压到 1 到 2 个色阶以内。如果站点支持显示区域内的颜色直方图更好——取出现频次最高的那个色值，比取平均值更能还原原始设计色。我一般的操作顺序是：先找面积最大的一块纯色区（通常是背景或主色块），框选中心 60% 的范围，避开边缘和文字，然后取众数。

提示：吸色前先把图片缩放到 100% 原始比例再吸，缩放状态下的采样点位置和实际像素不对应，取出来的颜色经常偏一档。

3.3 对比度校验：那个公式值得背下来

所有校验类站点的核心就是这一条公式，理解了它，你甚至不需要打开网站，浏览器控制台里几行代码就能算。

先算相对亮度 L。把 R、G、B 三个通道各自归一化到 0 到 1，记为 c，然后对每个通道做伽马校正：c 小于等于 0.03928 时取 c/12.92，否则取 ((c+0.055)/1.055) 的 2.4 次方。校正完之后按 0.2126、0.7152、0.0722 加权求和，得到 L。注意绿色权重最高，这符合人眼对绿光最敏感的生理特点。

然后是比值：(L亮 + 0.05) / (L暗 + 0.05)，亮暗不分先后，结果永远大于等于 1。

判定标准是三档：正文文字需要 4.5:1；18pt 以上或 14pt 加粗的大字需要 3:1；AAA 级别要求 7:1。界面组件（输入框边框、图标）的 3:1 要求经常被忽略，导致表单在强光下几乎看不见边界。

function luminance(hex) { const n = parseInt(hex.replace('#', ''), 16); const rgb = [(n >> 16) & 255, (n >> 8) & 255, n & 255]; const [r, g, b] = rgb.map(v => { const c = v / 255; return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; } function contrast(a, b) { const l1 = luminance(a), l2 = luminance(b); const [hi, lo] = l1 > l2 ? [l1, l2] : [l2, l1]; return (hi + 0.05) / (lo + 0.05); } contrast('#767676', '#ffffff'); // 4.54，刚好过 AA

这个例子值得记住：纯白背景上的灰色文字，阈值大概在 #767676 附近。比它浅一点就掉到 4.5 以下，很多设计稿用的 #999999 只有 2.85，根本不合格。我现在的习惯是先把辅助文字色定在 #6B6B6B 左右留一点余量，再去做其他调整。

3.4 渐变色生成：为什么中间会发灰

渐变色生成器最常见的问题是两色过渡的中间段出现一块脏灰，尤其从饱和的蓝过渡到饱和的黄时特别明显。这不是工具坏了，是sRGB 空间插值的固有缺陷：sRGB 的坐标是非线性的，两个颜色直线连线的中点并不对应视觉上的中间色，饱和度会往下掉。

解决办法有三个层次。最简单的，在中间手动加一个色标，取两端色相的中点、饱和度取较高值，把灰段顶上去。进阶一点，用支持 OKLCH 或 LAB 插值的工具生成，这类空间里做线性插值，中间色的饱和度和感知亮度都是连续的。最彻底的，直接在 CSS 里用in oklch指定插值空间。

/* 传统写法，中间容易发灰 */ .hero { background: linear-gradient(90deg, #2563eb, #facc15); } /* 指定插值空间，中间过渡更干净，现代浏览器已普遍支持 */ .hero-oklch { background: linear-gradient(90deg in oklch, #2563eb, #facc15); }

阴影生成器的逻辑类似，也是把一个色按透明度阶梯展开，只不过它更要求“同一色相、递减透明、递增模糊”。有些站点会顺手把阴影颜色染成主色的深色版本，而不是纯黑——这个细节很实用，纯黑阴影压在白底上会显得脏，用带色相的深色会自然得多。

4. 实操过程：从一张参考图到一套能上线的主题色

4.1 第一步，定主色的情绪方向而不是具体数值

拿到参考图之后，别急着吸色。先问一句“这张图给人的感觉是偏冷还是偏暖、偏克制还是偏活泼”，用三个形容词定调，再去色相环上圈范围。暖调落在 0 到 60 度和 330 到 360 度，冷调落在 180 到 260 度，中性偏冷静的科技感大多在 210 到 230 度之间。这一步定完，后面所有色阶都从这个色相出发，不会跑偏。

这一步用生成类站点最合适，输入几个关键词对应的色相，让它一次性铺开十来个候选，你只负责挑一个“看着对”的。挑的时候有个小技巧：把候选色缩小成 40×40 的小方块再看，因为实际界面里主色占的面积往往很小，大色块看着舒服的颜色缩小后可能就发闷了。

4.2 第二步，用色阶工具把主色展开成九级

选好主色（假设是 H=222, S=83%, L=53%，也就是那个很常见的蓝 #2563eb），下一步是扩成 9 级。手工调容易乱，用色阶生成器只需要指定起点和终点的亮度。我常用的参数是：色相固定 222，饱和度在浅色端降到 70% 左右（浅色饱和太高会发荧光），深色端升到 90%，亮度从 96% 一路降到 18%。

为什么浅色端要降饱和？因为亮度接近 100% 时，同样数值的饱和度在视觉上会显得更艳，尤其是在大面积的浅色背景上，100% 饱和的浅蓝会刺眼。为什么深色端要提饱和？因为低亮度下颜色本身会趋近黑，不提饱和就分不出色相差别，九级里后三级会糊成一片黑。

这张表是我压箱底的东西，每次新项目基本照着填。要提醒一句：500 这一级定下来之后就别再动了，其他级别都是围绕它推的，一旦基准色改了，整条色阶要重算，之前算好的对比度全部作废。

4.3 第三步，把色板落成 CSS 变量并做语义映射

算法生成的色阶只是原材料，直接叫--blue-500用到业务里，后期换主题会疯掉。正确做法是两层：底层是原始色阶，上层是语义变量。语义层只引用，不写死数值。

:root { /* 第一层：原始色阶，只在这里出现具体颜色 */ --blue-50: hsl(222 70% 96%); --blue-100: hsl(222 75% 92%); --blue-500: hsl(222 83% 53%); --blue-600: hsl(222 84% 44%); --blue-700: hsl(222 86% 34%); --blue-900: hsl(222 90% 18%); --gray-0: #ffffff; --gray-50: #f7f8fa; --gray-500: #6b6b6b; --gray-900: #1a1a1a; /* 第二层：语义变量，业务代码只认这一层 */ --color-bg: var(--gray-0); --color-bg-subtle: var(--blue-50); --color-text: var(--gray-900); --color-text-muted: var(--gray-500); --color-primary: var(--blue-500); --color-primary-hover: var(--blue-600); --color-border: var(--blue-200, hsl(222 80% 84%)); } [data-theme="dark"] { --color-bg: var(--blue-900); --color-bg-subtle: hsl(222 60% 22%); --color-text: #f0f2f5; --color-text-muted: #a8b0bd; --color-primary: hsl(222 80% 62%); --color-border: hsl(222 50% 32%); }

这里有个特别容易出问题的地方：深色模式下不能简单把明暗对调。浅色模式里主色 500 级压在白底上刚好，到了深色背景上对比度会掉一截，因为背景变暗了，但主色没变亮。所以深色模式的主色通常要往 400 级方向提亮几个点，我上面对--color-primary单独重定义就是这个原因。辅助文字色同理，深色底上的灰文字不能直接用浅色模式的 #6B6B6B，那在上面基本看不清。

4.4 第四步，用校验站点做三道验收

色板落地之后必须过三关，这三关我都用校验类站点跑，一次大概五分钟。

第一关是对比度全量检查。把界面里所有文字与背景的组合列出来，一个一个算，重点是那些不显眼的组合：禁用态文字、表格斑马纹上的文字、输入框占位符、按钮里的图标。占位符是最常翻车的地方，很多设计稿把它做到 2.5:1 左右，正式上线后被挑出来必须改。

第二关是色盲模拟。红绿色盲在男性中占比约 8%，这不是小概率事件。把界面截图丢进模拟器，看红线（错误提示）和绿线（成功提示）是否还能区分。如果分不开，解决办法不是换色，而是加形状或图标——错误用圆形感叹号加红色，成功用勾号加绿色，靠形状兜底比靠颜色靠谱得多。图表同理，两条线不能只靠颜色区分，得配实线虚线和标记点。

第三关是极端环境模拟。把屏幕亮度调到最低、开到户外强光模式下看一遍。有些在标准显示器上很舒服的浅灰边框，在低亮度下直接消失，表单的输入区域变成一片白。这时候 3:1 的组件对比度要求就不是教条，是真实可用性。

5. 常见问题与排查技巧实录

5.1 那些“设计稿好看、上线就变味”的排查表

下面这些问题我几乎每个项目都会碰到一两个，整理成表方便对照。

这张表里最值得展开的是“半透明遮罩”那一条。假设一个弹窗背景用了rgba(0,0,0,0.5)，上面压白字，很多人以为白字对比度是 21:1 满格，实际上弹窗后面的页面内容会透出来，局部可能变亮，白字的实际对比度会往下掉。正确做法是在浏览器开发者工具里取最终渲染出来的合成色值，再拿这个值去算。我现在给遮罩加文字的时候，遮罩透明度不会低于 0.6，就是为了留余量。

5.2 色相偏移这个隐蔽的坑

有一类问题特别难查：明明色阶是用同一个色相生成的，做出来深浅色块看着“不是一个色系”。原因通常出在 HSL 这个色彩空间本身。HSL 里的亮度 L 和饱和度 S 不是感知均匀的，同一个色相下，L 从 50 降到 40 的视觉变化，和从 30 降到 20 的变化，感受完全不同；更麻烦的是，某些色相在 HSL 里提亮时会不自觉地向另一个色相偏移，蓝紫色系尤其明显，浅色端会偏紫、深色端会偏黑蓝。

排查方法很直接：把生成的九级色块并排放在一起，用取色器读每一级的 H 值，如果 H 在整条色阶里漂移超过 5 度，说明这个工具用的是 HSL 插值。处理办法有两个，一是允许这种漂移，因为它有时候反而更符合视觉预期（很多成熟设计系统的蓝色色阶就是故意让浅色端偏青、深色端偏紫）；二是换用 OKLCH 生成的站点，OKLCH 的 L 是感知亮度，C 是感知色度，H 是色相角，三个维度基本解耦，做出来的色阶一致性明显更好。

/* OKLCH 写法：L 感知亮度 0-1，C 色度，H 色相角 */ :root { --brand-100: oklch(0.95 0.03 250); --brand-300: oklch(0.82 0.08 250); --brand-500: oklch(0.62 0.16 250); --brand-700: oklch(0.45 0.14 250); --brand-900: oklch(0.28 0.10 250); }

注意 500 级以后色度 C 是往下走的，这跟 HSL 里“深色端要提饱和”的做法正好相反。原因是 OKLCH 的 C 是绝对色度量，深色区域能给到的最大色度本来就低，硬提会超出色域被裁剪。这两套逻辑别混用，用 HSL 就按 HSL 的规矩，用 OKLCH 就按 OKLCH 的。

5.3 我给自己的几条硬规矩

踩了几年坑之后，我给自己定了几条不留商量余地的规矩，写在这里供参考。

第一条，任何上线的颜色必须来自色板，不允许在代码里写零散的十六进制值。代码评审时看到裸的#3b82f6我一定要求改成语义变量，因为这种值一旦散落在几十个文件里，换主题就是灾难。

第二条，辅助文字色不用现算，直接用校验站点批量过一遍再定。我通常会准备三档：正文 #1a1a1a、次要 #4a4a4a、辅助 #6b6b6b，这三档在白底上都过 AA，在浅灰底上也基本安全。禁用态用 #a0a0a0，明确不对它做对比度要求，但要配一条视觉上的“不可点”提示（降透明度或加斜纹），不能只靠颜色变浅来表达禁用。

第三条，色板存档带版本号和日期。这件事听起来琐碎，但真的救命。一个项目做半年，中间改过两次主色，如果没有存档，你根本说不清线上跑的到底是哪一版色阶，更别提回头算对比度了。我现在的做法是把整套变量存成一个独立的 CSS 文件放到仓库里，文件名带日期，每次改主色就新增一版而不是覆盖。

第四条，不要迷信任何一个站点的“配色方案推荐”。这类推荐大多基于色彩和谐理论生成，而色彩和谐理论解决的是“几个色放一起是否协调”，不解决“这个色在你的场景里是否可用”。真正的判断标准永远是：它在这个界面上、这个尺寸下、这个背景上，还认不认得出、看不看得清。工具能帮你把颜色算准，但“这套色到底行不行”，还是得放到真实页面里，缩到 100% 比例，把手机亮度调低，看一眼。