调色剂

A color mixer将两种颜色混合成一种新的颜色,并向您显示HEX,RGB和HSL中的结果。您在任何常用语法中都给它第一种颜色和第二种颜色(像#4466EE这样的十六进制代码,rgb()或hsl()值,或者像珊瑚这样的CSS名称),选择折叠的第二种颜色有多少,它会立即计算混合颜色。它还在两种颜色之间构建中间步骤的梯度,因此您可以看到整个过渡而不是单个中点。

直接混合是加权平均值:在 50% 的比率下,每种颜色贡献相等,工具在两个输入之间线性插值每个红色、绿色和蓝色通道。将比率滑向 0,保留第一种颜色;将其滑向 100,然后落在第二种颜色上。这与 CSS 对两站梯度使用的数学相同,这就是为什么红蓝梯度的中点是该工具报告的紫色。

除了普通混合之外,混合器还提供 W3C 合成和混合规范中定义的可分离混合模式:相乘、屏幕、覆盖、变暗、变亮、差异和平均。这些操作与 Photoshop 和 GIMP 等图像编辑器在层之间相乘总是变暗(红色乘以蓝色为黑色)、屏幕总是变亮(蓝色上的红色为品红色),并且差异为您提供两种颜色之间的逐通道距离。然后,该比率就像层不透明度一样,控制混合结果在第一种颜色上应用的强度。

Everything 在浏览器中运行客户端。您输入的颜色永远不会离开选项卡,并且由于颜色数学是普通算术,因此一旦页面加载,该工具就会离线工作。设计师会伸手去找一个混音器,在品牌主音和中性音之间找到颜色,构建色调和重音音阶,或者在提交设计文件之前预览两层将如何组合。开发人员使用它来生成梯度停止,计算悬停状态,并将混合结果直接转换为他们可以粘贴到 CSS 中的 HEX 或 HSL 值。