颜色混合

怎么用

1. 设定颜色 A为底色、颜色 B为混合色。两个输入框都接受 #abc、#aabbcc、rgb(12, 34, 56) 与 hsl(210 50% 40%)，取色器会跟着你输入的文本同步。
2. 选一个混合模式：正常、正片叠底、滤色、叠加或差值。每种模式都按通道分别计算。
3. 拖动混合比例。0% 是未做混合的颜色 A，100% 是完全混合的结果，中间则是两者插值。
4. 在色块里看结果，再复制 HEX、RGB 或 HSL 值，也可以整段复制 CSS。点互换可以把两色调过来，不必重新输入。

常见用法

• 做 hover 或按下态 —— 用正片叠底以较小的比例压暗品牌色，而不是手猜第二个色值。
• 在带底色的背景上确认对比度 —— 先混合底色与蒙版，再拿结果和文字色比对。
• 定渐变的中间色 —— 取两个端点，50% 就是中间色。
• 几种写法互换 —— 用一种写法输入，读出另外两种写法下的同一个颜色。

常见问题

问：数据会上传吗？ 答：不会。所有颜色运算都在浏览器内完成，粘贴进来的品牌色板与设计变量都不会离开你的设备。

问：为什么结果和设计软件里看到的不一样？ 答：这里的混合模式直接在 sRGB 通道值上计算，不做色彩管理，也不做多层叠加的合成。使用其他色彩空间、或在多层背景上混合的工具，会得出略有差异的值。

问：能一次混合三种以上颜色吗？ 答：一次只能混两色。先混出结果并复制色值，再把它粘回颜色 A，继续和下一色混合即可。

问：比例只能用整数百分比吗？ 答：滑杆按 1% 步进，用来目视选色已经足够。输出的 CSS 里会记下你用的确切比例，方便以后复现。