Generador de paletas de colores
Crea una paleta armoniosa a partir de un color: complementaria, análoga, triádica, monocromática y tonos del 50 al 950. Exporta a CSS, SCSS y Tailwind.
- Gratis
- Sin registro
- Sin subir archivos
- Windows, Mac, Android, iPhone
Cargando la herramienta…
Acerca de esta herramienta
Encuentra colores que combinen a partir de uno solo: seis armonías (complementaria, análoga, triádica, complementaria dividida, tetrádica, monocromática) y una escala completa de tonos del 50 al 950 como en Tailwind. Un clic copia el código de un color; la paleta se exporta como variables CSS, SCSS, Tailwind o JSON, y como imagen.
Cuándo usarla
Colores de marca de un proyecto
A partir del color de un logotipo, la armonía complementaria da un color de acento para botones y enlaces.
Sistema de diseño
La escala del 50 al 950 ofrece todos los tonos necesarios para fondos, bordes, estados de hover y textos, con nombres coherentes.
Presentaciones y documentos
Una paleta análoga o monocromática hace armoniosos gráficos y diapositivas sin esfuerzo.
Cómo se usa
- Elige tu color base (o uno al azar).
- Elige una armonía y toca un color para copiar su código.
- Copia la paleta como variables CSS, SCSS, Tailwind o JSON.
Cómo funciona
Los colores se calculan en HSL (tono, saturación, luminosidad): la herramienta gira el tono del color base según la armonía elegida y ajusta la luminosidad para las variantes claras y oscuras.
La escala de tonos conserva el tono y la saturación de la base y fija la luminosidad de cada nivel (97 % para el 50, 14 % para el 950), con una saturación algo menor en los extremos, como las paletas hechas a mano.
Consejos para un mejor resultado
- Aplica la regla 60-30-10: un color dominante, uno secundario y uno de acento.
- Reserva un color vivo para las acciones (botones) y colores tranquilos para el resto.
- Comprueba el contraste del texto sobre cada color de fondo antes de adoptarlo.
- Nombra los colores por su función (primario, acento) más que por su tono.
Problemas frecuentes y soluciones
Los colores se ven apagados
Tu color base tiene poca saturación: elige una base más viva, las armonías la heredan.
El amarillo oscuro se vuelve marrón
Es normal: un amarillo oscurecido se vuelve marrón. Para tonos amarillos oscuros, desplaza un poco el tono hacia el naranja.
No funciona la copia
Algunos navegadores bloquean el portapapeles fuera de HTTPS o sin clic directo; usa los bloques de código.
Preguntas frecuentes
¿Qué es una armonía de colores?
Una regla para elegir colores en el círculo cromático: opuestos (complementarios), vecinos (análogos), a 120° (triádicos)… Estas combinaciones agradan a la vista y se usan desde hace siglos en pintura.
¿Para qué sirven los tonos del 50 al 950?
Escalonan tu color del más claro al más oscuro, como las paletas de Tailwind CSS: 50 para fondos, 500 para el color principal, 900 para textos.
¿Cómo uso la paleta en mi web?
Copia las variables CSS (--primary-500…) en tu hoja de estilos, o la configuración de Tailwind en tailwind.config.js.
¿Los colores son accesibles?
El texto de las muestras cambia solo a negro o blanco para el mejor contraste. Comprueba tus parejas texto/fondo con el comprobador de contraste.
Búsquedas relacionadas
¿Sigues atascado?
Pregunta en el foro: la categoría, la herramienta, la ficha de tu dispositivo y el resultado de la prueba se rellenan solos.