配色生成

仅在当前浏览器处理

文本上限:2000000 个字符

此工具不会上传你的输入。

#2981aergb(41, 129, 174)
#2c43d8rgb(44, 67, 216)
#894be7rgb(137, 75, 231)
#b12abbrgb(177, 42, 187)
#dc388frgb(220, 56, 143)

五个色块先让稿子能动。无障碍是真实字号下的比值,不是好看的渐变。印刷专色不保证。

落地页还是 #000#111——给一组起步色。不是品牌系统,也不是无障碍出具证明。好看的渐变救不了 2.8:1 的按钮字。

对色走对比度检查。截图取色走图片取色。阴影和渐变有自己的生成器。占位灰块走占位图

方案色,不是 VI

  • 落地页临时配色。正文组合请到对比度页看 4.5:1 / 3:1 量级,不是认证。
  • 印刷专色不保证。屏幕 hex 和印刷油墨不是同一套。
  • 色盲、弱视不会因为「和谐」就自动过。保留非颜色线索。
  • 不是完整主题:悬停、禁用、暗色、图表色都要另做。

怎么用

  1. 选种子或接受生成结果。
  2. 把 hex 写进 CSS 变量。
  3. 主文字对先过对比度。半透明和背景图要吸实际像素再算。

使用前先看清的限制

不是上线许可,不是印刷准,也不是整站爬虫验收。色板只是起点。

常见问题

对色盲友好吗?

不会自动保证。设计工具里模拟,并保留非颜色线索(图标、文字、线型)。

能从照片抽色板吗?

单像素走图片取色,再回来做色带。本页不聚类整张图。

印刷 Pantone?

这里是屏幕 hex/RGB。印刷看对方的配置文件,不要把 hex 当专色号。

好看就过 WCAG 吗?

每对文字/背景都要查。正文 AA 常见 4.5:1,大号字或控件常见 3:1。本页不出符合性报告。

暗色主题怎么办?

同一套色板换底再查对比度。起步五色不是完整主题(悬停、禁用、暗色都要另做)。

相关工具