Color Palette Generator
Harmonic color palettes and WCAG accessibility contrast checker
:root {
--color-1: #10b981;
--color-2: #0ea5e9;
--color-3: #6366f1;
--color-4: #f59e0b;
--color-5: #0f172a;
}toolsContent.generador-paleta-colores.seo.title
Crea combinaciones de colores profesionales y armoniosas para diseño web, aplicaciones móviles y branding digital. Basado en la teoría clásica del color (complementarios, análogos, triádicos y monocromáticos).
Incorpora análisis de contraste de accesibilidad según las directrices internacionales WCAG 2.1 (Niveles AA y AAA), asegurando que los textos sobre fondos de color sean legibles para personas con discapacidad visual.
Permite bloquear colores individuales mientras generas variaciones aleatorias, copiar códigos HEX con un solo clic y exportar la configuración directamente a variables CSS, temas de Tailwind o estructuras JSON.
How does it work?
- 1Elige tu color base o genera aleatorio
Selecciona el tono corporativo principal o pulsa 'Generar Aleatoria' para inspirarte.
- 2Ajusta la regla armónica
Prueba esquemas triádicos, análogos, complementarios o monocromáticos.
- 3Verifica el contraste y exporta
Comprueba las etiquetas WCAG AA/AAA y exporta las variables de color a tu proyecto.
Frequently Asked Questions
El nivel AA exige un ratio mínimo de 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA es el estándar más estricto y requiere un ratio de al menos 7:1 para máxima legibilidad.
Ve a la pestaña 'Tailwind', copia el fragmento de configuración e insértalo en la sección theme.extend.colors de tu archivo tailwind.config.js.
Sí, haz clic en el icono del candado en cualquier tarjeta de color para bloquearlo y continúa generando armonías para el resto.