Palette Generator: Crear Esquemas de Color

¿Qué es Palette Generator?

Próximamente: Palette Generator es una herramienta de navegador que aplica algoritmos de teoría del color para generar paletas de colores matemáticamente equilibradas a partir de un único color base. La herramienta ofrece tres modos: Armonía (con 11 tipos de armonía, incluyendo complementario, análogo, triádico, tetrádico, split-complementario, monocromático, doble-split-complementario, rectángulo, clash, cinco tonos y seis tonos), Generar (con sombras/tintes/tonos, aleatorio restringido, pares de contraste WCAG, interpolación de degradados y extracción de colores de imagen) y Estado de ánimo (con 20 presets basados en estados de ánimo). El resultado es una paleta que puedes copiar como valores hexadecimales, descargar como archivo de variables CSS, un objeto JSON, variables SCSS o una extensión de configuración de Tailwind, o exportar como archivo Adobe Swatch Exchange (ASE). Todo funciona en el navegador; no se envía ningún dato a ningún servidor.

Funcionalidades principales

• Esquemas de colores complementarios: Genera una paleta de dos colores usando colores directamente opuestos entre sí en el círculo cromático (a 180° de distancia), produciendo el máximo contraste con equilibrio visual inherente.
• Paletas de colores análogos: Produce tres colores que se sitúan adyacentes en el círculo cromático, creando paletas armoniosas y de bajo contraste, bien adaptadas para fondos y diseños de interfaz tranquilos.
• Armonías triádicas y tetrádicas: Triádico usa tres colores espaciados uniformemente a intervalos de 120°; tetrádico usa cuatro colores a intervalos de 90°. Ambos ofrecen ricas opciones multicolor manteniendo la armonía.
• Esquemas split-complementarios: Una alternativa más suave al complementario — toma el color base y dos colores adyacentes a su complemento en lugar del complemento mismo. Verificado en el componente como tipo de armonía 'split-complementary'.
• Variaciones monocromáticas: Genera múltiples tonos del mismo matiz variando la luminosidad, creando paletas cohesivas de un solo tono.
• Ajustar saturación y luminosidad: La entrada de color base acepta cualquier valor HEX válido escrito manualmente, elegido mediante un widget de selector de color o generado aleatoriamente con el botón Aleatorio.
• Copiar colores en múltiples formatos: Cada color en la paleta tiene su propio botón de copia. El botón "Copiar todo" escribe toda la paleta como valores HEX separados por comas y también registra la acción en el historial de la sesión.
• Exportar paleta como JSON, CSS, SCSS, Tailwind o ASE: Cinco formatos de exportación están disponibles directamente desde la herramienta, cubriendo desarrollo web, preprocesadores de hojas de estilo y aplicaciones de diseño de Adobe.

Cómo usar Palette Generator

Paso 1: Elige tu color base

Abre Próximamente: Palette Generator. La herramienta carga con un color base predeterminado derivado de tu esquema de color del sitio actual (el esquema predeterminado usa azul). Cámbialo de tres maneras:

• Haz clic en la entrada de muestra de color (se abre un selector de color nativo del navegador)
• Escribe o pega un valor HEX directamente en el campo de texto junto a la muestra
• Haz clic en el botón "Aleatorio" para generar un color HEX aleatorio

Una gran vista previa de muestra se actualiza en tiempo real mostrando tu color base con su valor hexadecimal en texto contrastante.

Paso 2: Selecciona un tipo de armonía

Debajo de la sección de color base, se muestran once botones de tipo de armonía en una cuadrícula. Haz clic en uno para seleccionarlo:

El botón de tipo de armonía activo se resalta en el color primario. La paleta generada se actualiza instantáneamente con cada cambio de selección.

Paso 3: Revisa la paleta generada

La sección "Paleta generada" muestra dos vistas del resultado:

• Una banda horizontal de bloques de color, cada uno ocupando un ancho proporcional. Haz clic en cualquier bloque para copiar el valor HEX de ese color directamente.
• Una lista debajo de la banda que muestra el código HEX de cada color con una muestra y su propio botón de copia. La primera entrada está etiquetada como el color base.

Por ejemplo, partiendo de #e63946 con armonía triádica se produce:

#e63946  (base)
#46e639
#3946e6

Paso 4: Copiar o exportar

Usa los botones de exportación para guardar la paleta para tu flujo de trabajo:

• Exportar JSON: Descarga triadic-palette.json que contiene { baseColor, harmonyType, palette }.
• Exportar CSS: Descarga triadic-palette.css como propiedades personalizadas CSS de :root: --color-1, --color-2, etc.
• Exportar Tailwind JS: Descarga triadic-tailwind.js con un bloque de configuración de Tailwind theme.extend.colors usando palette como clave de familia de colores con entradas como color-1, color-2, etc.
• Exportar Variables SCSS: Descarga triadic-palette.scss con $color-1, $color-2, etc., más un mapa de Sass.
• Exportar ASE (premium): Descarga un archivo binario Adobe Swatch Exchange legible por Photoshop, Illustrator y otras aplicaciones de Adobe.

