Generador de Paletas de Color
Crear, extraer y exportar paletas de color CSS
Generador de paletas de color gratuito — crea esquemas de color cohesivos desde un único color base. Soporta armonías complementarias, triádicas, análogas y split-complementarias. Exporta como custom properties CSS, config de Tailwind, JSON o HEX. Incluye puntuaciones WCAG y escala tonal.
// guía rápida
Una paleta de colores es una selección cohesiva de colores elegidos para crear una estética visual o armonía específica. El uso de teorías de color como las armonías complementarias o análogas ayuda a construir sistemas de color equilibrados para sitios web y aplicaciones.
Cómo usar esta herramienta:
- Elige un color base usando el selector de color o ingresa un código hex/hsl.
- Selecciona una armonía de color de la lista: Complementaria, Triada, Análoga, Complementaria Dividida o Monocromática.
- Revisa la puntuación de contraste WCAG para cada color generado sobre fondo blanco y negro para asegurar la accesibilidad.
- Exporta la paleta a variables personalizadas de CSS, configuración de Tailwind CSS o formato estándar JSON/HEX.
// preguntas frecuentes
¿Qué son las armonías de color?
Las armonías son reglas para elegir colores en base a su posición en la rueda de colores. Por ejemplo, los colores complementarios están opuestos en la rueda creando un contraste vibrante, mientras que los colores análogos están adyacentes, creando un aspecto calmado y cohesivo.
¿Cómo afectan las puntuaciones de contraste WCAG a mi paleta?
Las puntuaciones de contraste miden la legibilidad del texto. Se requiere una relación de al menos 4.5:1 para texto normal (calificación AA). Comprobar estas puntuaciones asegura que tu interfaz sea legible para personas con problemas visuales.
¿Puedo importar directamente estos colores en Tailwind CSS?
Sí. La herramienta genera objetos de configuración de Tailwind listos para copiar y pegar directamente en tu archivo tailwind.config.js.