颜色混合器
把两个颜色按比例（0–100%）混合，或用正片叠底、滤色、叠加、差值等 8 种混合模式叠加，实时预览结果并给出对比度信息。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
预览
左到右分别是 A、B 与混合结果，下方是结果色上的文字效果
结果格式
#800080
#800080FFrgb(128, 0, 128)#FFFFFF9.42:1 · 正文 AAA · 大号文字 AAA2.23:1 · 正文 不通过 · 大号文字 不通过这个工具能做什么
- 给按钮、标签做过渡色：把品牌色和另一个颜色按 50% 混合，直接拿到中间色值，不用在取色器里来回试。
- 做叠加效果时选混合模式：正片叠底让颜色变暗、滤色提亮，还能复现设计稿里「文字压在图片上」的实际颜色。
- 检查可读性：结果色与白 / 黑的对比度会算出来，正文 4.5、大号文字 3 是 WCAG AA 的门槛，一眼看出能不能用。
- 颜色带透明度时也能算：上层颜色的 alpha 会参与 source-over 合成，适合核对半透明遮罩叠出来的真实颜色。
示例
输入
颜色 A #3366FF（下层）、颜色 B #FF0000（上层）、按比例混合 50%
输出
#993380，等价写法 rgb(153, 51, 128)；相对亮度 0.107；与白色对比度 6.69、与黑色对比度 3.14；推荐文字色 #FFFFFF
按比例混合是逐通道线性插值：R 从 51 到 255 的中间值是 153，G 从 102 到 0 是 51，B 从 255 到 0 是 128。若改用「正片叠底」，同一组颜色会得到 #330000。
常见问题
按比例混合和混合模式有什么区别？
按比例混合是 0% 取 A、100% 取 B 的线性插值，结果永远落在两色之间，适合调过渡色。混合模式则用 W3C 的混合公式逐通道计算（正片叠底取乘积、滤色近似取反相乘的反），再按 alpha 做 source-over 合成，结果可能比两个颜色都暗或都亮。
对比度多少才算合格？
WCAG 2.x 对正文文字要求 4.5:1（AA）、7:1（AAA），大号文字放宽到 3:1 和 4.5:1。工具会同时给出结果色对白、对黑的对比度并标注通过情况，选文字颜色时对照这个比值即可。
结果色为什么有时是 8 位十六进制？
hex 输出为统一大写 6 位；一旦任一输入颜色带透明度（例如 #3366FF80），结果 alpha 会小于 1，此时输出 #RRGGBBAA 才不丢信息。alpha 一律 0–1，按两位十六进制写回。
写错颜色会怎样？
#RGB、#RGBA、#RRGGBB、#RRGGBBAA 都接受（可以省略 #，大小写不限），其他写法会提示「无法识别这个颜色」。它不接受 rgb()、hsl() 或命名色，需要的话先用颜色格式转换工具转成 hex。
和设计软件里的混合结果对得上吗？
对得上。公式取自 W3C Compositing and Blending Level 1，通道四舍五入到整数；唯一容易有差异的是设计工具可能带有额外的色域或伽马设置，此时结果会差一两个数值。
关键词：colorblendmixmultiplyscreenoverlay颜色混色混合模式正片叠底滤色调色对比度