Paso 5: Guardar como preset o restablecer

Si usas regularmente esta combinación de color base y tipo de armonía, usa el panel de Presets (función de supporter de Glyph Widgets) para guardarlo por nombre para un recordatorio de un solo clic. Para restaurar los valores predeterminados, haz clic en el botón Limpiar — esto restablece al color base #8467c7 y el tipo de armonía complementaria.

Ejemplos prácticos

Diseñar un sistema de colores para una landing page

Comienza con tu color de marca principal, por ejemplo #0f62fe (IBM Blue). Selecciona la armonía split-complementaria para obtener una pairng de contraste más suave. El resultado te da un azul primario más dos opciones de acento cálido que funcionan juntas sin colisionar. Exporta como variables CSS y pega directamente en el bloque :root de tu hoja de estilos.

:root {
  --color-1: #0f62fe;
  --color-2: #fe620f;
  --color-3: #fe0f62;
}

Generar una extensión de paleta de Tailwind

Estás construyendo un proyecto Tailwind CSS y necesitas una familia de colores personalizada. Introduce tu color de marca, elige monocromático para generar tonos de claro a oscuro, luego exporta como Tailwind JS. El archivo descargado te da un bloque theme.extend.colors listo para pegar donde cada tono está indexado como monochromatic-1, monochromatic-2, etc.

Preparar muestras para un proyecto de Adobe Illustrator

Necesitas hacer coincidir una paleta de colores web en un diseño impreso. Introduce el color base, elige tu tipo de armonía, luego exporta como ASE. El archivo ASE binario sigue el formato ASEF y puede cargarse directamente en el panel de Muestras de Illustrator, preservando todos los valores RGB sin ninguna reentrada manual.

Consejos y buenas prácticas

El botón Aleatorio establece un color HEX base completamente aleatorio. Úsalo para explorar armonías que no habrías elegido deliberadamente — es una forma rápida de encontrar puntos de partida inesperados para un nuevo diseño.

Al comparar tipos de armonía, observa que el color base es siempre la primera entrada en cada paleta generada. Esto te permite anclar tu paleta a un color al que ya te has comprometido (un color de logotipo, un valor de directriz de marca) mientras exploras diferentes opciones complementarias.

Las paletas triádicas funcionan bien cuando necesitas tres colores funcionales claramente distintos — acción primaria, acción secundaria y estados destructivos o de advertencia. El espaciado de 120° asegura que ninguno de los dos sea demasiado visualmente similar.

Para accesibilidad, pasa los colores de tu paleta generada por el Contrast Checker antes de finalizar. Los pares complementarios a menudo cumplen los requisitos de contraste WCAG, pero las paletas análogas pueden producir combinaciones que fallan para el uso de texto.

El panel de historial (función de supporter) registra cada acción de "Copiar todo" con el color base y el tipo de armonía, permitiéndote volver a una paleta que generaste antes en la sesión sin recordar los valores exactos.

Problemas comunes y solución de problemas

La paleta no se actualiza cuando escribo un valor HEX: La herramienta reacciona a cada pulsación de tecla en la entrada de texto. Si escribes una cadena HEX incompleta o inválida, la función generateHarmony recibe el valor actual y puede producir resultados inesperados hasta que el valor sea un HEX válido de 6 dígitos. Escribe el valor completo o usa la entrada del selector de color para garantizar un resultado válido.

El botón Aleatorio produce paletas muy oscuras o muy claras: La función generateRandomColor() genera una gama completa de valores HEX, incluyendo casi-negro y casi-blanco. Si el resultado aleatorio es demasiado extremo, haz clic en Aleatorio de nuevo o ajusta el color base manualmente usando el selector de color.

Exportar como ASE produce un archivo que Adobe no puede abrir: La exportación ASE construye un archivo binario de formato ASEF en el navegador usando DataView. Si la descarga contiene cero bytes o el archivo es rechazado, verifica que tu navegador soporte Blob con application/octet-stream. Los navegadores modernos basados en Chromium y Firefox manejan esto correctamente.

"Copiar todo" copia una lista separada por comas pero necesito valores separados por salto de línea: La salida del portapapeles usa , como separador. Pega los valores en un editor de texto y usa buscar-y-reemplazar para cambiar , por un salto de línea si tu herramienta de destino requiere un valor por línea.

El botón Limpiar restablece a los valores predeterminados: El botón Limpiar está diseñado para restaurar la configuración predeterminada, incluyendo el color base de tu esquema de color del sitio actual y el tipo de armonía complementaria. Este es el comportamiento esperado — no restaura un color personalizado anterior.

