颜色混合器 将两种颜色以可调节的比例混合，并查看完整的渐变效果。

What Is 颜色混合器?

颜色混合器可以以任意比例将两种颜色混合在一起，显示出确切的结果颜色以及11步渐变的完整混合范围。线性RGB插值产生了混合颜色，这模拟了混合油漆颜色或创建CSS颜色过渡的效果。比率滑块允许您从第一种颜色的100%平滑地转换为第二种颜色的100%。工具在大型预览中显示混合结果，并以完整的渐变条形式提供上下文。颜色混合对于创建渐变中的中间颜色、设计系统中的中点颜色、动画中的过渡颜色以及理解两个品牌颜色叠加时的交互效果至关重要。

Why Use 颜色混合器?

• 平滑的比例滑块，从0%到100%，用于精确混合
• 大型预览图显示混合结果
• 11步渐变展示完整的混合范围
• 同时支持HEX和RGB输出，带复制按钮
• 即时查看两种颜色如何组合

Common Use Cases

找到中点

在两个品牌颜色之间找到精确的中点颜色，以实现平滑过渡。

渐变设计

预览两种颜色如何混合在CSS中的渐变之前。

颜色过渡

为两个颜色状态之间的动画步骤生成中间颜色。

调色板扩展

通过以各种比例混合现有的调色板颜色来创建新颜色。

Technical Guide

混合器在RGB颜色空间中执行线性插值（lerp）：结果 = 颜色1 × (1 - t) + 颜色2 × t，其中t是从0到1的混合比率。每个通道（R、G、B）都独立进行插值。这是最简单的混合方法，与CSS过渡之间的颜色插值相匹配。更复杂的混合方法存在（感知Lab空间，oklab），但线性RGB是使用最广泛和与浏览器渲染一致的方法。11步渐变可视化了在10%间隔处的完整插值范围。注意，RGB线性插值可能会产生稍微失真的中点--例如，将纯红色和纯绿色混合在50%，不会产生鲜艳的黄色，而是产生一种泥土般的棕黄色。这是因为RGB插值不遵循颜色轮。

Tips & Best Practices

• 1
  50%的混合会产生两种颜色之间的精确视觉中点
• 2
  尝试混合互补颜色--中点往往是一个有趣的中性灰色
• 3
  使用渐变条来找到混合看起来最好的比例，而不仅仅是50%
• 4
  在各种比例下与白色（着色）或黑色（阴影）混合会产生平滑的尺度
• 5
  RGB混合可能会产生柔和的中点--这是加法混合的预期行为

Related Tools

颜色拾取器

交互式颜色拾取工具，支持HEX、RGB、HSL和CMYK输出。

🎨 Color Tools

单色调色板生成器

从任意基础颜色生成单色调色板。

🎨 Color Tools

线性渐变生成器

使用自定义颜色、角度和颜色停靠点创建CSS线性渐变。

🎨 Color Tools

颜色渐变生成器

生成任意颜色的更深渐变，步数可调节。

🎨 Color Tools

颜色渐变生成器

生成任意颜色的更浅渐变，步长可调节。

🎨 Color Tools

Frequently Asked Questions

Q 颜色混合是如何计算的？

颜色使用线性插值在RGB空间中混合。每个通道（R、G、B）都独立地进行混合：结果=通道1×（1-比例）+通道2×比例。

Q 为什么混合红色和绿色会产生棕色而不是黄色？

在RGB线性插值中，路径经过柔和的中间值。真正的黄色位于颜色空间中的不同位置。对于颜色轮感知混合，请使用HSL插值。

Q 这是加法还是减法混合？

这是RGB空间中的加法（基于光）混合，符合屏幕显示颜色的方式。类似油漆的减法混合会产生不同的结果（例如，蓝色+黄色=绿色，在油漆中为灰色）。

About This Tool

颜色混合器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.