Generador de paleta de color (5 esquemas desde una base)
Elige un color base, escoge un esquema de teoría del color y obtén una paleta coordinada. Click en muestras para copiar hex individuales, o copiar todo de una vez para herramientas de diseño y variables CSS.
Paleta generada
- #3BDFF6
- #3B82F6
- #513BF6
Cómo funciona
Los cinco esquemas de teoría del color
Complementario: dos colores en extremos opuestos del círculo (180°). Alto contraste, vibrante. Para acentos, CTAs y crear focos.
Análogo: tres colores adyacentes (30°). Armoniosos, bajo contraste. Comunes en la naturaleza; ideales para fondos y superficies UI.
Triádico: tres colores equidistantes (120°). Vibrante y equilibrado. Para diseños lúdicos o energéticos.
Tetrádico (rectángulo): cuatro colores formando rectángulo (90°). Paleta rica pero más difícil de equilibrar — usa uno dominante y otros como acentos.
Monocromático: tonos, tintes y matices de un solo tono. Sofisticado y unificado. Común en diseños minimalistas y branding corporativo.
Elegir color de partida
Colores de marca: la mayoría parte de un logo o color de marca existente. Pruébalo como base en los 5 esquemas para encontrar el mejor encaje.
Inspiración: toma un color de fotografía, arte o naturaleza. Colores vívidos (alta saturación, luminosidad media) funcionan mejor de base; muy pálidos o oscuros producen paletas deslavadas.
Accesibilidad: asegúrate de que tu paleta final tenga contraste suficiente para texto. Usa el contrast checker para verificar pares fondo/texto WCAG AA (4.5:1 normal).
Usar la paleta
Variables CSS: define los colores como variables :root (--color-primary, --color-accent, etc.) para cambiar tema en un solo lugar.
Herramientas de diseño: pega los hex en bibliotecas de Figma, Sketch o Adobe XD. La mayoría aceptan hex directamente; algunas también HSL o nombres CSS.
Uso limitado: incluso con 5 colores, los diseños reales suelen usar 2-3 prominentemente y el resto poco. La regla 60-30-10 (60% dominante, 30% secundario, 10% acento) es buen punto de partida.
Preguntas frecuentes
›¿Qué esquema usar?
Análogo es la opción más segura — tres colores cercanos crean armonía sin monotonía. Complementario va bien para énfasis (CTAs). Monocromático para marcas mínimas/sofisticadas. Triádico para sensación lúdica/energética.
›¿Más de 5 colores?
No con esta herramienta — generamos los 2-5 canónicos. Para paletas mayores, usa la salida análoga y crea sombras monocromáticas de cada (combina esquemas).
›¿Usa espacio de color perceptual?
Usamos matemática HSL, rápida y predecible. Para resultados perceptualmente uniformes (mejor para tuning de accesibilidad), avanzados usan OKLCH o CIELAB. HSL basta para casi todo el diseño.
›¿Mi paleta será accesible?
No automáticamente. Los esquemas garantizan armonía estética, no contraste para texto. Verifica siempre combinaciones texto-sobre-fondo con el contrast checker antes de lanzar.
›¿Guardar paletas favoritas?
Aún no — copia los hex a tu design system o notas. URLs de paleta guardable en el roadmap.
›¿Y Material Design o Tailwind?
Esos son sistemas pre-curados. Genera un esquema base aquí y luego busca colores Material/Tailwind similares. Algunas apps exportan hex compatibles directamente.
›¿Por qué mi paleta luce 'plana'?
Si tu base es muy pálida (alta luminosidad) o muy oscura (baja luminosidad), la paleta tiene rango dinámico limitado. Elige base con luminosidad media (40-60%) y alta saturación (70%+) para resultados vívidos.
›¿Los datos salen del navegador?
No. Todos los cálculos corren localmente; nada se envía a un servidor.
Herramientas relacionadas
Última actualización: