把配色灵感变成可用的网站调色板

已有品牌照片或参考图时，用图片取色器选取某个位置的颜色；想了解整张图片的主要色彩，则用图片配色提取器整理调色板。提取结果反映图片本身，不会自动替你分配正文、背景或按钮颜色。

例如咖啡店网站可以从照片提取奶油白作为底色、深棕作为强调色，再用少量灰绿色装饰。先给颜色分配用途，避免每个色块都争夺注意力。没有品牌色或图片时，可以先随机生成一组配色，从中保留一个有潜力的方向。

5 色配色生成器支持锁定单个颜色，再次生成时只替换未锁定的色块。选择配色模式后，当前顺序中第一个锁定色块会作为新颜色的基准；其他锁定颜色保持原值，即便它们不属于该配色关系。

可以先锁定品牌主色，再比较不同的背景和辅助色。重新排列锁定色块，可能改变用于生成配色的基准。五个色块全部锁定时，需要先解锁一个才能得到新颜色。协调的色相关系只是设计方向，不代表文字对比已经合格。

1. 选择最重要的主色并锁定。
2. 切换配色模式，仅重新生成未锁定颜色。
3. 为保留的颜色标注背景、内容区、文字、强调或装饰用途。

色彩变化生成器以单个基色生成混白、混黑和透明度变化，适合寻找浅色卡片背景或较深的按钮状态。它同时显示基色搭配黑字、白字的对比值，可用来快速比较；寻找更多文字颜色候选时，再使用可读文字颜色工具。

透明色会与后方背景叠加，必须在实际页面中查看最终效果。设计软件和 CSS 使用不同颜色格式时，可用颜色代码转换器整理 HEX、RGB 或 HSL。请记录具体色值，避免只根据一块屏幕上的视觉印象交付配色。

可读文字颜色工具根据输入的纯色背景推荐前景色，支持 AA 普通文字 4.5:1、AAA 普通文字 7:1 和 AA 大号文字 3:1。已有配色时，可在色彩对比检查器中查看两色的对比数值。3:1 属于 AA 大号文字要求，不适用于普通正文。

产品介绍、表单和长篇正文应按普通文字目标评估，并使用实际字体预览。接着逐一检查链接、焦点标记、错误提示及交互状态的可读性。具体定义见下方 W3C 参考文档。

随机渐变生成器可以生成两色或三色 CSS 线性渐变，修改颜色与角度后，可复制 CSS 或下载文件。先尝试两个接近的颜色，只有需要指定中间过渡色时再添加第三色，通常更容易控制页面视觉重点。

文字在一个纯色上通过对比检查，不代表它在整个渐变上都清楚。请检查文字覆盖的实际背景，并考虑手机端换行和裁切后的位置。无法稳定保持对比时，可以将文字放进纯色面板，让渐变只出现在周围装饰区域。

配色预览将五种颜色分配为页面背景、内容区底色、文字、主要操作色与主要操作上的文字色。色块放在一起协调，不代表放入界面后就合适。查看示例正文和按钮，再根据用途调整各个角色的颜色。

在 5 色配色生成器中，主动点击预览操作，才会将当前五种颜色依次带入背景、内容区、文字、主要操作和按钮文字。普通链接只会打开预览，不会自动导入生成器的配色。该操作在当前浏览器标签页内传递色值，不会把颜色写入网址。

从预览复制 CSS 自定义属性，并在自己的样式表中对应各个用途。五种角色颜色是实现的起点，不会自动完成主题或整页无障碍检查。发布前仍要检查正文、按钮文字、悬停、键盘焦点与实际背景组合。

记录每个颜色的用途、最终色值以及已测试的文字／背景组合。例如把「页面背景」和「主要操作按钮」分开命名，比保存一串没有标签的 HEX 更方便后续维护。渐变应另存完整 CSS，确保角度和颜色顺序不会丢失。

发布前使用真实内容查看长文字、悬停、键盘焦点，以及支持时的深色和浅色模式。修改背景或增加透明度可能让此前的对比检查失效；只要文字色或背景色发生变化，就重新检查最终组合。