Misturador de Cores
Misture duas cores usando os modos de mesclagem RGB, RYB subtrativo, HSL ou Lab perceptual com uma prévia de gradiente ao vivo.
Sobre esta ferramenta
Escolha duas cores com os seletores de cor ou insira valores hexadecimais, depois arraste o controle deslizante de proporção para mesclá-las de 0 a 100%. Escolha entre quatro modelos de mistura — RGB aditivo, RYB subtrativo (tinta tradicional), interpolação HSL ou mesclagem Lab perceptual — e veja o resultado como valores HEX, RGB e HSL. Uma faixa de gradiente de 5 etapas mostra toda a gama entre suas duas cores.
Como usar
- 1 Passo 1: Selecione a Cor A e a Cor B usando os seletores de cor ou digitando códigos hexadecimais diretamente nos campos de entrada.
- 2 Passo 2: Escolha um modelo de mistura — RGB, RYB (semelhante a tinta), HSL ou Lab (perceptual) — no seletor de modo.
- 3 Passo 3: Arraste o controle deslizante de proporção para definir quanto da Cor A versus Cor B você quer na mistura.
- 4 Passo 4: Copie o valor HEX, RGB ou HSL da cor misturada e use a faixa de gradiente de 5 etapas como referência para tons intermediários.
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.