Mezclador de colores
Elige dos colores, mueve la proporción y ve al instante el color mezclado con sus códigos HEX, RGB, HSL y OKLCH. Compara la mezcla perceptual con los modos de fusión clásicos y copia cada paso intermedio.
Última actualización:
Pasos de A a B
Haz clic en un paso para usar esa proporción, o en su código para copiarlo.
Cómo usar Mezclador de colores
- Elige el color A y el color B con los selectores o escribe los códigos HEX.
- Elige un método de mezcla: OKLab para mezclas suaves y naturales, sRGB para coincidir con la mayoría de las herramientas de diseño, o un modo de fusión.
- Mueve el control para indicar cuánto del color B entra en la mezcla.
- Pulsa Mezclar colores (el resultado también se actualiza en directo) y haz clic en cualquier código para copiarlo.
- Usa la fila de pasos para ver todo el degradado entre A y B y copiar cada paso.
Fórmulas de mezcla
Con t como la proporción del color B (0 a 1) y valores de canal de 0 a 255:
| Método | Fórmula | #ff0000 + #0000ff al 50% |
|---|---|---|
| sRGB | C = A + (B − A) × t sobre los valores almacenados | #800080 |
| RGB lineal | Decodificar la gamma sRGB, mezclar y volver a codificar | #bc00bc |
| OKLab | Mezclar L, a y b en el espacio perceptual OKLab | #8c53a2 |
| OKLCH | Mezclar luminosidad y croma, girar el tono por el camino corto | #b200b8 |
| HSL | Mezclar tono (camino corto), saturación y luminosidad | #ff00ff |
Las diferencias son mayores con colores complementarios o muy distintos. Con dos colores parecidos, todos los métodos dan casi el mismo resultado.
Fórmulas de los modos de fusión
En los modos de fusión los valores se escalan a 0–1, B es la capa superior y el control es la opacidad de B: resultado = A + (fusión(A, B) − A) × opacidad.
- Multiplicar: A × B. Ejemplo: #ff8000 × #808080 = #804000.
- Trama: 1 − (1 − A)(1 − B). Ejemplo: #ff8000 trama #808080 = #ffc080.
- Superponer: 2AB si A ≤ 0.5; si no, 1 − 2(1 − A)(1 − B).
- Oscurecer / Aclarar: min(A, B) / max(A, B) por canal.
- Sobreexponer / Subexponer color: A ÷ (1 − B) y 1 − (1 − A) ÷ B, limitados a 0–1.
- Diferencia / Exclusión: |A − B| y A + B − 2AB.
Consejos
- ¿Necesitas un tono para hover o pulsado? Mezcla tu color con negro (#000000) al 10–20% para estados más oscuros y con blanco al 10–20% para tonos más claros.
- ¿Estás creando un degradado? Copia los pasos generados en OKLab u OKLCH para evitar la "zona muerta" gris que tienen los degradados sRGB entre colores complementarios.
- ¿Quieres coincidir con un archivo de diseño? Usa la mezcla sRGB y los modos de fusión, que siguen las mismas fórmulas que Figma, Photoshop y CSS.
Preguntas frecuentes
¿Qué color se obtiene al mezclar rojo y azul?
Depende de cómo los mezcles. Promediar los valores sRGB de #ff0000 y #0000ff da #800080, un morado oscuro. Mezclar en luz lineal da un #bc00bc más brillante, y OKLab da #8c53a2, un violeta suave que parece estar a medio camino entre los dos. La pintura se comporta de otra forma, porque los pigmentos absorben la luz.
¿Qué método de mezcla debo usar?
OKLab es la mejor opción general: los pasos se ven uniformes y el centro no se vuelve apagado ni demasiado oscuro. Usa sRGB si necesitas coincidir con capas de Photoshop, la opacidad de CSS o la mayoría de las herramientas de diseño, y RGB lineal para simular la mezcla de luces de colores.
¿Es lo mismo que mezclar pintura?
No. Las pantallas mezclan la luz de forma aditiva, mientras que la pintura se mezcla de forma sustractiva. La luz azul y la amarilla dan gris o blanco, pero la pintura azul y la amarilla dan verde. El modo de fusión multiplicar es el sustituto digital más parecido a superponer tintas transparentes.
¿Cómo funcionan aquí los modos de fusión?
El color B se trata como una capa encima del color A, y el control fija la opacidad de B. Cada canal se combina con las fórmulas de composición del W3C, por ejemplo multiplicar = A × B y trama = A + B − A × B, usando valores de 0 a 1.
¿Puedo usar el resultado en CSS?
Sí. Copia el código HEX o RGB, o usa la expresión color-mix() generada, que los navegadores modernos admiten en srgb, srgb-linear, oklab, oklch y hsl.
¿Cómo se calcula el color sRGB intermedio?
Se promedia cada canal: para #ff8800 y #0088ff el canal rojo es (255 + 0) ÷ 2 = 127.5, redondeado a 128 (hex 80), el verde es 136 (88) y el azul es 128 (80), lo que da #808880.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.