调色剂

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

渐变条兼作调色器图表 输入#FF0000和#0000FF,将渐变步骤设置为3并按Mix Colors:条显示五个样本,#FF0000,#BF0040,#800080,#4000BF和#0000FF,以50%的比例混合结果为#800080 作为原色混合器它混合光线,而不是油漆 红色和黄色给出橙色#FF8000,但蓝色和黄色给出灰色#808080而不是油漆盒会给出的绿色 没有色轮混合器视图,只有你输入的两种颜色以及它们之间的步骤。

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

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

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