Mezclador de Colores
Mezcle dos colores usando los modos de mezcla RGB, RYB sustractivo, HSL o Lab perceptual con una vista previa de gradiente en vivo.
Acerca de esta herramienta
Elija dos colores con los selectores de color o ingrese valores hex, luego arrastre el control deslizante de proporción para mezclarlos desde 0 hasta 100%. Elija entre cuatro modelos de mezcla — RGB aditivo, RYB sustractivo (pintura tradicional), interpolación HSL o mezcla Lab perceptual — y vea el resultado como valores HEX, RGB y HSL. Una tira de gradiente de 5 pasos muestra el rango completo entre sus dos colores.
Cómo usar
- 1 Paso 1: Seleccione el Color A y el Color B usando los selectores de color o escribiendo códigos hex directamente en los campos de entrada.
- 2 Paso 2: Elija un modelo de mezcla — RGB, RYB (tipo pintura), HSL o Lab (perceptual) — del selector de modo.
- 3 Paso 3: Arrastre el control deslizante de proporción para establecer cuánto del Color A frente al Color B desea en la mezcla.
- 4 Paso 4: Copie el valor HEX, RGB o HSL del color mezclado y use la tira de gradiente de 5 pasos como referencia para los tonos intermedios.
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.