Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Mezclador de colores

Color Mixer

Mezcla dos colores HEX —con alfa opcional— en sRGB con peso ajustable o por superposición, y exporta el resultado como HEX, RGBA, CSS o JSON.

Ruta de la tarea / de la entrada al resultado

Introduce los dos colores

Funciona en local · No se sube nada

Cómo funciona Mezclador de colores, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo mezclar dos colores

  1. 01

    Introduce los dos colores

    Rellena Primer color y Segundo color con valores hexadecimales: se aceptan #RGB, #RGBA, #RRGGBB y #RRGGBBAA, así que las entradas translúcidas también valen. El espacio de trabajo abre con #6D5EF8 frente a #22C55E.

  2. 02

    Método de cálculo

    Elige el Método de cálculo: Mezcla ponderada interpola canales sRGB codificados con alfa premultiplicado. Componer coloca el primer color sobre el segundo; el orden importa y este modo no muestra el control de peso.

  3. 03

    Mezcla los colores

    En Mezcla ponderada, ajusta el peso del segundo color de 0 % (solo el primero) a 100 % (solo el segundo) y pulsa Mezclar colores. En Componer, el mismo botón aplica la superposición. Cambiar un color, método o peso borra el resultado anterior.

  4. 04

    Lee el panel de resultados

    HEX, RGBA, CSS y vista previa comparten canales y alfa de 8 bits. La transparencia se muestra sobre la página; el resultado conserva alfa.

  5. 05

    Prueba la mezcla de ejemplo

    Pulsa Cargar ejemplo para mezclar #F97316 con #7C3AED a un peso del 35% — un naranja cálido virando hacia el violeta — y ver el flujo completo. Restablecer devuelve la pareja por defecto al 50%.

  6. 06

    Copia o descarga el resultado

    Copia o descarga toolars-color-mix.json con ambos colores fuente, método, espacio sRGB, HEX, RGBA y una declaración CSS. secondColorWeight solo aparece en la mezcla ponderada. Todas las salidas comparten el resultado de 8 bits.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Mezclador de colores usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Qué hace Mezclador de colores en realidad

Para crear una transición entre violeta y verde de marca, usa Mezcla ponderada y ajusta el porcentaje del segundo color. Para evaluar una capa translúcida sobre un fondo, usa Componer con la capa primero y el fondo segundo. Revisa alfa y vista previa sobre el fondo real antes de exportar el JSON: son operaciones distintas.

Preguntas frecuentes

¿Cómo funciona el control deslizante de peso?
El control aparece solo en Mezcla ponderada. Con 0 % resulta el primer color y con 100 % el segundo. Entre ambos se interpolan canales sRGB codificados con alfa premultiplicado y se redondean a 8 bits. Componer ignora el peso y pone el primer color sobre el segundo.
¿El mezclador maneja la transparencia?
Sí. La mezcla ponderada interpola con alfa premultiplicado; la composición coloca el primer color sobre el segundo. Compara alfa y orden de capas sobre el fondo previsto.
¿Cómo se redondean los canales?
HEX, RGBA, CSS y vista previa comparten canales y alfa de 8 bits. La transparencia se muestra sobre la página; el resultado conserva alfa.
¿Por qué se borró el panel de resultados?
Cambiar cualquiera de los colores, el método de cálculo o el peso borra el resultado anterior para que no parezca corresponder a los ajustes actuales. Pulsa de nuevo Mezclar colores.
¿Qué contiene exactamente la exportación?
Copia o descarga toolars-color-mix.json con ambos colores fuente, método, espacio sRGB, HEX, RGBA y una declaración CSS. secondColorWeight solo aparece en la mezcla ponderada. Todas las salidas comparten el resultado de 8 bits.
¿Los datos se envían a alguna parte?
No. La mezcla se calcula por completo en esta pestaña del navegador, lo que introduces y los resultados nunca salen de ella, y no se necesita cuenta.

Sigue leyendo

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Crear

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Crear

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear