Color Blender: Mezclar colores y crear paletas

¿Qué es Color Blender?

Color Blender es una herramienta gratuita en línea que mezcla dos colores y genera una serie suave de tonos intermedios. Elige un color de inicio y un color de fin, decide cuántos pasos quieres (de 1 a 30), y la herramienta genera al instante una paleta completa de transición. Resuelve el problema habitual de calcular manualmente los puntos intermedios para degradados, escalas de visualización de datos o paletas de marca, sin necesidad de Figma, Illustrator ni ningún software instalado. Todo el procesamiento ocurre en tu navegador sin enviar datos a ningún servidor.

Funciones principales

• Mezclar dos colores — acepta valores hex mediante el campo de texto o el selector de color nativo; ambas entradas se sincronizan automáticamente.
• Pasos ajustables de 1 a 30 — un deslizador controla cuántos colores contiene la paleta, incluidos los dos extremos. Con 2 pasos obtienes solo el par original; con 30 obtienes una transición finamente graduada.
• Vista previa de paleta en tiempo real — una barra de degradado en vivo y una cuadrícula de muestras clicables se actualizan en el momento en que mueves el deslizador o cambias cualquier color.
• Copiar colores individuales o la paleta completa — al hacer clic en cualquier muestra se copia su valor hex al portapapeles. El botón "Copiar todo" copia la lista completa de códigos hex separados por comas de una vez.
• Salida HEX con utilidades RGB y HSL — cada muestra muestra el valor hex; el código fuente usa hexToRgb, rgbToHex y generateBlendedPalette de la biblioteca de utilidades de color compartida.
• Selector de color visual para entradas — junto a cada campo de texto hay un <input type="color"> nativo para seleccionar colores visualmente o escribir valores directamente.
• Exportar paleta como JSON — descarga un archivo color-blend-palette.json con color1, color2, steps y el array completo de palette.
• Exportar como variables CSS (Premium) — el PremiumExportButton genera un archivo color-blend-palette.css con propiedades personalizadas con nombre.

Cómo usar Color Blender

Paso 1: Configurar los dos colores base

Abre la herramienta Próximamente: Color Blender. Verás dos entradas de color una al lado de la otra, etiquetadas "Color 1" y "Color 2". Cada entrada tiene un selector de color (el cuadrado a la izquierda) y un campo de texto hex.

Haz clic en el selector de color para Color 1 para abrir el selector de colores nativo de tu navegador, o escribe un valor hex directamente, por ejemplo #E63946 para un rojo vivo. Haz lo mismo para Color 2: prueba #457B9D para un azul acero. Un rectángulo de vista previa debajo de cada entrada muestra el color seleccionado con su código hex superpuesto en un color de texto contrastante (la herramienta detecta automáticamente si usar texto negro o blanco para mayor legibilidad).

Usa el botón Intercambiar colores para invertir las dos entradas al instante, o haz clic en Aleatorizar para elegir dos nuevos colores al azar.

Paso 2: Ajustar el número de pasos de mezcla

Debajo de las entradas de color hay un deslizador de "Pasos de mezcla". Arrástralo hacia la izquierda hacia 1 para una transición mínima, o hacia la derecha hasta 30 para una paleta muy detallada. La etiqueta muestra el número de pasos actual y una línea debajo del deslizador muestra el total de colores que aparecerán en la paleta.

Para un degradado de interfaz estándar, 5–7 pasos suelen ser suficientes. Para una escala de colores de visualización de datos, 10–12 pasos ofrecen suficiente variedad para distinguir categorías con claridad.

Paso 3: Revisar la paleta mezclada

La tarjeta "Paleta mezclada" aparece debajo del deslizador. En la parte superior hay una barra de degradado continua que muestra cómo los colores hacen la transición de izquierda a derecha. Debajo, una cuadrícula de muestras cuadradas de 64×64 píxeles muestra cada paso.

Pasa el cursor sobre cualquier muestra para ver su valor hex en una pequeña superposición. Haz clic en la muestra para copiar el valor al portapapeles. Una notificación toast confirma la copia.

Debajo de las muestras, una vista de lista muestra el código hex de cada color con un pequeño cuadrado de vista previa y un botón de copia individual.

Paso 4: Exportar tu paleta

Usa una de las tres opciones de exportación:

