网站配色预览工具
将五色调色板应用到网页示例，检查文字对比度，并导出对应的 CSS 颜色变量。
设置五种颜色的用途
请输入不透明的 sRGB HEX 色值，支持 3 位或 6 位，可省略 #。修改后会立即更新预览。
用空格、逗号或分号分隔，顺序为页面背景、卡片背景、页面文字、按钮背景、按钮文字。恰好五个有效色值会立即应用，之后可再交换用途。
实时网页配色预览
这个静态网页示例用于展示常见元素的配色效果，导航文字与按钮仅供视觉预览。
为下一个灵感，留一点空间。
在制作网站、作品集或管理界面之前，先看看这组颜色放在整个页面上的搭配效果。
把小想法说清楚
用卡片整理实用信息，也别忘了确认正文在页面背景与卡片背景上都容易阅读。
了解这个项目预览中各组文字的对比度
页面文字 / 页面背景
#1E293B / #F1F5F9
对比度： 13.35:1
- 普通文字 AA（4.5:1）: 符合
- 普通文字 AAA（7:1）: 符合
- 大号文字 AA（3:1）: 符合
卡片文字 / 卡片背景
#1E293B / #FFFFFF
对比度： 14.63:1
- 普通文字 AA（4.5:1）: 符合
- 普通文字 AAA（7:1）: 符合
- 大号文字 AA（3:1）: 符合
按钮文字 / 按钮背景
#FFFFFF / #1D4ED8
对比度： 6.70:1
- 普通文字 AA（4.5:1）: 符合
- 普通文字 AAA（7:1）: 不符合
- 大号文字 AA（3:1）: 符合
使用 WCAG 2 sRGB 公式检查三组纯色文字与背景，以未四舍五入的值判断，显示小数点后两位。大字指常规字重至少 24 CSS px，或粗体至少 18⅔ CSS px。
导出配色 CSS 变量
这五个自定义属性与预览使用的颜色一致。加入样式表后，可通过 var(--palette-background)、var(--palette-surface)、var(--palette-text)、var(--palette-primary) 和 var(--palette-on-primary) 引用。
如何预览网站配色
- 逐一输入五个 HEX 色值、粘贴五色列表，或从五色调色板生成器打开。
- 将颜色分配到页面、卡片、文字与按钮，使用交换菜单尝试不同用途。
- 比较网页预览与三组对比度结果，复制 CSS 变量或下载 .css 文件供项目使用。
试试这些配色方式
- 以浅色页面背景、白色卡片、深色文字与蓝色按钮的示例，规划企业官网配色。
- 交换页面背景与文字颜色，尝试深色网站配色，并重新确认卡片和按钮的对比度。
- 从照片或品牌调色板选出五种颜色，分配到界面用途，再检查文字是否清晰易读。
常见问题
这与颜色深浅生成器有什么不同？
这个工具将现有的五种颜色应用到网页用途与布局示例，不会生成新的深色或浅色。你可以交换用途，观察同一组调色板用在实际界面上的效果。
对比度检查会比较哪些颜色？
会分别比较页面文字与页面背景、页面文字与卡片背景，以及按钮文字与按钮背景。每一组都会显示普通文字 AA、普通文字 AAA 与大号文字 AA 的结果。
为什么显示 4.50:1 却没有通过 AA？
界面将数值四舍五入到小数点后两位，但判断使用完整计算值。实际对比度稍低于 4.5:1 时，即使显示 4.50:1，仍不符合普通文字 AA。
导出 CSS 后，网站就会自动应用配色吗？
导出五个 CSS 自定义属性，在网站的背景、文字与按钮样式中引用，即可应用配色。
我输入的颜色会被保存或上传吗？
编辑内容只在当前浏览器标签页处理，色值不会出现在分析事件中。从调色板生成器打开时，会通过同一标签页的临时会话存储传递，成功读取后便移除。想保留配色时，请自行复制或下载。
配色仅在当前浏览器标签页处理，色值不会写入分析事件或网址。你主动从生成器发送的调色板会通过同一标签页的临时会话存储传递，加载后即移除。请复制或下载以保留配色。
觉得好用？分享给同事或朋友。
点击 表示支持，或点击 提供反馈。