推荐方案
工作，有条不紊
从日常任务到新的突破，让团队共享进度，把精力留给真正重要的事。
把下一步，安排清楚支持色 / 文字色
24进行中的项目
86%示例完成进度
COLOR, WITH PURPOSE
网页配色工具
从一个品牌色，到可落地的网页配色。选出搭配色卡，放进页面看效果，再带走你的设计变量。
◈ 本地计算 · 免注册为品牌、设计与开发一起准备
YOUR PALETTE
一组配色，多种可能
配色色卡正在准备，开启 JavaScript 即可使用。
点击大色块复制颜色 · 单独编辑、锁定，或设为新的主色
主色色阶 50 — 950
11 阶亮度，寻找状态与层级
SEE IT IN CONTEXT
把配色放进网页
Forma
开始体验 让团队的想法，顺畅落地少一点忙碌，
少一点忙碌，
多一点创造。
在一个清晰的工作空间里，组织项目、连接团队，把好想法变成下一步行动。
为每一次认真创造而设计
好的设计，从清晰开始网页样稿 · 不会提交表单
示例文案与数字仅用于查看配色。模式切换会重新安排背景、表面与文字，用途色可能与原始色卡不同。
DESIGN TOKENS
颜色的网页用途
CONTRAST CHECK
看清每一处内容
普通文字 ≥ 4.5:1，大文字 ≥ 3:1。需靠颜色识别的控件边界通常 ≥ 3:1；装饰线不统一适用。报告仅检查指定颜色对，完整网页仍需验证字号、状态与背景。
查看色卡之间的对比度 5 × 5
Aa 配色需要清晰，也要好读。
点击矩阵中的比值，比较前景与背景。
色卡之间的比值用于比较候选组合；是否适合正文、控件或图形，还要看具体用途。
READY FOR YOUR NEXT STEP
把配色带进你的项目
导出当前模式的用途色、搭配色卡和主色色阶。
查看 CSS 变量
复制到样式表后，为实际组件设置背景与文字颜色，再检查悬停、禁用和焦点状态。
配色不上传、不会默认保存。使用配色链接或下载文件保留结果。在工作台空白处按空格可换一组，锁定色卡保持。本页包含站点广告。
网页配色，从一个主色开始，也要落在真实组件上
品牌色很容易选，网页中怎样使用却需要更多判断。按钮要突出，正文要清楚，卡片要有层级；同一颜色放在浅色和深色背景上，效果也会变化。这个网页色彩搭配工具把主色、搭配色卡、连续色阶与实际网页样稿放在一个工作台里，帮助独立站运营、产品、设计和开发一起讨论可落地的方案。
- 确定主色：输入品牌 HEX 值，或先选一个灵感色。主色色卡完整保留输入，方便对照品牌规范。
- 探索搭配：切换配色关系和视觉风格，用“换一组”寻找更多候选。锁定喜欢的卡片，继续探索其他颜色。
- 放入场景：在 SaaS、商品展示或 B2B 页面样稿中查看标题、按钮、标签、卡片与输入框，并比较浅色与深色模式。
- 检查后交付：查看用途色的对比度，复制 CSS 或下载 JSON。上到实际页面后，再核对字号、图片背景与交互状态。
色卡是候选颜色，用途色才是页面里的分工
一组好看的色卡，不意味着所有颜色都适合做正文或按钮。工作台会从主色和搭配色中建立背景、表面、正文、次要文字、主按钮、强调色与边界等用途，并为按钮选择文字颜色。浅色模式需要足够清楚的文字，深色模式需要区分背景与卡片，二者不能只靠颜色反转完成。
如果主色特别浅，它可以保留在品牌色卡中，同时使用更合适的文字色配合按钮。强调色适合少量使用；大面积背景通常需要更低的色度。工具提供可比较的起点，最终布局、图片和内容密度仍由你决定。
OKLCH 色阶，让亮度变化更有秩序
这里的 11 阶色阶按 50、100、200 到 950 标记，从浅到深展示亮度变化。OKLCH 将亮度与色度、色相分开，适合寻找浅背景、选中状态、悬停状态和深色文字等候选。超出 sRGB 范围的候选会降低色度后映射，再转换为 HEX。
色阶数字表示这组色阶中的位置，不表示品牌原色必须处在 500。亮黄色、深蓝色和浅粉色有不同的输入亮度，主色会完整保留在主色色卡中。导出的用途色和色阶需按实际组件选用，也可以在项目中进一步调整。
怎样解读网页颜色对比度？
对比度报告按不透明 sRGB 前景与背景的相对亮度计算。普通正文以 4.5:1 为 AA 门槛；至少 18pt 常规字或 14pt 粗体字的大文字，以 3:1 为门槛。需要通过颜色识别的控件边界和有意义的图形通常也需要 3:1，但装饰分隔线不能一概而论。通过一个颜色对，不代表整个网页符合 WCAG。
透明叠层、渐变和商品图片会改变实际背景；悬停、焦点、错误提示、禁用状态也需要分别看。内容不能只靠颜色表达，例如报错还应有清楚的文字。把导出的配色放进真实页面后，应同时检查键盘操作、字号和状态，而不仅是这份配色报告。
给独立站、产品与开发团队的一套配色交付
运营可以先围绕品牌主色挑选候选，产品用网页样稿比较按钮与信息层级，设计锁定喜欢的卡片继续探索，开发带走 CSS 变量与 JSON。分享链接能重新打开这组颜色和界面设置，减少截图中颜色难以准确复现的问题。
本工具只处理颜色和样稿，没有对品牌定位、转化率或行业心理的自动评判，也不会以 AI 的名义生成未经验证的结论。让同一组颜色拥有清楚的用途和可检查的对比度，才是下一步可以直接使用的交付。
常见问题
输入一个主色，怎样得到适合网页的配色？
选择或输入品牌主色，再选择相邻色、互补色、分裂互补、三角色或单色系。工具保留你输入的主色，以 OKLCH 色彩空间生成其余搭配色，并提供浅色与深色网页预览、用途色和对比度检查。色彩关系提供设计起点；最终仍需结合品牌、图片和实际页面进行选择。
支持哪些颜色格式？
主色输入支持 #RGB 和 #RRGGBB，例如 #63F 或 #635BFF，输入后会统一为六位 HEX。当前输入不支持透明度、色彩名称或其他色彩空间。色卡可以按 HEX、RGB 或 OKLCH 格式复制，导出 CSS 使用网页常用的 HEX 颜色。
OKLCH 与普通 HSL 配色有什么区别？
OKLCH 使用亮度、色度与色相描述颜色，通常比直接改变 HSL 的明度更适合建立视觉上连续的色阶。转换为网页常用的 sRGB 时，部分颜色超出可显示范围；工具会减少色度以映射到 sRGB。不同屏幕、环境光和浏览器显示仍可能有差别。
5 种配色关系如何选择？
相邻色使用主色附近的色相，适合较统一的视觉。互补色引入相对色相，方便突出重点。分裂互补在互补方向两侧寻找搭配，保留区分度。三角色在色相环上形成三组色相，适合区分模块。单色系围绕主色调整亮度与色度，适合让层级比色相更突出。它们不是行业或品牌心理的判断规则。
11 阶色阶中的 500 色一定等于我的主色吗？
不一定。50–950 是亮度逐步变化的设计色阶标签，500 不是对所有输入都合适的亮度。你输入的主色会完整保留在主色色卡中，色阶则用于寻找背景、边框和悬停等状态的候选色。请按实际用途和对比度选择。
怎样固定喜欢的色卡，再继续探索？
点击色卡的锁定按钮固定这一张，切换搭配关系、风格或点击“换一组”时，其余未锁定的色卡继续变化。可以单独编辑色卡，或将它设为新主色。点击“解除锁定”重新开放所有色卡，“重置”恢复默认配色和设置。
对比度检查能保证网页符合 WCAG 吗？
不能。报告只检查所列不透明前景色和背景色的相对亮度对比度。WCAG AA 的普通文字门槛为 4.5:1，大文字为 3:1；需要用颜色识别的控件边界和图形通常需要 3:1。大文字指至少 18pt 的常规字或 14pt 的粗体字。透明度、渐变、图片背景、悬停/焦点状态、字号及其他可访问性要求需在实际页面另行检查，装饰性分隔线并不统一适用 3:1。
深色预览为什么不会直接把所有颜色反转？
深色网页需要重新安排背景、表面、正文和强调色的层级。工具根据所选模式生成用途色，并为主按钮选择较合适的文字色，主色色卡仍保持你的输入。不同模板展示同一组用途色，方便比较 SaaS、商品展示与 B2B 页面中的实际效果。
颜色会保存或上传吗？分享链接包含什么？
配色计算在浏览器本地完成，不向本站提交颜色，也不会默认将配色保存到本地存储。关闭页面前可以下载 CSS 或 JSON。复制的配色链接包含颜色和界面设置，可用于再次打开或发给同事，请不要在链接中加入个人或客户信息。页面保留站点广告；广告使用自己的网络服务。
CSS 与 JSON 导出适合什么工作流？
CSS 导出包含配色色卡、11 阶主色色阶和当前浅色/深色模式的用途变量，可作为网页样式的起点。JSON 适合保存配色和设置，再交给设计或开发同事核对。复制样式并不意味着页面自动符合可访问性要求，请在实际内容与组件状态中复核。
计算与用色参考：WCAG 2.2 文字对比度说明、非文字对比度说明与 CSS Color 4 OKLab / OKLCH。本工具用减少色度的方式映射 sRGB 色域，不宣称复现所有浏览器的色域映射算法。