• Copiar todo — copia la paleta completa como una cadena separada por comas (p. ej. #E63946, #C25167, #9F6388, ...) lista para pegar en cualquier lugar.
• Exportar JSON — descarga color-blend-palette.json con la estructura: { "color1": "#E63946", "color2": "#457B9D", "steps": 7, "palette": [...] }.
• CSS (Premium) — descarga color-blend-palette.css con propiedades personalizadas CSS llamadas --blend-0 a --blend-N.

Ejemplos prácticos

Degradado de marca para encabezado de sitio web

Un diseñador que construye una página de inicio para una startup necesita un degradado desde el color de marca principal #6C3FF5 (violeta) hasta un acento secundario #00C2CB (verde azulado). Con 8 pasos se obtiene: #6C3FF5, #5C53F2, #4C66EF, #3C7AEC, #2C8DE9, #1CA0E6, #0CB4E3, #00C2CB. Este conjunto intermedio se corresponde directamente con los stops de un degradado CSS con espaciado uniforme, asegurando que no haya saltos bruscos.

Escala de colores para visualización de datos

Un desarrollador que crea un mapa coroplético necesita una escala de blanco #FFFFFF a verde oscuro #1A6B3A para representar densidad de población. Con 10 pasos la paleta ofrece diez tonos perceptualmente distintos. El JSON exportado puede importarse directamente en una configuración de D3.js o Chart.js como el array de colores del dominio.

Verificación de contraste de accesibilidad

Un equipo de UI usa Color Blender para encontrar qué tonos intermedios entre dos colores de marca mantienen el contraste WCAG AA frente al texto blanco. Mezclan #003566 (azul marino) a #FFC300 (ámbar) en 12 pasos, luego pegan cada hex en el Contrast Checker para identificar el rango seguro de valores.

Consejos y buenas prácticas

Usa el botón aleatorizar para inspirarte. Cuando estés bloqueado en una dirección de paleta, hacer clic en Aleatorizar genera dos colores hex completamente aleatorios. El resultado mezclado a menudo revela combinaciones inesperadas que merece la pena conservar.

El botón de intercambio ayuda a verificar la direccionalidad. Como el degradado va de izquierda a derecha desde Color 1 hasta Color 2, intercambiarlos te permite ver rápidamente si la transición se ve mejor en la dirección opuesta.

Guarda las combinaciones favoritas como presets. El PresetsPanel (disponible para patrocinadores) almacena los valores color1, color2 y steps juntos para que puedas recuperar una configuración exacta de paleta sin volver a introducir los valores.

Restaura mezclas anteriores desde el Historial. El HistoryPanel registra cada acción de "Copiar todo". Al restaurar una entrada del historial, la herramienta vuelve a analizar la lista hex copiada, establece Color 1 en el primer valor, Color 2 en el último y los pasos en el recuento total.

Empieza con un número alto de pasos y reduce. Si no estás seguro de cuántos pasos necesitas, comienza en 20 o más para ver la granularidad completa, luego reduce hasta que la transición aún se vea suave. La mayoría de los degradados se ven bien entre 5 y 10 pasos.

Problemas comunes y solución de problemas

Valor hex no válido introducido manualmente. Si escribes una cadena no válida en el campo de texto hex (como #ZZZZZZ), hexToRgb devuelve null y la paleta se renderiza como un array vacío. El área de muestras estará en blanco. Solución: asegúrate de que el campo hex contiene exactamente 6 caracteres hexadecimales válidos precedidos de #.

La paleta muestra solo uno o dos colores. Ocurre cuando el deslizador está en su valor mínimo de 1 o 2. Arrástralo a la derecha para añadir pasos intermedios.

Copiar todo no produce ninguna salida. Si la paleta está vacía (por un color no válido), el intento de escritura en el portapapeles se activa igual pero envía una cadena vacía. Corrige primero las entradas de color y confirma que la barra de degradado es visible antes de copiar.

La descarga de exportación JSON no se activa. Algunos navegadores bloquean los clics programáticos en enlaces desde ciertos contextos. Si la descarga no comienza, comprueba que las ventanas emergentes y las descargas están permitidas para el sitio en la configuración de tu navegador.

La exportación CSS requiere Premium. La exportación de variables CSS está bloqueada detrás del componente PremiumExportButton y requiere una activación de patrocinador activa. La exportación JSON es gratuita y está disponible para todos los usuarios.

Privacidad y seguridad

Color Blender se ejecuta completamente en tu navegador. Ningún dato de color, configuración de paleta ni archivo exportado se transmite a ningún servidor. La herramienta usa únicamente la API Web Clipboard y las APIs Blob/URL, ambas operaciones locales del navegador. Los datos de presets e historial se almacenan en la base de datos IndexedDB de tu navegador y nunca salen de tu dispositivo. La herramienta funciona sin conexión después de la carga inicial de la página.

Preguntas frecuentes

¿Es Color Blender gratuito?

Sí, Color Blender es completamente gratuito sin necesidad de cuenta. Las funciones principales — mezclar colores, ajustar pasos, copiar valores hex y exportar JSON — están disponibles para todos los visitantes. La exportación de variables CSS es una función Premium para patrocinadores disponible con una donación de 5 $ en Ko-fi que otorga 30 días de acceso.

¿Funciona Color Blender sin conexión?

Sí. Una vez cargada la página, Color Blender funciona sin conexión a internet. Todos los cálculos de color se ejecutan en JavaScript en tu navegador y no se realizan solicitudes de red durante el uso normal. Esto lo hace seguro para usar en entornos con acceso a internet restringido.

¿Están seguros mis datos con Color Blender?

Completamente seguros. Ningún valor de color, dato de paleta ni archivo de exportación se envía nunca a un servidor. Todo el procesamiento ocurre localmente en tu navegador usando la API Web Clipboard para copiar y la API Blob para descargar archivos. Tus elecciones de color permanecen completamente en tu dispositivo.

¿Cómo funciona el algoritmo de mezcla?

La herramienta usa interpolación RGB lineal. Convierte ambos colores hex en sus componentes RGB y luego calcula valores intermedios uniformemente espaciados a lo largo de la línea recta entre ellos en el espacio de color RGB. Aunque los espacios de color perceptuales como OKLab pueden producir degradados de apariencia más uniforme para algunas parejas de colores, la interpolación RGB lineal es computacionalmente sencilla y produce resultados predecibles y simétricos.

¿El número de pasos incluye solo los intermedios o también los extremos?

El número de pasos incluye ambos extremos. Una configuración de 5 pasos produce exactamente 5 colores: el color de inicio, 3 tonos intermedios y el color de fin. Una configuración de 2 da solo los dos colores originales sin mezcla. El deslizador va de 1 a 30.

¿Puedo introducir colores que no sean hex?

Los campos de entrada de texto solo aceptan valores hex. Si quieres mezclar colores a partir de valores RGB o HSL, usa primero el Color Converter para obtener el equivalente hex y luego pégalo en Color Blender.

¿Qué formato tiene el JSON exportado?

El archivo JSON tiene cuatro claves: color1 (hex de inicio), color2 (hex de fin), steps (el valor del deslizador) y palette (un array de cadenas hex de inicio a fin). Para una mezcla de 5 pasos de #E63946 a #457B9D, el array de paleta contiene exactamente 5 valores hex.

¿Puedo mezclar más de dos colores?

Color Blender admite exactamente dos colores de entrada. Para crear un degradado de múltiples puntos con más anclajes, mezcla cada par de colores adyacentes por separado y combina las paletas resultantes. El Próximamente: Gradient Generator admite múltiples stops de color de forma nativa.

¿Cómo uso la paleta en CSS?

Para la exportación JSON, itera el array palette y asigna cada valor a un stop de degradado o una propiedad personalizada CSS. Para la exportación CSS (Premium), el archivo descargado contiene variables llamadas --blend-0 a --blend-N que puedes importar en cualquier hoja de estilos.

¿La paleta incluye los colores originales?

Sí. El primer color en el array de paleta siempre es Color 1 y el último siempre es Color 2. Todos los valores intermedios son interpolaciones calculadas.

Herramientas relacionadas

• Próximamente: Color Mixer — mezcla dos colores con un único deslizador de proporción para una mezcla rápida sin generar una paleta completa.
• Próximamente: Gradient Generator — crea degradados CSS de múltiples stops con controles precisos de ángulo y posición.
• Color Picker — selecciona colores de cualquier parte de tu pantalla o de una imagen cargada.
• Color Converter — convierte entre HEX, RGB, HSL, HSB y CMYK antes de mezclar.

Prueba Color Blender ahora: Próximamente: Glyph Widgets Color Blender