颜色混合器
使用RGB、RYB减色、HSL或感知Lab混合模式混合两种颜色，并实时预览渐变效果。
关于此工具
使用颜色选择器或输入十六进制值选择两种颜色，然后拖动比例滑块在0到100%之间混合。从四种混合模型中选择——RGB加色、RYB减色（传统颜料）、HSL插值或感知Lab混合——并以HEX、RGB和HSL值查看结果。5步渐变条显示两种颜色之间的完整范围。
使用方法
- 1 第一步：使用颜色选择器或直接在输入框中输入十六进制代码来选择颜色A和颜色B。
- 2 第二步：从模式选择器中选择混合模型——RGB、RYB（类颜料）、HSL或Lab（感知）。
- 3 第三步：拖动比例滑块设置混合中颜色A与颜色B的比例。
- 4 第四步：复制混合颜色的HEX、RGB或HSL值，并将5步渐变条作为中间色调的参考。
Why mixing two colors is not one simple answer
Ask what red and green make and you get two correct answers. Mix them as light and you get yellow; mix them as paint and you get a muddy brown. That is the whole story of this tool: blending two colors depends entirely on the model you mix in. This mixer takes two colors and a proportion slider and computes the blend four different ways, so you can see how the same inputs produce strikingly different outputs. It is not a color converter — it does not just translate one color between formats — it interpolates between two colors and shows the path between them as a five-step gradient.
| Mode | Models | Best for |
|---|---|---|
| RGB Additive | Mixing light | Screens, simple averages |
| RYB Subtractive | Mixing paint/pigment | Art, traditional color wheels |
| HSL Interpolation | Hue/saturation/lightness | Smooth hue rotation |
| Lab Perceptual | Human vision | Even-looking gradients |
Additive versus subtractive: the core distinction
Additive mixing (RGB) is how light works. Start from black and add colored light; the more you add, the brighter it gets, until red, green, and blue light combine to white. Mixing in RGB is a straight average of the red, green, and blue channels — fast and correct for anything displayed on a screen. Subtractive mixing (RYB) is how pigment works. Start from white paper and each pigment subtracts wavelengths; stack enough and you approach black. This is the color wheel taught in art class, where the primaries are red, yellow, and blue, and blue plus yellow makes green. The RYB mode converts each color into red-yellow-blue space, blends there, and converts back, so it reproduces the intuitive results painters expect — which RGB averaging cannot.
A worked example
Set Color A to pure blue #0000FF and Color B to pure yellow #FFFF00, with the slider at 50%. In RGB Additive mode the channel-by-channel average gives a flat gray-ish #7F7F00 — counter-intuitive, because averaging light does not behave like paint. Switch to RYB Subtractive and the same two colors blend toward green, exactly as mixing blue and yellow paint would. The tool even recognises classic pairings: feed it familiar combinations and it surfaces a paint-mixing note like "Blue + Yellow → Green" or "Red + White → Pink." The slider lets you weight the mix — at 25% you get a blend that is three-quarters Color A, useful for tinting one color slightly toward another.
The other two modes
HSL interpolation blends in hue–saturation–lightness space and, crucially, rotates the hue the short way around the color wheel. Blending red and cyan in HSL travels through the nearest arc rather than averaging to gray, which keeps intermediate steps colorful instead of washing out. Lab perceptual mode interpolates in the CIELAB color space, which is designed so that equal numerical steps look like equal visual steps to the human eye. Lab is the right choice when you want a gradient whose midpoint genuinely looks halfway between the ends — RGB gradients often appear to darken or muddy in the middle, and Lab fixes that.
Reading the output
For any blend the tool shows the result as a HEX value (one click to copy), plus its RGB and HSL equivalents, so you can drop the mixed color straight into CSS or a design file. Below that, the five-step gradient renders the blend at 0%, 25%, 50%, 75%, and 100% in your chosen mode — a quick way to compare how, say, RGB and Lab produce visibly different middle tones between the same two endpoints.
Practical use cases
- Picking a midpoint color between two brand colors for a hover state, a border, or a divider.
- Building gradients that look even — use Lab mode so the middle does not appear dull, a common flaw in naive CSS gradients.
- Predicting paint results with RYB before mixing physical pigments, or to teach traditional color theory.
- Generating tints and shades by mixing a color with white or black at varying proportions.
Common mistakes
- Expecting screen math to match paint. RGB averaging gives "wrong" results for pigment because light and paint mix by opposite physics. Use RYB when you mean paint.
- Assuming all gradients are equal. The same two endpoints produce different midpoints in each mode; if a gradient looks muddy, switch from RGB to Lab.
- Entering bad hex codes. The text inputs expect a full six-digit hex like
#FF6B6B; three-digit shorthand in the text field will not update until it is a valid six-digit value. - Treating the slider as opacity. It is a blend proportion between two solid colors, not transparency — 50% means an equal mix, not half-see-through.
All four conversions and the gradient are computed in your browser; no colors are sent anywhere. Mix, copy the HEX, and paste it wherever you need it.