カラーミキサー

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.

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.