我一天中有一天,我在设计文件和样式表之间度过了一段令人惊讶的时光,将一种颜色推向另一种颜色,直到悬停状态、边框或渐变停止看起来正确。多年来,我在头脑中做过算术,或者在拾音器中用眼球把它画出来,这很好,直到你需要品牌蓝色和温暖中性之间的精确颜色,并且你需要它作为你可以粘贴的十六进制代码。所以我构建了一个 混色器 上 Toolz.dev 它将两种颜色与您控制的比率混合在一起,提供图像编辑器使用的相同混合模式,并将结果交给您 HEX、RGB 和 HSL。这是它以及 "混合颜色 " 在屏幕上的含义的指南。
TL;博士: 颜色混合器将两种颜色混合为一种。工具 混色器 插值两种颜色,比例可调,支持 W3C 可分离混合模式(乘法、屏幕、叠加、变暗、变亮、差异、平均),在颜色之间构建中间步骤梯度,输出每个结果为 HEX、RGB、HSL,接受 hex、rgb()、hsl() 和 CSS 颜色名称,并且完全运行客户端。
如何在屏幕上混合两种颜色?
Plain答案是两种颜色的加权平均值'红、绿、蓝通道。要混合红色 (255, 0, 0) 和蓝色 (0, 0, 255) 在等份中,您对每个通道进行平均:红色变为 (255+0)/2 = 128,绿色留下来 0,蓝色变为 (0+255)/2 = 128的,给予 (128, 0, 128)的,也就是十六进制 #800080,一个纯紫色。将重量向一侧移动,你沿着两种颜色之间的线滑动。这正是比率滑块的作用:在 0% 时,你保留第一种颜色,在 100% 时,你落在第二种颜色上,50% 是平分。
这与两站 CSS 梯度使用的插值相同,这就是中点的原因 linear-gradient(red, blue) is that purple。mixer把你的两种颜色之间的梯度也画成一条条条, 你可以复制每一种作为中间停止, 使关系显而易见如果你曾经想要"这两种颜色均匀地间隔三种颜色,"梯度条是最快的获得它们的方法。
1个诚实的警告,因为它让人感到惊讶:对RGB通道进行平均并不是颜料如何混合,在屏幕上,颜色是浅色,并可相加地组合;在油漆组中,它们是颜料,并可相减地混合红色和绿色的光趋势,朝向暗淡的橄榄色,而不是从油漆中得到的鲜艳的黄色,因为你是平均光值,而不是混合颜料这不是工具中的一个错误,它是sRGB的性质,当你想要一个更活泼的结果时,修复的是将坐在一起更靠近的色调混合在车轮上 颜色转换器 当您想在推理色调时看到跨格式表达的相同颜色时,与混音器一起很方便。
Mix 和混合模式有什么区别?
Mix是上面描述的加权平均值:它总是落在两种颜色之间的直线上的某个地方混合模式完全是其他东西,它们是来自图像编辑器的图层混合操作,针对web标准化在 W3C合成和混合等级1 规范,并且每个规范都将通道与不同的公式而不是简单的平均值相结合。
| 模式 | 每个通道公式(值 0 到 1) | 效果 |
|---|---|---|
| 混合 | b (按比率加权) |
加权平均值落在两种颜色之间 |
| 乘 | a x b |
总是更深;白色保持颜色不变,黑色迫使黑色 |
| 屏幕 | a + b - a x b |
总是更轻;乘法的逆 |
| 叠加 | 按底数乘法或屏幕 | 增加对比度 |
| 变暗 | min(a, b) |
保持较暗的通道 |
| 淡化 | max(a, b) |
保持较轻的通道 |
| 差异 | abs(a - b) |
通道距离;相同的颜色给出黑色 |
| 平均 | (a + b) / 2 |
两者的未加权平均值 |
值得携带的直觉:相乘总是变暗,因为相乘两个分数会得到更小的分数,因此红乘以蓝就是黑色(每种颜色都缺少另一种颜色的通道)屏幕总是变亮,因为它相乘应用于倒数值差异,为您提供逐通道距离,这就是为什么在差异下将颜色与自身混合会产生纯黑色。在混合器中,比率滑块的行为类似于层不透明度:它会使混合结果在第一种颜色上褪色,因此您可以将效果从微妙到充分。
比值滑块控制什么?
比率设定了第二种颜色或所选模式的混合结果在第一种颜色上施加的强度。将其视为顶层的不透明度。在 0% 时,顶层是不可见的,您会看到第一种颜色未被触及。在 100% 时,顶层是完全不透明的,您将获得该模式的完全混合。在 50% 时,您将获得均匀的分割。对于普通混合,这会降低到熟悉的加权平均值;对于像乘法这样的模式,它可以让您施加温和的变暗而不是完全的效果。
That unified model is considerative, 因为它意味着一个滑块在每个模式下都做着相同的概念性工作,在实践中我使用低比例将颜色轻微地推向另一个(悬停状态是"按钮,但15%朝向黑色")和高比例当我想要完全混合时 梯度生成器 当您想要将一对混合颜色变成完整的多站 CSS 梯度时,请拾取混合器离开的位置。
如何在两种颜色之间获得准确的颜色?
Mix 模式,比例设置为 50,结果就是精确的中点,也可以直接从渐变条上读取:中心样本是中途颜色,当你需要两个端点之间几个均匀间隔的颜色时,提高渐变步数,在你想要的位置复制样本,这是混合器构建的日常任务,无论你是为调色板生成色调,间隔数据可视化颜色,还是找到位于两个品牌颜色之间的中性。
为了建造单一颜色的整个家庭而不是混合两种颜色, 色调生成器 是更好的适合,因为它将一种颜色混合到白色,黑色和灰色以产生色调,色调和色调。当您为文本或UI选择颜色时,通过以下方式运行结果 颜色选择器 和对比度检查,因为混合得漂亮的颜色仍然会达不到可读性阈值,更广泛的工作流程,从挑选到检查再到运输,都是在中布局的 web开发人员工具包 指南。
为什么我的混合颜色有时看起来泥泞或深色?
2件事导致这一点,而这两件事都是关于颜色空间而不是工具,第一是已经提到的加法-减法不匹配:RGB中平均远处的色调向灰色漂移,因此轮子上的相反颜色混合到一些沉闷的东西上,第二是sRGB值是伽马编码的,而不是线性光,真正的物理光平均值会首先转换为线性空间,平均值,然后转换回来,这使得中点更加明亮。大多数工具,CSS梯度和图像编辑器直接在伽马编码的sRGB中插值,因为它是快速的,可预测的,并且符合设计师对梯度的期望,所以这个混合器做同样的事情,如果你想要更明亮的混合,混合更接近的色调,依靠屏幕模式,或者在最终的CSS中达到像OKLCH这样的感知均匀空间 数据隐私在线工具 guide解释了为什么,无论是否泥泞的中点,在浏览器中而不是在服务器上进行此数学计算是设计工作的正确默认值,您宁愿保持本地化。
常见问题
如何混合两种颜色?
要混合两种颜色,您可以对它们的红色、绿色和蓝色通道进行平均,并根据您想要的每种颜色进行加权。红色(255、0、0)和蓝色(0、0、255)的 50/50 混合平均为(128、0、128),即紫色。该工具为您执行该插值,并允许您随比率滑块移动权重,因此您可以将两种颜色之间的任何位置着陆,而不仅仅是精确的中点。
Mix 和 Multiply 有什么区别?
Mix 是落在两种颜色之间的加权平均值,因此混合红色和蓝色会得到紫色。Multiply 将它们按照重叠墨水或滤光片的方式组合起来,将通道值相乘,因此它总是产生一种颜色,颜色深到或比两个输入都深。Multiply 红色和蓝色会得到黑色,因为每种颜色都缺少对方拥有的通道。Multiply 是图像编辑的混合模式,而不是简单的平均值。
为什么混合两种明亮的颜色有时会产生泥泞的结果?
因为每当两种颜色在色轮上相距较远时,平均 RGB 通道就会将结果移向灰色。红色和绿色平均为暗橄榄棕色,而不是鲜艳的黄色,因为屏幕颜色混合为浅色,而您可能期望的鲜艳黄色来自于混合颜料。对于更活泼的混合,混合色调更接近的颜色,或尝试屏幕模式,从而使结果更加明亮。
我可以在 HSL 而不是 RGB 中混合颜色吗?
RGB中插值这个混频器,这是CSS梯度和图像编辑器默认情况下所做的,它也会报告HSL中的结果,在RGB中混频是可预测的,并且匹配两站CSS梯度渲染的方式在HSL中插值色调可以绕着色轮长途跋涉,并产生意想不到的中间色调,这就是为什么RGB插值对于通用混合来说是更安全的默认值。
比值滑块会发生什么变化?
该比率设置了第二种颜色或混合结果在第一种颜色上的应用强度。在 0% 时,您将获得第一种颜色不变,在 100% 时,您将获得所选模式的完整第二种颜色或完整混合,而在 50% 时,您将获得均匀的分割。对于混合模式,它的行为类似于图像编辑器中的图层不透明度,将混合颜色褪色到基底上。
如何在两种颜色之间得到颜色?
Mix 模式,比例设置为 50%,结果就是准确的中点,也可以从渐变条读出,其中中间的样条是中间颜色,为了更精细的控制,在渐变处添加更多步骤,在两种颜色之间复制与您需要的位置匹配的中间样条。
Screen 和 Overlay 等混合模式有何用途?
它们是图像编辑器的图层混合模式,在 W3C 合成和混合规范中为 Web 定义。屏幕变亮并用于发光和高光,倍增变暗并用于阴影和色调,并且叠加通过将两者结合起来增加对比度。在混合器中预览它们可以让您预测两个彩色图层在 CSS 或设计工具中应用之前将如何组合。
混合器接受什么颜色格式?
Mixer接受六角码(三位、六位或八位)、rgb()和rgba()值、hsl()和hsla()值,以及常见的CSS颜色名称,如珊瑚色或丽贝卡紫色。每个输入都有一个原生颜色样本,您可以点击以视觉方式进行选择,并且每个结果都以HEX、RGB和HSL显示,因此您可以复制样式表需要的任何格式。
调色机是免费且私密的吗?
是的。颜色混合器是完全免费的,没有注册、没有水印、没有使用限制,并且每次计算都发生在您的浏览器中。您输入的颜色永远不会上传,因此您混合的任何内容都不会离开您的设备,并且由于数学在本地运行,如果页面加载后您失去连接,该工具将继续工作。
