Generador de Paletas de Colores
Pulsa la barra espaciadora para generar paletas infinitas. Bloquea tus colores favoritos y descubre esquemas armónicos.
#82A933
#8950E6
#36E7D4
#425D8B
#7E3E50
¿Qué hace el Generador de Paletas de Colores?
Genera esquemas de 5 colores instantáneos basados en fórmulas de armonía cromática, permitiéndote idear paletas para desarrollo web, interfaces de usuario e identidad de marca.
¿Cómo utilizar el generador?
- Generar: Presiona la tecla
Espacioo haz clic en "Generar paleta" para crear una nueva combinación. - Bloquear: Haz clic en el icono de candado en cualquier columna para fijar el color deseado mientras sigues generando los demás.
- Copiar: Pulsa sobre el código HEX para copiarlo directamente en tu portapapeles.
¿Se procesa en algún servidor?
No. Todo el algoritmo se ejecuta al 100% de manera local en tu navegador para ofrecer máxima velocidad y total privacidad.
Base de Conocimiento & FAQ
Preguntas Frecuentes
Respuestas y soluciones directas a dudas comunes, desafíos técnicos y estándares del sector.
¿Qué es la regla de color 60-30-10 en diseño web y UI?expand_more
La regla 60-30-10 es una fórmula de diseño que crea armonía y jerarquía visual:
- 60% Color dominante: Suele ser el fondo neutro (blanco puro, pizarra o tonos oscuros) que sirve de base estructural.
- 30% Color secundario: Empleado en tarjetas, barras de navegación laterales y cabeceras para aportar profundidad.
- 10% Color de acento: Un tono vibrante de alto contraste reservado estrictamente para puntos clave: botones de llamada a la acción (CTA), insignias activas y enlaces principales.
¿Cómo garantizo que mi paleta de colores cumpla con las normativas de accesibilidad?expand_more
Para asegurar el cumplimiento de accesibilidad digital (WCAG 2.1 AA):
- Compara cada color de texto con el fondo sobre el que se apoya y verifica que supere un ratio mínimo de 4.5:1.
- Nunca coloques texto blanco sobre amarillo puro (
#FFFF00) o verde lima, ya que apenas alcanzan un contraste de 1.1:1 y resultan ilegibles. - Utiliza nuestro Verificador de Contraste WCAG antes del despliegue en producción.
¿Cómo puedo exportar mi paleta a Tailwind CSS o variables CSS?expand_more
Puedes declarar las muestras de tu paleta como variables CSS personalizadas en tu hoja de estilos:
:root {
--color-primary: #4F46E5;
--color-secondary: #06B6D4;
--color-accent: #F43F5E;
--color-neutral: #1E293B;
--color-surface: #F8FAFC;
}tailwind.config.js bajo theme.extend.colors para utilizar clases como bg-primary o text-accent.¿Cuál es la diferencia psicológica entre paletas cálidas y frías?expand_more
Las paletas cálidas (rojos, naranjas, tonos ámbar) transmiten energía, urgencia y entusiasmo; son comunes en hostelería, comercio electrónico y entretenimiento. Las paletas frías (azules, turquesas, verdes profundos) comunican serenidad, seguridad y fiabilidad corporativa; son el estándar en fintech, sanidad y software empresarial.
¿Cuántos colores debe tener un sistema de diseño web profesional?expand_more
Un sistema de diseño escalable suele estructurarse en:
- 1 color de marca primario (con escala tonal de 50 a 950).
- 1 tono secundario para equilibrio visual.
- 1 color de acento de impacto para conversiones.
- 1 rampa de colores neutros (escala de 8 a 10 tonos grises para fondos, textos y bordes).
- 4 colores de estado semánticos: Éxito (verde), Advertencia (ámbar), Error (rojo) e Info (azul).