Generador de paletas
Pulsa espacio para obtener una paleta nueva. Fija los colores que te gusten, comprueba el contraste y llévate el código para tu web.
Pasa el ratón por un color: el candado lo fija, los puntos lo arrastran y «+» añade un color al lado. Haz clic en el código para editarlo.Cada color tiene botones: fijar, copiar, tonos y eliminar. Toca el código del color para editarlo.
Contraste
Pares de colores de la paleta según WCAG: AA, texto normal; AAA, la mejor opción.
Exportar
Paletas listas
Comprobaciones rápidas: Favicon · Vista previa SEO · Tienda de la competencia · Generador de paletas
Cómo usarlo
Cada pulsación del espacio da una paleta nueva. ¿Te gusta un color? Fíjalo con el candado y las siguientes paletas se ajustarán a él. Haz clic en el código de un color para ajustar brillo, saturación y tono o escribir tu propio HEX. El botón de rayas muestra tonos más claros y oscuros del color, útil cuando necesitas un fondo o un color para el estado hover. Los colores se pueden arrastrar, añadir entre vecinos y eliminar, de 2 a 10.
Paleta de una foto y código listo
Sube una foto o pégala desde el portapapeles y la herramienta encontrará sus colores principales. La paleta se puede copiar como variables CSS, SCSS, configuración de Tailwind o JSON, descargar como imagen PNG o SVG, guardar en tu perfil o abrir en «Degradado de una foto» para convertirla en un fondo. La dirección de la página siempre contiene la paleta actual: basta con compartirla.
Preguntas frecuentes
¿No encuentras la respuesta? Escríbenos y te ayudamos.
Pulsa espacio o el botón «Generar». Fija con el candado los colores que te gusten: se quedan en la siguiente generación y el resto se ajusta a ellos en la armonía elegida.
Análoga: tonos vecinos, tranquila y suave. Monocromática: un solo tono con distinto brillo. Complementaria: colores opuestos, el contraste más fuerte. Complementaria dividida, tríada y tétrada: 3-4 tonos repartidos por el círculo. «Auto» elige una de ellas cada vez.
En este espacio, los mismos valores de luminosidad se ven igual de claros para el ojo, así que la paleta siempre tiene colores claros y oscuros y la saturación no salta entre tonos como en HSL.
El bloque «Contraste» muestra pares de colores de la paleta y su contraste según WCAG: desde 4.5:1, texto normal (AA); desde 7:1, AAA; desde 3:1, solo títulos grandes. El color del texto de cada columna se elige automáticamente.
Aproximadamente uno de cada doce hombres distingue los colores de otra forma. Activa la simulación de protanopía, deuteranopía, tritanopía o visión monocromática y comprueba que los colores importantes no se confunden.
Sí, sin restricciones. Las paletas se generan en tu navegador y un conjunto de colores no está protegido por derechos de autor.