Generador de Paletas
UtilidadesPaletas arm?nicas y contraste de accesibilidad WCAG
- Se ejecuta en tu navegador
- No se envía nada a un servidor
- Sin registro
Base de la paleta
- Principal8.3:1WCAG AA: pasaAAA: pasa
- Secundario7.6:1WCAG AA: pasaAAA: pasa
- Acento4.7:1WCAG AA: pasaAAA: no
- Destacado9.8:1WCAG AA: pasaAAA: pasa
- Fondo17.9:1WCAG AA: pasaAAA: pasa
Exportar para desarrollo
Generador de Paletas de Colores y Verificador de Contraste WCAG
Crea combinaciones de colores armoniosas para diseño web, apps y branding, basadas en la teoría clásica del color (complementarios, análogos, triádicos y monocromáticos).
Cada color muestra su ratio de contraste y si cumple WCAG 2.1 nivel AA (4.5:1) y AAA (7:1), para que los textos sobre fondos de color sean legibles para todos.
Puedes bloquear colores individuales mientras generas variaciones, copiar los HEX con un clic y exportar a variables CSS, tema de Tailwind o JSON.
¿Cómo funciona?
- Elige el color base o genera aleatorio
Selecciona tu tono principal o pulsa 'Generar aleatoria' para inspirarte.
- Ajusta la regla armónica
Prueba esquemas triádicos, análogos, complementarios o monocromáticos.
- Verifica el contraste y exporta
Comprueba las etiquetas WCAG AA/AAA y exporta las variables de color a tu proyecto.
Preguntas Frecuentes
¿Qué significan WCAG AA y AAA?
AA exige un ratio mínimo de 4.5:1 para texto normal y 3:1 para texto grande. AAA es más estricto: al menos 7:1 para máxima legibilidad.
¿Cómo aplico la paleta en Tailwind?
En la pestaña 'Tailwind', copia el fragmento e insértalo en theme.extend.colors de tu tailwind.config.js.
¿Puedo fijar un color y variar solo los demás?
Sí. Pulsa el candado de cualquier tarjeta para bloquearla y sigue generando armonías para el resto.