Saltar al contenido
EVOA Toolbox

Generador de paletas de colores

Genera armonías de color a partir de un color base, bloquea tus favoritos, comprueba el contraste WCAG y exporta a CSS, Tailwind, JSON o PNG.

Se procesa en local, en tu navegador. Tu texto no se sube.

Cargando herramienta…

Qué hace esta herramienta

Elige un color base y obtén al instante una paleta construida con reglas de teoría del color: complementaria, análoga, triádica, tetrádica, complementaria dividida, monocromática o una serie de tonos oscuros y claros. Los cálculos de matiz se hacen en HSL, y cada muestra enseña su valor en HEX, RGB, HSL y OKLCH para que copies el que use tu stack.

Cada muestra también indica su relación de contraste con texto blanco y negro, y si alcanza el nivel WCAG AA (4,5:1), AAA (7:1) o solo el umbral de texto grande (3:1), lo que ayuda a elegir colores de botones y de fondos. Pulsa Aleatoria para explorar: bloquea los colores que te gusten y el resto cambiará a su alrededor.

Cuando estés conforme, exporta la paleta como propiedades personalizadas de CSS, un bloque @theme de Tailwind v4, una extensión de configuración de Tailwind v3, JSON o una imagen PNG con las muestras. Todo se ejecuta en local y no se envía nada a ninguna parte.

Cómo usarla

  1. 1Elige un color base con el selector o escribe un valor hexadecimal como #2f5bea.
  2. 2Selecciona una armonía. Usa el control deslizante de cantidad para monocromática, tonos oscuros y tonos claros.
  3. 3Pulsa Aleatoria para explorar y bloquea los colores que quieras conservar.
  4. 4Comprueba las etiquetas de contraste de cada muestra antes de usarla para texto o botones.
  5. 5Copia los valores de cada muestra o exporta la paleta completa en el formato que necesites.

Formatos compatibles

Entrada: colores HEX (#rgb o #rrggbb). Salida: variables CSS, fragmentos de Tailwind v3/v4, JSON y PNG.

Privacidad

Esta herramienta se ejecuta en tu navegador. Los datos que proporcionas se procesan en tu dispositivo y no se envían a nuestros servidores.

Limitaciones

  • Las armonías son sugerencias matemáticas, no diseños terminados; ajústalas a ojo y pruébalas en contexto.
  • El contraste se mide solo entre el color de la muestra y el blanco y negro puros. Comprueba por separado tus pares reales de texto y fondo.
  • La apariencia del color varía entre pantallas y perfiles de color; los valores son sRGB.
  • Los valores de alfa u opacidad no forman parte de la paleta.

Preguntas frecuentes

¿Cuál es la diferencia entre análoga y triádica?

Los colores análogos están uno junto al otro en el círculo cromático (a 30 grados) y transmiten calma y cohesión. Los colores triádicos están a 120 grados y dan más variedad y contraste.

¿Qué significan AA y AAA?

Son niveles de contraste de WCAG 2 para texto. AA exige 4,5:1 para texto normal (3:1 para texto grande); AAA exige 7:1 para texto normal. La herramienta muestra el nivel más alto que alcanza cada muestra frente al blanco y frente al negro.

¿Cómo funciona el bloqueo?

Una muestra bloqueada conserva su color cuando pulsas Aleatoria o cambias el color base o la armonía, así que puedes construir una paleta alrededor de colores que ya te gustan.

¿Qué exportación debo usar para Tailwind?

Usa la salida v4 @theme con Tailwind 4 (configuración basada en CSS) y la salida de configuración v3 para proyectos que todavía usan tailwind.config.js.

Herramientas relacionadas