Privacidad y seguridad

Palette Generator funciona completamente del lado del cliente. Todos los cálculos de armonía de color ocurren en tu navegador usando JavaScript — no se transmiten valores de color, preferencias o datos de exportación a ningún servidor. Los archivos exportados (JSON, CSS, SCSS, Tailwind JS, ASE) se generan como objetos Blob en memoria y se descargan directamente a tu dispositivo. La herramienta funciona sin conexión una vez que la página ha sido cargada.

Preguntas frecuentes

¿Es Palette Generator gratuito?

Sí. La generación de paletas principal y todos los formatos de exportación estándar (JSON, CSS, SCSS, Tailwind JS) son gratuitos sin necesidad de cuenta. La exportación ASE es una función de supporter de Glyph Widgets, disponible con una donación de 5 $ o más en Ko-fi que otorga 30 días de acceso premium.

¿Funciona Palette Generator sin conexión?

Sí. Una vez que la página ha cargado en tu navegador, todos los cálculos de color y exportaciones de archivos funcionan sin conexión a internet. La herramienta no realiza solicitudes de red durante la generación normal de paletas.

¿Están seguros mis datos con Palette Generator?

Todos los cálculos se realizan localmente en tu navegador. No se envían datos de color, colores base o archivos exportados a ningún servidor. Tu trabajo de paleta es completamente privado.

¿Cuál es la diferencia entre triádico y split-complementario?

Triádico selecciona tres colores a exactamente 120° de intervalos en el círculo cromático. Split-complementario toma tu color base y dos colores que flanquean su complemento — los dos colores que están a 30° a cada lado del matiz opuesto. Split-complementario normalmente produce menos tensión visual que un par verdaderamente complementario mientras sigue ofreciendo buen contraste.

¿Cómo uso las variables CSS exportadas?

La exportación CSS produce un bloque :root con variables llamadas --color-1, --color-2, etc. Pega este bloque en tu hoja de estilos y referencia las variables en cualquier lugar con var(--color-1). El nombre del archivo incluye el tipo de armonía, por lo que complementary-palette.css está claramente etiquetado.

¿Puedo usar la exportación de Tailwind directamente en mi proyecto?

El archivo descargado es un fragmento de configuración de Tailwind, no un tailwind.config.js completo. Copia el objeto colors desde dentro de theme.extend.colors y fúsionalo en tu configuración de Tailwind existente. La familia de colores usa palette como clave con entradas como color-1, color-2, etc., por lo que puedes referenciar colores como text-palette-color-1 o bg-palette-color-2 en tus plantillas.

¿Qué es el formato de exportación ASE y para quién es?

ASE (Adobe Swatch Exchange) es un formato binario que almacena muestras de color para su uso en aplicaciones de Adobe Creative Suite, incluyendo Photoshop, Illustrator e InDesign. Los diseñadores que trabajan tanto en web (CSS) como en impresión (aplicaciones de Adobe) pueden usar la exportación ASE para mantener la coherencia de color en ambos entornos sin volver a introducir valores manualmente.

¿Cuántos colores genera cada tipo de armonía?

Complementario genera 2 colores; análogo, triádico, split-complementario y clash generan 3 cada uno; tetrádico y rectángulo generan 4 cada uno; doble-split-complementario y cinco tonos generan 5 cada uno; seis tonos genera 6; monocromático genera un número variable de tonos. Todas las entradas de paleta se muestran en la banda de paleta y la lista debajo de ella.

¿Puedo empezar desde un color que elegí de una imagen?

Sí. Usa el Próximamente: Image Color Picker para extraer un color de una foto, copia su valor HEX, luego pégalo en el campo de texto del color base en Palette Generator para construir una armonía alrededor de él.

¿Puedo guardar mis paletas favoritas?

Con una cuenta de supporter de Glyph Widgets, el panel de Presets te permite guardar presets con nombre que almacenan el color base y el tipo de armonía. El panel de Historial también registra operaciones pasadas de "Copiar todo", facilitando encontrar una paleta que generaste anteriormente.

Herramientas relacionadas

• Próximamente: Color Blender — Mezclar dos colores juntos y generar pasos intermedios, complementando el trabajo de paleta.
• Color Picker — Elegir un color base preciso usando una rueda de colores o controles deslizantes antes de generar una paleta.
• Próximamente: Gradient Generator — Crear degradados CSS usando colores de tu paleta generada.
• Contrast Checker — Verificar las relaciones de contraste WCAG para dos colores cualesquiera de tu paleta antes de usarlos en texto de interfaz.

Prueba Palette Generator ahora: Próximamente: Glyph Widgets Palette Generator