Mezclador de Colores - Mezclar Colores en Línea
Mezcla dos o más colores con proporciones ajustables en espacio de color RGB o HSL. Vista previa de degradados y copia de resultados — 100% del lado del cliente.
Preguntas Frecuentes
¿Qué es un mezclador de colores?
Un mezclador de colores es una herramienta en línea que mezcla dos o más colores en proporciones configurables para producir un nuevo color intermedio. Calcula la interpolación matemática entre los colores de entrada en un espacio de color elegido (como RGB o HSL) y produce el resultado en múltiples formatos (HEX, RGB, HSL).
¿Cómo uso esta herramienta?
1. Ingrese dos colores usando los campos HEX o los selectores de color. 2. Ajuste el control deslizante de proporción. 3. Opcionalmente cambie el modo de mezcla entre RGB y HSL. 4. Vea el color resultante con sus valores HEX, RGB y HSL. 5. Haga clic en cualquier valor para copiarlo. 6. Agregue más colores para mezcla multicolor o use la vista previa de pasos de degradado.
¿Mis datos de color están seguros?
Sus datos de color son 100% seguros y nunca salen de su navegador. Todos los cálculos de mezcla de colores se realizan completamente del lado del cliente usando operaciones matemáticas de JavaScript. No se transmiten datos a ningún servidor.
¿Cuál es la diferencia entre mezcla RGB y HSL?
La mezcla RGB interpola cada canal rojo, verde y azul de forma independiente. Es simple pero puede producir intermedios apagados. La mezcla HSL interpola tono, saturación y luminosidad por separado, siguiendo el camino más corto en la rueda de color, produciendo resultados más vibrantes e intuitivos.
¿Puedo mezclar más de dos colores?
Sí. Haga clic en 'Agregar Color' para añadir más entradas de color (hasta 8 en total). Cada color tiene un control de peso, y el resultado es un promedio ponderado de todos los colores en espacio RGB.
¿Cómo se calculan las proporciones de mezcla?
Para dos colores, el control deslizante controla un factor de interpolación lineal de 0% a 100%. En 0%, el resultado es Color 1 puro. En 50%, es una mezcla igual. En 100%, es Color 2 puro. La fórmula es: resultado = color1 × (1 - ratio/100) + color2 × (ratio/100).
¿Qué son los pasos de degradado?
La vista previa de pasos de degradado muestra una franja de colores intermedios entre los dos colores de entrada. Puede elegir entre 3 y 10 pasos. Haga clic en cualquier paso para copiar su valor de color.
Ejemplos de Código
// Color Mixer
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) return null;
return {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
};
}
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0'))
.join('');
}
function mixColorsRgb(hex1, hex2, ratio = 0.5) {
const c1 = hexToRgb(hex1);
const c2 = hexToRgb(hex2);
if (!c1 || !c2) return null;
const t = Math.max(0, Math.min(1, ratio));
return rgbToHex(
c1.r * (1 - t) + c2.r * t,
c1.g * (1 - t) + c2.g * t,
c1.b * (1 - t) + c2.b * t,
);
}
function generateGradientSteps(hex1, hex2, steps = 5) {
const result = [];
for (let i = 0; i < steps; i++) {
const ratio = steps === 1 ? 0.5 : i / (steps - 1);
result.push(mixColorsRgb(hex1, hex2, ratio));
}
return result;
}
// Usage
const blue = '#3b82f6';
const red = '#ef4444';
console.log('50/50 mix:', mixColorsRgb(blue, red, 0.5));
console.log('Gradient:', generateGradientSteps(blue, red, 5));